DEV Community

loading...

A good template for expo user , base on Ignite

timeturnback
・2 min read

A well done boiletplate for expo

https://github.com/timeturnback/react-native-rc-expo-boiletplate


App

Application structure . All FE running code will be here . I use index.js to represent the App.js in the expo init.

  • Assets

Put your font and image here

  • Components

For global component

  • Config

App config

  • i18n

For internation ( translate ) text

  • Navigation

Navigation setting and route name and style

  • ReduxSaga

ReduxSaga folder . I place it together for the easy find and work.

  • Themes
    All the global themes should be put here .

  • Utilities
    All the support code , like unit convert and other data function .

  • index.js

Replacement for App.js by default


.vscode/settings.json babel.config.js jsconfig.json

Setting for using @app static directory


Package

Package Purpose
@react-native-community/async-storage For using async-storage , require for redux persist
expo-app-loading Apploading
expo-status-bar Status bas
i18n-js For international
moment Time formating
react-native-modal Modal use in app
react-native-size-matters Size matter for consistent UI android and ios
OPTIONAL
react-native-keyboard-aware-scroll-view For scrollview not date time picker ( optional )
react-native-picker-select Picker select date time picker ( optional )
react-native-root-toast For showing toast ( optional )
@react-native-community/datetimepicker date time picker ( optional )
NAVIGATION
react-navigation For navigation
react-navigation-stack For navigation
react-native-gesture-handler For navigation
react-native-reanimated For navigation
@react-native-community/masked-view For navigation
react-native-screens For navigation
REDUX
react-redux React Redux
redux Redux
redux-persist Redux persist ( for saving state when app go background or killed)
redux-saga Redux saga
reduxsauce Redux sauce
seamless-immutable For redux state manage

Dev package

Package Purpose
@babel /core
@babel /runtime
@react-native-community/eslint-config
metro-react-native-babel-preset
ESLINT
babel-eslint
babel-plugin-ignite-ignore-reactotron
eslint
eslint-config-standard
eslint-config-standard-react
eslint-plugin-import
eslint-plugin-node
eslint-plugin-promise
eslint-plugin-react
eslint-plugin-react-native
eslint-plugin-standard
JEST
jest
react-test-renderer
REACTOTRON
reactotron-react-native
reactotron-redux
reactotron-redux-saga

Discussion (0)