ignite-boilerplate-andross-typescript

v0.1.97

Published

3 years ago

Customized version of ignite Andross With TypeScript Support.

Downloads

0High
0Medium
0Low

lvlrsajjad

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 :

:file_folder: 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 :

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 :

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<RootContainerProps> {
  constructor(props){
    super(props);
  }
  componentDidMount() {
    if (!ReduxPersist.active) {
      this.props.startup();
    }
  }

  render() {
    return (
      <View style={styles.applicationView}>
        <StatusBar barStyle="light-content" />
        <ReduxNavigation />
      </View>
    );
  }
}

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

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:

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

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 :

import Pizza from './path/to/Pizza'

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 :

import Pizza from './path/to/Pizza'

The generated index.tsx will be like below:

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 :