react-native-template-takeoff

React Native Expo Boilerplate

This is a boilerplate to develop a mobile app with React Native and Expo(v32) using TypeScript and Redux (Redux Saga).

Things already configured:

• Expo CLI
• Native Base
• Redux
• Redux Saga
• TSLint
• Prettier
• Jest
• Styled Components
• Globalize Internalization

How to configure this project

• npm install -g expo-cli
• Install all packages Npm or Yarn inside folder:
  • npm install or yarn install
• expo start

Excecute with template expo

• expo init NameProject --template react-native-template-takeoff

Folder structure

• src
  • components [common or shared components]
  • screens
    • nameScreen
      • index [use index by routing]
  • states
    • nameState
      • name-actions
      • name-reducer
      • name-saga
• assets
• typings

Routing example

import { createStackNavigator } from 'react-navigation';
import Home from './Home';

const AppNavigator = createStackNavigator({
  Home: { screen: Home },
});

export default AppNavigator;

States

Use this folder to save state redux

• Reducer

  import { reducerWithInitialState } from 'typescript-fsa-reducers';
    import { sampleActions } from './sample-actions';
  
    export interface SampleState {
      text: string;
    }
  
    export const initialState: SampleState = {
      text: 'initial value'
    };
  
    export const sampleReducer = reducerWithInitialState(initialState)
      .case(sampleActions.fetchSamplesAsync.done, (state, payload) => {
        return Object.assign({}, state, {
          text: payload.result.text
        });
      })
      .case(sampleActions.fetchSamplesSync, (state, payload) => {
        return Object.assign({}, state, {
          text: 'new value generated by synchronized action'
        });
      });
  

• Actions

  import actionCreatorFactory from 'typescript-fsa';
  
  const actionCreator = actionCreatorFactory('SAMPLE');
  
  export const sampleActions = {
    fetchSamplesAsync: actionCreator.async<{}, { text: string }>('FETCH_SAMPLES_ASYNC'),
    fetchSamplesSync: actionCreator<{}>('FETCH_SAMPLES_SYNC')
  };
  

• Saga

  import { SagaIterator } from 'redux-saga';
  import { takeLatest } from 'redux-saga/effects';
  import { Action } from 'typescript-fsa';
  import { bindAsyncAction } from 'typescript-fsa-redux-saga-extended';
  import { sampleActions } from './sample-actions';
  
  const sampleFetchSamplesAsyncWorker = bindAsyncAction(sampleActions.fetchSamplesAsync)(function*(
    _: Action<{}>
  ): SagaIterator {
    // const response = yield call(asyncFunction, someInputs);
    return { text: 'new value generated by asynchronized action' };
  });
  
  export function* sampleSagaWorkers() {
    yield takeLatest(sampleActions.fetchSamplesAsync.started, sampleFetchSamplesAsyncWorker);
  }
  

Typings

Use this folder to save types definitions

Recommended plugins and extensions to development

• Visual Studio Code
• React Native Full Pack
• EditorConfig
• Prettier