Our example of simple application using ReactNative and some recommendations
# React Native Template Project
During our time developing mobile apps we have gathered some experience and preferences in architecture and libraries. We decided to gather it all in one project to share it with all community. So we created this template. We found out and combined the patterns and libraries to make a robust app that works properly on both platforms: Android and iOS.
The template project interacts with Github API and covers major user flows:
1) Login flow. Simple example of fields validation, storing token and so on. 2) Several tabs with list of items. One in two apps definitely has list of some items or several tabs with lists. 3) Item details Screen. Example of simple screen with some data. 4) Logout. To clear state, navigate to certain screen, etc.
If you have not yet installed React Native, you can use this tutorial.
Use
git cloneto get project. Then go to the root folder of project and install all node modules using
npm installcommand.
react-native run-androidcommand.
react-native run-ioscommand.
Navigator: https://reactnavigation.org/
Strings localization: https://github.com/stefalda/ReactNativeLocalization
Networking: rx-fetch + rxjs
Maps: https://github.com/airbnb/react-native-maps
Permissions: https://github.com/yonahforst/react-native-permissions
Image picker: https://github.com/ivpusic/react-native-image-crop-picker
OpenGL: https://github.com/ProjectSeptemberInc/gl-react-native
Fabric: https://www.npmjs.com/package/react-native-fabric
Icons: https://oblador.github.io/react-native-vector-icons/
UI components: https://nativebase.io/
Dialogs: https://www.npmjs.com/package/react-native-popup-dialog
Architecture: Redux + saga https://github.com/redux-saga/redux-saga
Code style: https://github.com/airbnb/javascript
Versioning: packadge.json - we freeze versions of the libraries during project development, unless we really need the feature or bugfix from newer version
Use formatting tabulation of 2. Needs to be changed in WebStorm settings
Add all component props to propTypes. It adds safety, shows you what props available, and allows IDEA/WebStorm to autocomplete them. https://facebook.github.io/react/docs/typechecking-with-proptypes.html
Use
redux-immutableto create immutable store. Redux FAQ: Immutable Data
import { combineReducers } from 'redux-immutable'; import loginReducer from "../reducers/loginReducer"; import rootReducer from "../reducers/rootReducer"; import listReducer from "../reducers/listReduser";const combinedReducers = combineReducers({ root: rootReducer, login: loginReducer, list: listReducer, });
redux-persistcan't work with immutable state. So, we have to use
redux-persist-immutable.
js import { autoRehydrate, persistStore } from 'redux-persist-immutable' import { applyMiddleware, compose, createStore } from "redux"; const sagaMiddleware = createSagaMiddleware(); const store = createStore( combinedReducers, initialState, compose(applyMiddleware(sagaMiddleware), autoRehydrate({log: true}))); persistStore( store, { storage: AsyncStorage, blacklist: ['root'], } );
Antipatterns:
toJS()with immutable to avoid creation unnecessary object.
Project structure: