Our example of simple application using ReactNative and some recommendations
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:
If you have not yet installed React Native, you can use this tutorial.
Use git clone
to get project. Then go to the root folder of project and install all node modules using npm install
command.
react-native run-android
command.react-native run-ios
command.Navigator: https://reactnavigation.org/
Strings localization: https://github.com/stefalda/ReactNativeLocalization
Networking: rx-fetch + rxjs
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
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-immutable
to 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-persist
can't work with immutable state. So, we have to use redux-persist-immutable
.
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: