ignite boilerplate andross typescript
Table of contents
- About
- Ignite Cli
- Usage
- Component Generation
- Screen Generation
- App Templates
- Using App Settings Redux
- Tips
- 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 :
📁 Folder Structure
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 :
;; // wraps dispatch to create nicer functions to call within our component; ;
A component code looks like :
;;;; // Styles;
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
Generate Rtl Support Component
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 :
The generated index.tsx will be like below:
Generate Normal Component
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 :
The generated index.tsx will be like below:
Screen Generation
Generate a Simple Screen
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
Generate Login Screens
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
login: require'./Login/LoginRedux'.reducer
in the end of
reducers: Reducer<ApplicationState> = combineReducers
array in
App/Redux/index.tsx
If you want set the login screen as launch screen edit
App/Navigation/AppNavigation.tsx
this way :
...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
;; //add ;
Then in a redux connected component you can navigate like this
SomeButton onPress= /...; ; ;
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 componentsMaterial Colors
I just converted www.materialui.co/colors colors to an object for easier use of these colors
Usage :
; 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 :
; MaterialContainer 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= // this view will render at top of the view if you set isRoot true MaterialContainer // for using inside a root have 16 dp padding inside /MaterialContainer /MaterialContainer
Props
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
;
Props :
collapsedNavBarBackgroundColor?: string, imageSource?: string, onContentScroll?
Material Backdrop
I tried to create this component using material.io guidelines in this link
Usage :
; ; ; source=} /> /View renderContent=View
Props :
revealComponent?
Material Vertical Linear
this component is a view with default column direction it can be used for better readability of jsx ui code
Usage :
; MaterialHorizontalLinear /MaterialHorizontalLinear
### Material Horizontal Linear
this component is a view with default row direction it can be used for better readability of jsx ui code
#### Usage :
; MaterialVerticalLinear /MaterialVerticalLinear
### 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)
//import ;
//with image header MaterialCard style= header= MaterialCardContent Text material card</Text> Text material card</Text> /MaterialCardContent /MaterialCard
//setting elevation MaterialCard style= elevation= MaterialCardContent Text material card</Text> Text Elevation 3</Text> /MaterialCardContent /MaterialCard
//minimal usage MaterialCardContent Textthis is a material card</Text> Textthis is a material card</Text> Textthis is a material card</Text> /MaterialCardContent
//with background image MaterialCard style= backgroundImageSource= MaterialCardContent Text style= material card</Text> Text style= Elevation 7</Text> /MaterialCardContent /MaterialCard
Props
elevation?: number, margin?:number, header?
Default Props
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
#### Usage
Import :
;
Use:
MaterialToolbar leftIcon='menu' content= /
MaterialToolbar leftIcon='menu' iconsColor='white' color='purple' content=/
// MinimalMaterialToolbar leftIcon='menu'/
MaterialToolbar leftIcon='menu' content=/
Props
MaterialToolbarProps
Default Props
//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
;;// A bunch of other imports ; ;;; ;;// different routes for all, active and completed todos;
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 :
; MaterialTextInput isRtl= //just added this prop you can see other props from above link /
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
;;
Props:
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
;;
Props:
MaterialTextButton:
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?
MaterialOutlinedButton:
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?
MaterialContainedButton:
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?
Material FAB
I Made these two FABs exactly based on material.io design guidelines
Usage :
this is exactly the code of above gif
; ;
Props:
MaterialFab:
icon?: React.ReactNode, // you can use your custom icon component , whatever, the button have react-native-vector-icons inside color?:string, iconColor?: string, onPress?
MaterialExtendedFab:
icon?: React.ReactNode, // you can use your custom icon component , whatever, the button have react-native-vector-icons inside color?:string, iconColor?: string, onPress?
Material Checkbox
I Made this checkbox component exactly based on material.io design guidelines
Usage :
this is exactly the code of above gif
;;
Props:
text?: string, isChecked?: boolean, textFont?: string, onCheckedChange?
Material Switch
I Made this switch component exactly based on material.io design guidelines
Usage
this is exactly the code of above gif
; // Styles
Props:
textFont?:string, textColor?:string, text?:string, color?:string onValueChanged?
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
; // Styles
Props:
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 :
;;MapboxGL.setAccessTokenMapboxConfig.accessToken; // here you set access token...MapboxGL.MapView styleURL= zoomLevel= centerCoordinate= style= /MapboxGL.MapView
🔐 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.
Get started:
- Copy .env.example to .env
- Add your config variables
- Follow instructions at https://github.com/luggit/react-native-config#setup
- Done!