ignite boilerplate andross typescript

![js-standard-style](http://standardjs.com/)

* About
* Folder Structure
* Ignite Cli
* Usage
* Component Generation
* Generate Rtl Support Component
* Generate Normal Component
* Screen Generation
* Generate a Simple Screen
* Generate Login Screens
* Normal Login Screen
* Sms Login Screen
* Generate Templated Screens
* Bottom Tabbed Screen
* Top Tabbed Screen
* Drawer Navigation Screen
* Simple Collapsible Toolbar Screen
* Backdrop Screen
* Collapsible Screen With Drawer Navigation
* App Templates
* Social Media Template
* Using App Settings Redux
* Switchable color scheme
* Switchable locale
* Tips
* Persisted States
* How to navigate screens via redux
* Material Ui Collection
* Material Colors
* Material Container
* Material Collapsible Toolbar Container
* Material Backdrop
* Material Vertical Linear
* Material Horizontal Linear
* Material Card
* Material Toolbar
* Material Bottom Tabbar
* Material Text Input
* Material Progress
* Material Buttons
* Material FAB
* Material Checkbox
* Material Switch
* Material Radio Group
* Ignite Mapbox

About

This Boiler Plate is just my Customized version of ignite Andross

Changes :
* Installed and configured with typeScript
* Moved all js related folders to js folder (App,Tests)
* Using jest for tests
* Updated react native to (0.57.5)
* Updated react navigation to (3.0.0)
* Added better rtl support
* Added switchable colorScheme support
* Add better multi language support and add language to app settings redux
* Using realm in redux-persist for storing data instead asyncStorage
* Using pure Container Component design pattern in all of templates and even default template
* Added selectable templates on boilerplate installation and generating screens with those templates after installation
* WIP // Internal set of material components
* HighLighted dependencies that installed :

You can see more on package .json
* Recommended Dependencies :

$3

It's actually similar to andross folder structure

this folder structure based on container/component design pattern

So the Components won't have much work with data and getting/setting data is trough containers

Actually containers are in .ts format so they won't and must not render jsx they only do the job with redux and data stuff and passing them to the related component

A container code looks like :

``typescript jsx import { connect } from "react-redux"; import {RootContainerComponent} from '../Components/RootContainer' import StartupActions from "../Redux/StartupRedux";

// wraps dispatch to create nicer functions to call within our component const mapDispatchToProps = dispatch => ({ startup: () => dispatch(StartupActions.startup()) });

export default connect(null, mapDispatchToProps)(RootContainerComponent);

A component code looks like :

`typescript jsx import * as React from 'react' import { Component } from 'react'; import { View, StatusBar } from "react-native"; import ReduxNavigation from "../../Navigation/ReduxNavigation"; import ReduxPersist from "../../Config/ReduxPersist";

// Styles import styles from "./Styles/RootContainerStyles";

interface RootContainerProps { startup(): void, }

export default class RootContainer extends Component { constructor(props){ super(props); } componentDidMount() { if (!ReduxPersist.active) { this.props.startup(); } }

render() { return ( ); } }

`Ignite Cli`


  
  First you must install ignite cli as gobal with this command


npm install -g ignite-cli


  For More Cli Instructions Please refer to below sections and ignite boilerplate page :
  https://github.com/infinitered/ignite
Usage

You can create your app using this boilerplate with this commands`ignite new YourAppName -b ignite-boilerplate-andross-typescript`During the installation, You can choose your login screen style or no login screen:

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 choose your main screen style or just a simple screen:

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


You can work with combination of this options for example if you choose sms login and social media after installation your app will be like this:

after installation run below commands:`cd YourAppName react-native run-ios or react-native run-android`

`Component Generation`

`$3`

If you want to your app support ltr/rtl layouts separately you can just use this command inside the app folder (just replace pizza with your app name):`ignite g component pizza --rtlsupport`it will produce this file/folders inside your Components folder :

Just use it as :`typescript jsx import Pizza from './path/to/Pizza'`The generated index.tsx will be like below:

`$3`

If you don't want Rtl/Ltr Switchable component us just create the component with this command:`ignite g component pizza`it will produce this file/folders inside your Components folder :

Just use it as :`typescript jsx import Pizza from './path/to/Pizza'`The generated index.tsx will be like below:


    
Screen Generation

 
$3

You can generate normal screens in containers folder then add them to the navigation by this command


    ignite g container ScreenName


   Then choosing

Simple

 from answers list
$3
You can also generate a material designed Login screen with some related components and reduxs by this command:
#### Normal Login Screen


    ignite g container LoginScreen


   Then choosing

Simple Login

 from answers list
   Or
   Choosing Simple login screen at project initialization
   
#### Sms Login Screen


      ignite g container SmsLoginScreen

 
   Then choosing

Sms Login

 from answers list
   Or
   Choosing Sms login screen at project initialization

then just add`typescript jsx login: require('./Login/LoginRedux').reducer

`in the end of`typescript jsx reducers: Reducer = 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", ...`

`$3`

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 choosingWith Bottom Tabbed Navigationfrom 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 choosingWith Top Tabbed Navigation from answers list

this command will produce a screen file with tab files and will add this screen to AppNavigation file

#### 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 choosingWith Drawer Navigation from answers list

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 choosingCollapsible 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 choosingBackdrop 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 choosingCollapsible Toolbar With Drawer Navigation from answers list

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.

`$3`


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
$3


   


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
$3


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
$3


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

`$3`

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 onPress={()=>{ 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
$3

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`

`$3`


   
 
 
 

 
  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';
                  isRoot // 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={() =>                               leftIcon='menu'
                              iconsColor='white'
                              color='purple'
                              content={() => }
                          />}> // this view will render at top of the view if you set isRoot true
                         // for using inside a root have 16 dp padding inside
            >

        
#### 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`

`$3`


 
 
 

 
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) => ( key={i} style={{ backgroundColor: '#F5F5F5', padding: 10, borderBottomWidth: 1, borderBottomColor: '#E5E5E5' }} > {Item ${i + 1}} ))} );

renderCollapsedToolbarContent = () => source={{uri: 'https://facebook.github.io/react-native/img/header_logo.png'}}

style={{ width: 50, height: 50, borderRadius: 25, overflow: 'hidden' }}/>;

render() { return ( renderContent={this.renderContent} imageSource='https://lorempixel.com/400/300/' collapsedNavBarBackgroundColor='#009688' translucentStatusBar showsVerticalScrollIndicator={false} textColor='white' renderCollapsedToolbarContent={this.renderCollapsedToolbarContent} leftButtonIcon='menu' onLeftIconPress={() => 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`

`$3`


 
 
 
 
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 ( revealComponent={()=>this.renderRevealComponent()} leftButtonIcon='menu' expandedTitle='Expanded' collapsedTitle='Collapsed' content={()=>this.renderContent('black')} textColor='white' subHeaderText='subheader' backdropBackgroundColor='purple' contentBackgroundColor='white' subheaderTextColor='#212121' /> ) } renderRevealComponent=()=> style={{margin: 34, alignSelf: 'center', width: 84, height: 84, borderRadius: 42}} source={{uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwu7s_Ic3YioDVl9AmoJGsKbBuCKFVp2cD3KCPzdYlBLOcGmeV'}} /> renderContent=(color)=> {new Array(40).fill().map((_, i) => ( key={i} style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: '#00000011' }} > {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`

`$3`


 
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'`

`$3`


 
 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
 
 #### Usage
 
 Import :

typescript jsx
import {MaterialToolbar, MaterialToolbarContent} from 'react-native-typescript-material-ui-collection';


Use:

`typescript jsx leftIcon='menu' content={()=>} />`

`typescript jsx leftIcon='menu' iconsColor='white' color='purple' content={()=>} />``typescript jsx // Minimal leftIcon='menu' />`

`typescript jsx leftIcon='menu' content={()=>} />`#### 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'`

`$3`

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, });

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;

}

`$3`


 
 

 

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'; isRtl={true} //just added this prop you can see other props from above link />`

`$3`



 
 

 
 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 (
      
                  color="purple"
        />
                  color="purple"
          small
        />
      
    )
  }
}

`#### 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.`

`$3`


 
 
  
 

  
  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 ( onPress={() => { console.log("pressed") }} text="Material Text Button" textColor="purple" margin={8} /> onPress={() => { console.log("pressed") }} text="Material Outlined Button" textColor="purple" margin={8} /> onPress={() => { console.log("pressed") }} color='purple' text="Material Contained Button" textColor="white" margin={8} /> onPress={() => { console.log("pressed") }} text="Material Text Button" textColor="purple" margin={8} iconName="check-circle" /> onPress={() => { console.log("pressed") }} text="Material Outlined Button" textColor="purple" margin={8} iconName="check-circle" /> onPress={() => { 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

`$3`


   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 ( mini onPress={()=>{console.log('onpress')}} position="bottomLeft" iconColor="white" iconName='check-circle' color="purple" /> onPress={()=>{console.log('onpress')}} position="bottomRight" iconColor="white" iconName='check-circle' color="purple" /> onPress={()=>{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

`$3`

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 ( checkBoxColor="purple" text="Material Checkbox" onCheckedChange={(isChecked) => { console.log(isChecked) }} /> rtl checkBoxColor="purple" text="Material Checkbox" onCheckedChange={(isChecked) => { console.log(isChecked) }} /> checkBoxColor="purple" onCheckedChange={(isChecked) => { console.log(isChecked) }} /> checkBoxColor="purple" text="Material Checkbox" onCheckedChange={(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

`$3`

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

`$3`

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 insideApp>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 ... styleURL={ColorScheme.mapStyleUrl} zoomLevel={15} centerCoordinate={[51.3890,35.6892]} style={{flex:1}} >`

`:closed_lock_with_key: Secrets`

This project uses 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.

$3

1. Copy .env.example to .env
2. Add your config variables
3. Follow instructions at https://github.com/luggit/react-native-config#setup
4. Done!

ignite boilerplate andross typescript

![js-standard-style](http://standardjs.com/)

About

This Boiler Plate is just my Customized version of ignite Andross

You can see more on package .json
* Recommended Dependencies :

$3

It's actually similar to andross folder structure

this folder structure based on container/component design pattern

So the Components won't have much work with data and getting/setting data is trough containers

Actually containers are in .ts format so they won't and must not render jsx they only do the job with redux and data stuff and passing them to the related component

A container code looks like :

``typescript jsx import { connect } from "react-redux"; import {RootContainerComponent} from '../Components/RootContainer' import StartupActions from "../Redux/StartupRedux";

// wraps dispatch to create nicer functions to call within our component const mapDispatchToProps = dispatch => ({ startup: () => dispatch(StartupActions.startup()) });

export default connect(null, mapDispatchToProps)(RootContainerComponent);

A component code looks like :

// Styles import styles from "./Styles/RootContainerStyles";

interface RootContainerProps { startup(): void, }

export default class RootContainer extends Component { constructor(props){ super(props); } componentDidMount() { if (!ReduxPersist.active) { this.props.startup(); } }

render() { return ( ); } }

`Ignite Cli`


  
  First you must install ignite cli as gobal with this command


npm install -g ignite-cli


  For More Cli Instructions Please refer to below sections and ignite boilerplate page :
  https://github.com/infinitered/ignite
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 choose your main screen style or just a simple screen:

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


You can work with combination of this options for example if you choose sms login and social media after installation your app will be like this:

after installation run below commands:`cd YourAppName react-native run-ios or react-native run-android`

`Component Generation`

`$3`

Just use it as :`typescript jsx import Pizza from './path/to/Pizza'`The generated index.tsx will be like below:

`$3`

If you don't want Rtl/Ltr Switchable component us just create the component with this command:`ignite g component pizza`it will produce this file/folders inside your Components folder :

Just use it as :`typescript jsx import Pizza from './path/to/Pizza'`The generated index.tsx will be like below:


    
Screen Generation

 
$3

You can generate normal screens in containers folder then add them to the navigation by this command


    ignite g container ScreenName


   Then choosing

Simple

 from answers list
$3
You can also generate a material designed Login screen with some related components and reduxs by this command:
#### Normal Login Screen


    ignite g container LoginScreen


   Then choosing

Simple Login

 from answers list
   Or
   Choosing Simple login screen at project initialization
   
#### Sms Login Screen


      ignite g container SmsLoginScreen

 
   Then choosing

Sms Login

 from answers list
   Or
   Choosing Sms login screen at project initialization