ignite boilerplate andross typescript

Ignite Cli

Usage

if you choose a login screen, redux,components,login screen will be generated then you can change them. You can see what will be these login screens look like in Here

You can see a gif and read about templates in below links:

Social Media
Bottom Tab Bar
Top Tab Bar
Navigation Drawer
Simple Collapsible Screen Template
Backdrop Screen
Collapsible Screen With Drawer Navigation Template

Component Generation

Screen Generation

= combineReducers ``` array in ``` App/Redux/index.tsx ``` If you want set the login screen as launch screen edit ``` App/Navigation/AppNavigation.tsx ``` this way : ```typescript jsx ... initialRouteName: "LoginScreen", ... ``` ### Generate Templated Screens Templated screens will provide container structures for some time saving based on common uses #### Bottom Tabbed Screen This template provides some components and screens with navigation for having a bottom tabbed container with 5 tabs in the first page of your app. you can change tabs names and contents after installation. You can use this template by choosing it on boilerplate installation. this is a preview of Bottom Tabbed Template :

You can generate a screen with this template using below command : ``` ignite g container YourScreenName ``` Then choosing `With Bottom Tabbed Navigation` from answers list this command will produce a screen file with tab files and will add this screen to AppNavigation file You can edit file names and contents of files inside YourScreenNameTabs folder, just be sure if you edited the file names you also edit the imports inside YourScreenName.tsx file. You can also edit navigation icon names inside YourScreenName.tsx #### Top Tabbed Screen This template provides some components and screens with navigation for having a top tabbed container with 3 tabs with list content in the first page of your app. you can change tabs names and contents after installation. You can use this template by choosing it on boilerplate installation. this is a preview of Top Tabbed Template :

You can generate a screen with this template using below command : ``` ignite g container YourScreenName ``` Then choosing `With Top Tabbed Navigation` from answers list this command will produce a screen file with tab files and will add this screen to AppNavigation file You can edit file names and contents of files inside YourScreenNameTabs folder, just be sure if you edited the file names you also edit the imports inside YourScreenName.tsx file. You can also edit navigation icon names inside YourScreenName.tsx #### Drawer Navigation Screen This template provides some components and screens with navigation for having a navigation drawer container with 5 pages. you can change tabs names and contents after installation. You can use this template by choosing it on boilerplate installation. this is a preview of Navigation Drawer Template :

You can generate a screen with this template using below command : ``` ignite g container YourScreenName ``` Then choosing `With Drawer Navigation` from answers list You can edit file names and contents of files inside YourScreenNameTabs folder, just be sure if you edited the file names you also edit the imports inside YourScreenName.tsx file. You can also edit navigation icon names inside YourScreenName.tsx this command will produce a screen file with tab files and will add this screen to AppNavigation file #### Simple Collapsible Toolbar Screen this template provides a simple screen with a collapsible toolbar as below gif

You can generate a screen with this template using below command : ``` ignite g container YourScreenName ``` Then choosing `Collapsible Toolbar` from answers list for customization or etc , i've used MaterialCollapsibleToolbarContainer in this screen so you can get more info from mentioned link #### Backdrop Screen this template provides a back screen as below gif and two sub-components in YourComponentNameContent folder one for backdrop one for content that you will see in the front screen I used Material Backdrop component for this

You can generate a screen with this template using below command : ``` ignite g container YourScreenName ``` Then choosing `Backdrop` from answers list #### Collapsible Screen With Drawer Navigation this template provides a navigation drawer screen with 5 tabs , four of them have collapsible toolbars as below gif

You can generate a screen with this template using below command : ``` ignite g container YourScreenName ``` Then choosing `Collapsible Toolbar With Drawer Navigation` from answers list You can edit file names and contents of files inside YourScreenNameTabs folder, just be sure if you edited the file names you also edit the imports inside YourScreenName.tsx file. You can also edit navigation icon names inside YourScreenName.tsx this command will produce a screen file with tab files and will add this screen to AppNavigation file for customization or etc , i've used MaterialCollapsibleToolbarContainer in this screen so you can get more info from mentioned link

App Templates

These templates can't be generated after installation these are about a half-complete app (maybe complete app in future) so you can use them as example or if your app is just like them you can use them for time saving and just apply a few changes for customization. ### Social Media Template This template provides some components and screens with navigation for starting a chat app project. it's also an example of how to start working with this boiler plate. Inside the template i used farid safi's Gifted Chat for chat screen. You can use this template by choosing it on boilerplate installation. this is a preview of Social Media Template :

Using App Settings Redux

### Switchable color scheme

actually below reducer And action playing important roles for settings like direction(rtl/ltr) or colorScheme and any settings like these : ``` App/Redux/AppSettingsRedux ``` ``` App/Redux/Actions/AppSettinsAction ``` for example for colorScheme we have colorScheme state in this reducer which contans below structure :

you can also view or change it's structure and values in below file : `App/Themes/Colors` this scheme have two states for now dark and light themes this is how we can change state of this scheme in a redux connected component :

you can see below file for more detail : `App/Containers/MainTabs/SettingsTab.tsx` then you can use it as :

you can see similiar usage in example files inside Container folder or another folders ... you can also test this in the settings tab ### Switchable locale

you can change/select locale in a redux connected component this way:

you can create you locales in `App/I18n/locales folder` like :

then in `App/I18n` folder I18n.ts file :

End usage:

Tips

### Persisted States (Redux-Persist)

for using redux-persist to persist your settings or any states you can go to this path `App/Config/ReduxPersist.tsx` then add your reducer name to this array : `whitelist: ["reducer Name",...],` then go to your reducer and add this code : `case REHYDRATE: return {...state,...action.payload.yourReducerName};` then changes on your reducer will be persisted ### How to navigate screens via redux Be sure about screen added to the AppNavigation.tsx Then Your App/Redux/NavigationRedux/NavigationRedux.tsx Should be look like this ```typescript jsx import AppNavigation from "../../Navigation/AppNavigation"; import { NavigationActions } from 'react-navigation'; //add export const reducer = (state, action) => { let newState; switch (action.type) { case 'YourScreen'://add newState = AppNavigation.router.getStateForAction(//add NavigationActions.navigate({//add routeName: 'YourScreen',//add params:{isDarkMode:action.payload}//add }),//add state//add );//add break;//add default : newState = AppNavigation.router.getStateForAction(action, state); break; } return newState || state; }; ``` Then in a redux connected component you can navigate like this ```typescript jsx { this.props.YourScreen(this.props.isDarkMode) }} /> . . . const mapStateToProps = state => ({ isDarkMode: state.appSettings.isDarkMode, nav: state.nav, colorScheme: state.appSettings.colorScheme }); const mapDispatchToProps = dispatch => ({ YourScreen: (darkMode) => { dispatch({ type: 'YourScreen' , payload : darkMode}); }, }); export default withNavigation(connect(mapStateToProps, mapDispatchToProps)(ReduxConnectedComponent)); ```

