react-native-template-pro
A React Native template with a nice folder structure, navigation, database, async and debugging tools support.
📑 Requirements
- React Native properly installed (building projects with native code)
- Reactotron properly installed
- Knowledge on Redux and Redux-Saga
- Knowledge on Realm database
▶️ Installation
react-native init MyMillionDollarApp --template pro
cd MyMillionDollarApp
react-native run-ios
or react-native run-android
📦 What's included
- Folder structure
- Reactotron: debugging
- Redux: state management
- Redux Saga: async calls
- React Navigation: routing and navigation
- Realm: mobile database
- Prop Types: typing for component props
- React Native Vector Icons: huge set of customizable icons
- React Native Linear Gradient: gradient styles
- Formik & Yup: easy form handling
💻 Jetbrains Webstorm snippets
- comp (stateful component)
;;; { return <View> <Text>$ComponentName$</Text> $END$ </View> ; } $ComponentName$propTypes = {};const styles = StyleSheet;
- rcomp (stateful redux component)
;;;;;; { return <View> <Text>$ComponentName$</Text> $END$ </View> ; } $ComponentName$propTypes = //TODO: data error: PropTypesshape $storeProp$: PropTypesbool loading: PropTypesshape $storeProp$: PropTypesbool ; const styles = StyleSheet; const mapStateToProps = data: $storeProp$: state$storeProp$data error: $storeProp$: state$storeProp$error loading: $storeProp$: state$storeProp$loading ; const mapDispatchToProps = { return actions: $storeProp$: ;}; mapStateToProps mapDispatchToProps$ComponentName$;
- scomp (stateless component)
;;; const $ComponentName$ = <View> <Text>$ComponentName$</Text> $END$ </View>; $ComponentName$propTypes = {}; $ComponentName$;
- con (console.display)
consoledisplay'$var$' $var$;
- tron (console.tron)
console;
📌 Roadmap
- Integrate mobile database
- Fully integrate react-navigation to redux
- [∞] Add more reusable components
⚠️ Known issues
- Unknown named module: 'NativeModules' - RN 0.56
✏️ Contributing
This is an initial release, feel free to submit your issues or PR's!