React Native
General
- Starter: https://github.com/facebook/react-native
- Summary: http://www.reactnativeexpress.com/
- Best practices: https://jssolutionsdev.com/blog/react-native-limitations-and-best-practices-to-deal-with-them/
Project Structure and Components
- Project folders: https://medium.com/the-react-native-log/organizing-a-react-native-project-9514dfadaa0
- Container pattern: https://medium.com/@learnreact/container-components-c0e67432e005
- Library of components https://github.com/jondot/awesome-react-native
- Comments http://en.blog.koba04.com/2015/06/28/esdoc-documentation-for-react-and-es6/
Styling
Used libraries
- Alphabet List https://github.com/sunnylqm/react-native-alphabetlistview (PAIN IN THE ASS!! until Sep 8 - 2017)
- NPM Package from Yellow: https://www.npmjs.com/package/react-native-alphabetlistview-yellow
- PDFs https://github.com/wonday/react-native-pdf
- Maps https://github.com/airbnb/react-native-maps
- API Rest Client https://www.npmjs.com/package/react-native-rest-client
For beginners
- Sharable Components for both platforms https://differential.com/insights/sharing-code-between-android-and-ios-in-react-native/
- Container Components https://css-tricks.com/learning-react-container-components/
- Some best practices https://jssolutionsdev.com/blog/react-native-limitations-and-best-practices-to-deal-with-them
- Blueprint to become react-native developer https://medium.com/differential/blueprint-to-becoming-a-react-native-developer-6cad2b894887
- Layouting Flexbox https://facebook.github.io/react-native/docs/flexbox.html
- Component Props https://facebook.github.io/react-native/docs/props.html
- Use Cocoa Pods on RN project /h ttps://shift.infinite.red/beginner-s-guide-to-using-cocoapods-with-react-native-46cb4d372995
- React Navigation https://hackernoon.com/getting-started-with-react-navigation-the-navigation-solution-for-react-native-ea3f4bd786a4
- Tame Flexbox http://rationalappdev.com/layout-react-native-components-with-flexbox/
- About React Lifecycle https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1
- Way to Redux https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6
- Create cross platform native code https://facebook.github.io/react-native/docs/native-modules-android.html
Advanced
- New StyleSheet API https://github.com/vitalets/react-native-extended-stylesheet
- Shapes http://browniefed.com/blog/the-shapes-of-react-native/
- FlatList use https://medium.com/react-native-development/how-to-use-the-flatlist-component-react-native-basics-92c482816fe6
- Redux https://medium.com/react-native-training/redux-4-ways-95a130da0cdc
Must watch
- When To Go Native Over JavaScript https://www.youtube.com/watch?v=0kmqF4F7pIQ&list=WL
- React Conf 2017 a Navigation Approach from AirBnb https://youtu.be/tWitQoPgs8w?list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0
Common problems
- Splash https://android.jlelse.eu/change-splash-screen-in-react-native-android-app-d3f99ac1ebd1 (PAIN IN THE ASS!!)
- Centered Title Toolbar https://github.com/facebook/react-native/issues/5014
- Layout below status bar on iOS https://stackoverflow.com/questions/42599850/how-to-prevent-layout-from-overlapping-with-ios-status-bar
- Error running on iOS https://github.com/facebook/react-native/issues/14368
- Error when pod init due a dependency https://github.com/flori/json/issues/229
Magic commands
Add missing assets
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
Reset cache
About: https://gist.github.com/jarretmoses/c2e4786fd342b3444f3bc6beff32098d
watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache
Android Debug APK not updated and runs old code base
curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"