Material Ui Collection

Here you can see a Created by me and some hand picked collection of material components from various ui libraries. The goal is making ui development easy and seamless (Ui/ux itself with material design rules and Coding Experience) For now, components are in a limited number but i'm working on increasing their number to fulfill all ui/ux needed components ### Material Colors

I just converted www.materialui.co/colors colors to an object for easier use of these colors #### Usage : ```typescript jsx import {MaterialColors} from 'react-native-typescript-material-ui-collection'; MaterialColors.colorName.CcolorTone eg: MaterialColors.deepPurple.C400 //returns: #7E57C2 as string ``` ### Material Container

This component is a full width/height view for container view you can use it for more ui/ux code readability #### Usage : ```typescript jsx import {MaterialContainer} from 'react-native-typescript-material-ui-collection'; } />}> // this view will render at top of the view if you set isRoot true ``` #### Props ```typescript jsx isRoot: boolean // if you set this prop true , your component will have no padding and you can render a toolbar view at top of it the default padding is 16 toolbar:React.ReactNode // this view will render at top of the view if you set isRoot true ``` ### Material Collapsible Toolbar Container

This is a pure js material collapsible toolbar container #### Usage : The exact code of above gif ```typescript jsx import * as React from 'react' import {Component} from 'react'; import {Image, Text, View} from 'react-native' import {MaterialCollapsibleToolbarContainer} from 'react-native-typescript-material-ui-collection' export default class LaunchScreen extends Component { componentWillMount() { } renderContent = () => ( {new Array(40).fill().map((_, i) => ( {`Item ${i + 1}`} ))} ); renderCollapsedToolbarContent = () => ; render() { return ( console.log('onlefticonpress')} title="Title" // toolBarHeight={300} /> ); } } ``` #### Props : ```typescript jsx collapsedNavBarBackgroundColor?: string, imageSource?: string, onContentScroll?(): void, renderContent?(): React.ReactNode, renderCollapsedToolbarContent?():React.ReactNode, // this component will be rendered on the toolbar toolBarHeight?: number, translucentStatusBar?: boolean, textColor?: string, leftButtonIcon?: string, onLeftIconPress?(): void, rightButtonIcon?: string, onRightIconPress?(): void ``` ### Material Backdrop

I tried to create this component using material.io guidelines in this link #### Usage : ```typescript jsx import * as React from 'react' import {Component} from 'react'; import {connect} from 'react-redux' import {MaterialBackdrop} from "react-native-typescript-material-ui-collection"; import {Image, Text, View} from "react-native"; class ScreenName extends Component { constructor(props) { super(props); this.state = {isExpanded: false} } render() { return ( this.renderRevealComponent()} leftButtonIcon='menu' expandedTitle='Expanded' collapsedTitle='Collapsed' content={()=>this.renderContent('black')} textColor='white' subHeaderText='subheader' backdropBackgroundColor='purple' contentBackgroundColor='white' subheaderTextColor='#212121' /> ) } renderRevealComponent=()=> renderContent=(color)=> {new Array(40).fill().map((_, i) => ( {`Item ${i + 1}`} ))} } ``` #### Props : ```typescript jsx revealComponent?(): React.ReactNode, backdropBackgroundColor?: string, leftButtonIcon?: string, // an icon name from https://materialdesignicons.com (this component using react-native-vector icons inside) expandedTitle?: string, collapsedTitle?: string, content?(): React.ReactNode, textColor?: string, subHeaderText?: string, horizontalContent?: boolean, onSubheaderClick?(): void, onLeftButtonClick?(): void, onRightButtonClick?(): void, contentBackgroundColor?: string, subheaderTextColor?: string, onExpand?(): void, onCollapse?(): void, rightButtonIcon?: string // an icon name from https://materialdesignicons.com (this component using react-native-vector icons inside) // if you give it an icon name icon will be rendered top right of backdrop and you can use it as you want ``` ### Material Vertical Linear

this component is a view with default column direction it can be used for better readability of jsx ui code #### Usage : ```typescript jsx import {MaterialHorizontalLinear} from 'react-native-typescript-material-ui-collection'; ``` ### Material Horizontal Linear

this component is a view with default row direction it can be used for better readability of jsx ui code #### Usage : ```typescript jsx import {MaterialVerticalLinear} from 'react-native-typescript-material-ui-collection'; ``` ### Material Card

A card component created using material.io guidelines , Also CardContent Component is inside this is actually a view with 16dp padding #### Usage : Above gif's code (just important things) ```typescript jsx //import import {MaterialCard, MaterialCardContent} from 'react-native-typescript-material-ui-collection'; ``` ```typescript jsx //with image header }> material card material card ``` ```typescript jsx //setting elevation material card Elevation 3 ``` ```typescript jsx //minimal usage this is a material card this is a material card this is a material card ``` ```typescript jsx //with background image material card Elevation 7 ``` #### Props ```typescript jsx elevation?: number, margin?:number, header?(): React.ReactNode, style?:ViewStyle, backgroundImageSource?: ImageSourcePropType, backgroundColor?:string ``` #### Default Props ```typescript jsx elevation:2, margin:8, backgroundColor:'#eeeeee' ``` ### Material Toolbar

A toolbar designed based on material.io guidelines
And
MaterialToolbarContent you can use it for some content on your toolbar , you can also use your custom component
Can be used by [Material Container](#material-container) #### Usage Import : ```typescript jsx import {MaterialToolbar, MaterialToolbarContent} from 'react-native-typescript-material-ui-collection'; ``` Use: ```typescript jsx } /> ``` ```typescript jsx } /> ``` ```typescript jsx // Minimal ``` ```typescript jsx } /> ``` #### Props ```typescript jsx MaterialToolbarProps { color?: string, onLeftIconPress?():void, onRightIconPress?():void, content?():ReactNode iconsColor?:string, leftIcon?:string, // one of https://materialdesignicons.com/ icons rightIcon?:string // one of https://materialdesignicons.com/ icons } MaterialToolbarContentProps { color?: string, font?: string, text?: string, haveTypeMode?: boolean, typeModeIcon?:string, // one of https://materialdesignicons.com/ icons onChangeText?(text:string), onTypeModePress?(): void, } ``` #### Default Props ```typescript jsx //Material Toolbar Content color: '#212121', typeModeIcon:'magnify', onTypeModePress: () => { }, onChangeText:()=>{} //Material Toolbar color: '#eeeeee', onLeftIconPress:()=>{}, onRightIconPress:()=>{}, iconsColor:'#212121' ``` ### Material Bottom Tabbar

A material tab bar designed and created based on material.io instructions, tested and developed on react-navigation version 3.0.0 #### Usage ```typescript jsx import {createBottomTabNavigator,createAppContainer} from 'react-navigation'; import MaterialBottomTabbar from '../../Components/MaterialBottomTabbar'; // A bunch of other imports const commonNavigationOptions = ({navigation}) => ({ header: null, title: navigation.state.routeName, }); const ChatsRouteOptions = { screen: Tab1, navigationOptions: commonNavigationOptions, }; const SearchRouteOptions = { screen: Tab2, navigationOptions: commonNavigationOptions, }; const ChannelsRouteOptions = { screen: Tab3, navigationOptions: commonNavigationOptions, }; const LocationRouteOptions = { screen: Tab4, navigationOptions: commonNavigationOptions, }; const SettingsRouteOptions = { screen: Tab5, navigationOptions: commonNavigationOptions, }; // different routes for all, active and completed todos export default (props) => React.createElement( createAppContainer(createBottomTabNavigator( { [I18n.t('Tab1')]: ChatsRouteOptions, [I18n.t('Tab2')]: ChannelsRouteOptions, [I18n.t('Tab3')]: LocationRouteOptions, [I18n.t('Tab4')]: SearchRouteOptions, [I18n.t('Tab5')]: SettingsRouteOptions }, { tabBarComponent:MaterialBottomTabbar, // here you can set this component tabBarPosition: 'bottom', tabBarOptions:{ // here are main settings of this component animated:true, isRtl:props.isRtl, fontSize:12, noLabel:false, iconName:(key)=>iconChooser(key), fontFamily: Fonts.type.base, defaultColor:props.colorScheme.fullToneText, selectedColor:primaryColor, style: { backgroundColor: props.colorScheme.tabBarBackground }, }, initialRouteName: I18n.t('chats') }, )) ); function iconChooser(key) { let iconName; switch (key) { case I18n.t('chats'): iconName = 'message-text'; // icon names from https://materialdesignicons.com/ website break; case I18n.t('search'): iconName = 'magnify'; break; case I18n.t('channels'): iconName = 'bullhorn'; break; case I18n.t('location'): iconName = 'map-marker'; break; case I18n.t('settings'): iconName = 'menu' } return iconName; } ``` ### Material Text Input

this component is basically react-native-material-textfield i just added it's types to typescript and rtl support (for it's label) #### Usage : ```typescript jsx import {MaterialTextInput} from 'react-native-typescript-material-ui-collection'; ``` ### Material Progress

I used react-native-indicators code to do this with a few changes and turning the used code to typescript I have also used this component for progress inside below button components #### Usage: this is exactly the code of above gif ```typescript jsx import * as React from 'react' import {Component} from 'react'; import { View} from 'react-native' import styles from './Styles/LaunchScreenStyles' import {MaterialProgress} from 'react-native-typescript-material-ui-collection'; export default class LaunchScreen extends Component { render() { return ( ) } } ``` #### Props: ```typescript jsx color:string,//just the color small?:boolean// using this will render small progress i'ts good for using inside buttons or etc. ``` ### Material Buttons

I Made these three buttons exactly based on material.io design guidelines #### Usage: this is exactly the code of above gif ```typescript jsx import * as React from 'react' import {Component} from 'react'; import { View} from 'react-native' import styles from './Styles/LaunchScreenStyles' import {MaterialTextButton, MaterialOutlinedButton, MaterialContainedButton} from 'react-native-typescript-material-ui-collection'; export default class LaunchScreen extends Component { render() { return ( { console.log("pressed") }} text="Material Text Button" textColor="purple" margin={8} /> { console.log("pressed") }} text="Material Outlined Button" textColor="purple" margin={8} /> { console.log("pressed") }} color='purple' text="Material Contained Button" textColor="white" margin={8} /> { console.log("pressed") }} text="Material Text Button" textColor="purple" margin={8} iconName="check-circle" /> { console.log("pressed") }} text="Material Outlined Button" textColor="purple" margin={8} iconName="check-circle" /> { console.log("pressed") }} color='purple' text="Material Contained Button" textColor="white" margin={8} iconName="check-circle" /> ) } } ``` #### Props: ##### MaterialTextButton: ```typescript jsx text: string, icon?: React.ReactNode, // you can use your custom icon component , whatever, the button have react-native-vector-icons inside margin?:number, textColor?: string, textFont?: string, iconName?:string, // if you set the material icon name from https://materialdesignicons.com/ the icon will displayed onPress?():void, progress:boolean // if you set this true the button will render a circular progressbar inside like above gifs ``` ##### MaterialOutlinedButton: ```typescript jsx text: string, icon?: React.ReactNode, // you can use your custom icon component , whatever, the button have react-native-vector-icons inside margin?:number, textColor?: string, textFont?: string, onPress?():void, iconName?:string, // if you set the material icon name from https://materialdesignicons.com/ the icon will displayed progress:boolean // if you set this true the button will render a circular progressbar inside like above gifs ``` ##### MaterialContainedButton: ```typescript jsx text: string, icon?: React.ReactNode, // you can use your custom icon component , whatever, the button have react-native-vector-icons inside margin?:number, color?:string, textColor?: string, textFont?: string, onPress?():void, iconName?:string,// if you set the material icon name from https://materialdesignicons.com/ the icon will displayed progress:boolean // if you set this true the button will render a circular progressbar inside like above gifs ``` ### Material FAB

I Made these two FABs exactly based on material.io design guidelines #### Usage : this is exactly the code of above gif ```typescript jsx import * as React from 'react' import {Component} from 'react'; import { View} from 'react-native' import styles from './Styles/LaunchScreenStyles' import {MaterialFab, MaterialExtendedFab} from 'react-native-typescript-material-ui-collection'; export default class LaunchScreen extends Component { render() { return ( {console.log('onpress')}} position="bottomLeft" iconColor="white" iconName='check-circle' color="purple" /> {console.log('onpress')}} position="bottomRight" iconColor="white" iconName='check-circle' color="purple" /> {console.log('onpress')}} text="Extended" position="bottom" iconColor="white" iconName='check-circle' color="purple" /> ) } } ``` #### Props: ##### MaterialFab: ```typescript jsx icon?: React.ReactNode, // you can use your custom icon component , whatever, the button have react-native-vector-icons inside color?:string, iconColor?: string, onPress?():void, iconName:string,// if you set the material icon name from https://materialdesignicons.com/ the icon will displayed mini?:boolean, position:string,// one of {'bottomLeft','topRight','topLeft','bottomRight'} progress:boolean // if you set this true the button will render a circular progressbar inside like above gifs ``` ##### MaterialExtendedFab: ```typescript jsx icon?: React.ReactNode, // you can use your custom icon component , whatever, the button have react-native-vector-icons inside color?:string, iconColor?: string, onPress?():void, iconName:string,// if you set the material icon name from https://materialdesignicons.com/ the icon will displayed textFont?:string, text:string, position:string,// one of {'top','bottom'} progress:boolean // if you set this true the button will render a circular progressbar inside like above gifs ``` ### Material Checkbox

I Made this checkbox component exactly based on material.io design guidelines #### Usage : this is exactly the code of above gif ```typescript jsx import * as React from 'react' import {Component} from 'react'; import {View} from 'react-native' import styles from './Styles/LaunchScreenStyles' import {MaterialCheckbox} from "react-native-typescript-material-ui-collection"; export default class LaunchScreen extends Component { render() { return ( { console.log(isChecked) }} /> { console.log(isChecked) }} /> { console.log(isChecked) }} /> { console.log(isChecked) }} progress /> ) } } ``` #### Props: ```typescript jsx text?: string, isChecked?: boolean, textFont?: string, onCheckedChange?(isChecked: boolean): void, checkBoxColor?: string, textColor?: string, rtl?: boolean, progress?: boolean ``` ### Material Switch

I Made this switch component exactly based on material.io design guidelines #### Usage this is exactly the code of above gif ```typescript jsx import * as React from 'react' import { View } from 'react-native' import MaterialSwitch from "react-native-typescript-material-ui-collection"; // Styles import styles from './Styles/LaunchScreenStyles' interface LaunchScreenComponentProps {} export default class LaunchScreen extends React.Component { render () { return ( ) } } ``` #### Props: ```typescript jsx textFont?:string, textColor?:string, text?:string, color?:string onValueChanged?(value:boolean):void ``` ### Material Radio Group

I Made this radio group component exactly based on material.io design guidelines #### Usage this is exactly the code of above gif ```typescript jsx import * as React from 'react' import { View } from 'react-native' import MaterialSwitch from "react-native-typescript-material-ui-collection"; // Styles import styles from './Styles/LaunchScreenStyles' interface LaunchScreenComponentProps {} export default class LaunchScreen extends React.Component { render () { return ( ) } } ``` #### Props: ```typescript jsx data: any, // just be sure you have text:string field in datarows color: string, textFont?: string, textColor?: string, isRtl?:boolean, onItemPress?(item, index): void ``` ## Ignite Mapbox An ignite plugin for adding mapbox easier

You can install mapbox and link it by this command ``` ignite add map ``` and generate a map component with ``` ignite generate map MapName ``` then use it as below and you can get your token key with instructions inside mapbox github https://github.com/mapbox/react-native-mapbox-gl then you can use token key inside `App>Config>MapboxConfig.tsx` ### Usage : ```typescript jsx import MapboxGL from '@mapbox/react-native-mapbox-gl'; import MapboxConfig from "../../Config/MapboxConfig"; MapboxGL.setAccessToken(MapboxConfig.accessToken); // here you set access token ... ``` ## :closed_lock_with_key: Secrets This project uses [react-native-config](https://github.com/luggit/react-native-config) to expose config variables to your javascript code in React Native. You can store API keys and other sensitive information in a `.env` file: ``` API_URL=https://myapi.com GOOGLE_MAPS_API_KEY=abcdefgh ``` and access them from React Native like so: ``` import Secrets from 'react-native-config' Secrets.API_URL // 'https://myapi.com' Secrets.GOOGLE_MAPS_API_KEY // 'abcdefgh' ``` The `.env` file is ignored by git keeping those secrets out of your repo. ### Get started: 1. Copy .env.example to .env 2. Add your config variables 3. Follow instructions at [https://github.com/luggit/react-native-config#setup](https://github.com/luggit/react-native-config#setup) 4. Done!