├── README.md └── Troubleshooting.md /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # DIVE IN 4 | #### GETTING STARTED 5 | - [Presentation: overview of React Native](https://docs.google.com/presentation/d/1XHoO5OzxoWgOQD6zDhGFssL-PT9MNp7P89pFWWnyFHw/edit?usp=sharing) 6 | 7 | - [Overview with tutorial](http://www.reactnativeexpress.com/) 8 | 9 | - [React Native basics tutorial - Handlebar Labs](https://learn.handlebarlabs.com/courses/react-native-basics-build-a-currency-converter/lectures/2643137) 10 | 11 | - [Official React Native docs](https://facebook.github.io/react-native/docs/getting-started.html) 12 | 13 | #### DEV TOOLS 14 | - [IDE - Atom](https://atom.io/) 15 | 16 | - [React Native package for Atom - Nuclide](https://nuclide.io/) 17 | 18 | - [IDE - Visual Studio Code](https://code.visualstudio.com/) 19 | 20 | - [Catch typing errors - Flow](https://flow.org/) 21 | 22 | - [Debugging - React Native docs](https://facebook.github.io/react-native/docs/debugging.html) 23 | 24 | 25 | #### STARTER KITS 26 | - [Easiest way to build your first project - Expo](https://expo.io/) 27 | 28 | - [Overview of Expo - JS Solutions blog](https://jssolutionsdev.com/blog/tools-for-react-native-app-development-expo-review/) 29 | 30 | - [CLI with boilerplates, plugins, etc - Ignite](https://github.com/infinitered/ignite) 31 | 32 | - [UI starter kit - Kitten Tricks](https://github.com/akveo/kittenTricks) 33 | 34 | - [UI components library - React Native Elements](https://github.com/react-native-training/react-native-elements) 35 | 36 | - [UI components library - Nacho UI](https://avocode.com/nachos-ui/docs) 37 | 38 | 39 | #### RUN ON A DEVICE 40 | - [Running on Device - React Native docs](https://facebook.github.io/react-native/docs/running-on-device.html) 41 | 42 | #### COMMUNITY 43 | - [Support resources - React Native docs](https://facebook.github.io/react-native/support.html) 44 | 45 | - [Reactiflux Dischord channel](https://discord.gg/0ZcbPKXt5bZjGY5n) 46 | 47 | - [FB React Native Community](https://www.facebook.com/groups/react.native.community) 48 | 49 | - [Official Twitter for React Native](https://twitter.com/reactnative) 50 | 51 | - [Official React Native blog](https://facebook.github.io/react-native/blog/) 52 | 53 | # SOLIDIFY THE FOUNDATION 54 | #### JAVASCRIPT 55 | - [JavaScript envirnoment and syntax with React Native - React Native docs](http://facebook.github.io/react-native/releases/0.49/docs/javascript-environment.html) 56 | 57 | - [MDN docs on JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript) 58 | 59 | - [ES6 feature overview - lukehoban on GitHub](https://github.com/lukehoban/es6features) 60 | 61 | - [Composition vs Inheritance - Medium](https://medium.com/front-end-hacking/classless-javascript-composition-over-inheritance-6b27c35893b1) 62 | - [Call vs apply vs bind - Medium](https://medium.com/@homicidalgecko/javascript-call-vs-apply-vs-bind-61447bc5e989) 63 | 64 | - [Prototype - MDN](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes) 65 | 66 | - [Closure - Medium](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36) 67 | 68 | - [Hoisting/Scope - Medium](https://medium.com/@naveenkarippai/scoping-and-hoisting-in-javascript-2c2e82107427) 69 | 70 | #### REACT 71 | - [React docs](https://reactjs.org/) 72 | 73 | #### COMPONENTS 74 | - Native, not web components e.g. not
75 | 76 | - Building blocks of React Native app 77 | 78 | - Has JSX, props and state 79 | 80 | - [Components and APIs - React Native docs](https://facebook.github.io/react-native/docs/components-and-apis.html) 81 | 82 | #### JSX 83 | - Write markup language in the codebase 84 | 85 | - Syntax for embedding XML within JavaScript e.g. Hello world! 86 | 87 | - [JSX in Depth - React docs](https://reactjs.org/docs/jsx-in-depth.html) 88 | 89 | #### PROPS 90 | - Set by the parent 91 | 92 | - Fixed throughout lifetime of the app 93 | 94 | - Creation parameters customize components 95 | 96 | - [Props - React Native docs](https://facebook.github.io/react-native/docs/props.html) 97 | 98 | #### STATE 99 | - Track data changes in app 100 | 101 | - Init in constructor, then call setState to update 102 | 103 | - Changes in state trigger RN lifecycle e.g. render() to run again 104 | 105 | - [State - React Native docs](https://facebook.github.io/react-native/docs/state.html) 106 | 107 | #### LIFECYCLE 108 | - [Component Lifecycle - React docs](https://reactjs.org/docs/react-component.html) 109 | 110 | - [React Lifecycle methods - Musefind blog](https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1) 111 | 112 | #### REDUX 113 | - Paradigm to manage app state and data flow 114 | 115 | - State management in which actions within a component dispatch transformations of state to reducers and the new state is relayed to subscribed components 116 | 117 | - [Redux docs](http://redux.js.org/) 118 | 119 | - [Videos on redux - Dan Abramov on egghead.io](https://egghead.io/courses/getting-started-with-redux) 120 | 121 | - [Redux tutorial - happypoulp on GitHub](https://github.com/happypoulp/redux-tutorial) 122 | 123 | - [Redux cartoon - Lin Clark on Meduim](https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6) 124 | 125 | #### MOBILE DEVELOPMENT 126 | - [Typical Mobile Development Cycle - Thinslices blog](https://www.thinslices.com/blog/phases-mobile-product-development-process) 127 | 128 | - [Indepth Mobile Development Process - The BHW Group](https://thebhwgroup.com/blog/mobile-app-development-process) 129 | 130 | - [Add custom splash screen - Medium](https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-android-30a3cec835ae) 131 | 132 | - [Update app icon - Bam Tech Blog](https://blog.bam.tech/developper-news/change-your-react-native-app-icons-in-a-single-command-line) 133 | 134 | - Note: Caches increase loading times, but may need to be deleted to process project updates. For changes to core app settings like app icon and splash screens, make sure to clear Derived Data in Xcode. iOS Emulators should be reset or uninstall the app. Android emulators also need to be reset as well for updates to app icons/splash screens. 135 | 136 | #### iOS DEVELOPMENT 137 | - [iOS permissions in Info.plist - Apple Developer docs](https://developer.apple.com/library/content/documentation/General/Reference/InfoPlistKeyReference/Introduction/Introduction.html) 138 | 139 | - [Overview of iOS certificates, identifiers and profiles - Theodo](https://www.theodo.fr/blog/2017/02/a-beginners-guide-to-ios-provisioning-profiles/) 140 | 141 | - [Program to setup iOS certificates, provisioning profiles, TestFlight, Distribution - Apple Developer](https://developer.apple.com/programs/) 142 | 143 | - [iOS certificate types - Apple Developer](https://developer.apple.com/support/certificates/) 144 | 145 | - [iOS App Distribution Guide - Apple Developer docs](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/Introduction/Introduction.html) 146 | 147 | - [Platform to manage App Store submissions - iTunesConnect](https://itunesconnect.apple.com/) 148 | 149 | - [Xcode: Delete derived data and clean project - iOSDevCenters](https://iosdevcenters.blogspot.com/2015/12/how-to-delete-derived-data-and-clean.html) 150 | 151 | - To reset iOS Emulators: 152 | 153 | For Xcode 9, Simulator -> Hardware -> Erase All Content and Settings... 154 | 155 | For Xcode 8, Simulator > Reset Content and Settings 156 | 157 | - [Run app simultaneously on multiple iOS simulators - Jesper Lund blog](https://jesperln.dk/react-native-run-multiple-ios-simulators-simultaneously/) 158 | 159 | #### ANDROID DEVELOPMENT 160 | - [Android permissions in AndroidManifest.xml - Android Developer docs](https://developer.android.com/guide/topics/permissions/index.html) 161 | 162 | - [Platform to manage Google Play submission - Android Developer](https://developer.android.com/distribute/console/index.html) 163 | 164 | - [Features with Google Play Console - Android Developer](https://developer.android.com/distribute/console/features.html) 165 | 166 | - To reset Android emulator: 167 | 168 | Add the parameter -wipe-data to commandline when starting an emulator 169 | e.g. /Users/YOURNAME/Library/Android/sdk/tools/emulator -avd Nexus_S_API_25 -wipe-data 170 | 171 | Android Studio -> Tools > Android > AVD Manager -> Select your emulator device -> Wipe data 172 | 173 | #### TESTING 174 | - [Jest docs - Facebook](http://facebook.github.io/jest/) 175 | 176 | - [Jest tutorial - Medium](https://medium.com/react-native-training/learning-to-test-react-native-with-jest-part-1-f782c4e30101) 177 | 178 | - [Jest Enzyme tutorial - redlight blog](https://blog.weareredlight.com/react-native-tutorial-2-testing-redux-apps-with-jest-enzyme-bdf4a518f839) 179 | 180 | - [Enzyme docs - Airbnb](http://airbnb.io/enzyme/) 181 | 182 | #### NETWORKING 183 | Libraries like fetch, XMLHttpRequest, axios offer inspection at the JavaScript level which is helpful but don't tell the exact details of each request. To do that we need to inspect network calls on the native level. Charles is pretty easy to setup, even with SSL. 184 | 185 | - [Network Proxy - Charles](https://www.charlesproxy.com/) 186 | 187 | - [Charles iOS Tutorial](https://www.raywenderlich.com/154244/charles-proxy-tutorial-ios) 188 | 189 | - [Charles - Android Tutorial](https://medium.com/@hackupstate/using-charles-proxy-to-debug-android-ssl-traffic-e61fc38760f7) 190 | 191 | 192 | # THE NEXT LEVEL 193 | #### CONTRIBUTE 194 | - [How to contribute to open source - Opensource.guide](https://opensource.guide/how-to-contribute/) 195 | 196 | - [Contributing to React Native - React Native docs](https://facebook.github.io/react-native/docs/contributing.html) 197 | 198 | #### CUSTOM COMPONENTS 199 | - [Create your first custom UI component - Medium](https://hackernoon.com/create-your-first-custom-ui-component-in-react-native-28213cb56067) 200 | 201 | - [React Native custom components - Medium](https://medium.com/pvtl/react-native-custom-components-6cd0f6461f67) 202 | 203 | #### PERFORMANCE 204 | - [Performance with React Native - React Native docs](https://facebook.github.io/react-native/docs/performance.html) 205 | 206 | #### DESIGN AND PROTOTYPING 207 | - [Design, prototyping for UI - Figma](https://www.figma.com) 208 | 209 | - [Vector editor - Designer.io](https://designer.io/) 210 | 211 | - [Image editor - Pixlr](https://pixlr.com/web) 212 | 213 | - [Simple graphic design tool - Canva](https://www.canva.com/) 214 | 215 | - [Mobile design prototyping - Origami Studio](https://origami.design/) 216 | 217 | - [Add custom icons to an app - Medium](https://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c) 218 | 219 | #### MOBILE UX/UI 220 | - [Mobile UX for errors - UX Planet](https://uxplanet.org/mobile-ux-design-user-errors-1ad1f5d664f9) 221 | 222 | - [Mobile app personalization - UsabilityGeek](https://usabilitygeek.com/mobile-app-personalization-how-to/) 223 | 224 | - [User onboarding - UsabilityGeek](https://usabilitygeek.com/user-onboarding-comprehensive-guide/) 225 | 226 | - [Difference between UX and UI - UsabilityGeek](https://usabilitygeek.com/the-difference-between-ux-and-ui-design/) 227 | 228 | - [Mobile UI Design: common designs - UX Planet](https://uxplanet.org/mobile-ui-design-basic-types-of-screens-aa1857e31339) 229 | 230 | - [UI inspiration - Dribble](https://dribbble.com/tags/mobile) 231 | 232 | #### NODE 233 | - [Node.js docs](https://nodejs.org/en/docs/) 234 | 235 | - [packager managers: yarn vs npm - RisingStack](https://blog.risingstack.com/yarn-vs-npm-node-js-package-managers/) 236 | 237 | - [Understanding differences between npm, yarn and pnpm - Alex Kras](https://www.alexkras.com/understanding-differences-between-npm-yarn-and-pnpm/) 238 | 239 | #### TOOLS FOR LIBRARY SELECTION 240 | - [Compare repos: stars, issues, etc - npmcompare](https://npmcompare.com/) 241 | 242 | - [Resource for recommended React Native libaries - Awesome React Native](http://www.awesome-react-native.com) 243 | 244 | #### LINKING LIBRARIES 245 | - [Linking libraries for iOS builds - React Native docs](https://facebook.github.io/react-native/docs/linking-libraries-ios.html) 246 | 247 | - [Manage iOS native modules w CocoaPods - React Native docs](https://facebook.github.io/react-native/docs/integration-with-existing-apps.html#3-install-cocoapods) 248 | 249 | - [Native Modules with Android - React Native docs](https://facebook.github.io/react-native/docs/native-modules-android.html) 250 | 251 | #### UPGRADING BUILDS 252 | - Currently updates once a month 253 | 254 | - DO NOT recommend upgrading immediately unless read the release notes and are willing to break a project build. There are typically unforeseen issues with dependencies and 3rd party libraries. 255 | 256 | - DO recommend upgrading immediately if you want to help stabilize the build by reporting bugs and collaborating with the community to create patches. The core team can’t test everything. Why not help fix it? 257 | 258 | - [List of versions - React Native docs](http://facebook.github.io/react-native/versions.html) 259 | 260 | - [Upgrading React Native - React Native docs](https://facebook.github.io/react-native/docs/upgrading.html) 261 | 262 | - [Upgrade package.json dependencies - tjunnone on GitHub](https://github.com/tjunnone/npm-check-updates) 263 | 264 | #### 3rd PARTY LIBRARIES 265 | - [Icons and fonts - react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) 266 | 267 | - [Officially recommended navigation library - react-navigation](https://github.com/react-community/react-navigation) 268 | 269 | - [Really popular navigation library - react-native-navigation](https://github.com/wix/react-native-navigation) 270 | 271 | - [FB login, sharing, etc - react-native-fbsdk](https://github.com/facebook/react-native-fbsdk) 272 | 273 | - [Device storage w relational db - realm](https://realm.io/docs/javascript/latest/) 274 | 275 | - [Mapview w markers - react-native-maps](https://github.com/airbnb/react-native-maps) 276 | 277 | - [Animations - lottie-react-native](https://github.com/airbnb/lottie-react-native) 278 | 279 | - [SVG library - react-native-svg](https://github.com/react-native-community/react-native-svg) 280 | 281 | - [Data visualization - victory-native](https://github.com/FormidableLabs/victory-native) 282 | 283 | - [Data visualization - react-native-chart](https://github.com/tomauty/react-native-chart) 284 | 285 | - [Progress bars - react-native-image-progress](https://github.com/oblador/react-native-image-progress) 286 | 287 | - [Cross-platform: web, mobile - reactxp](https://github.com/Microsoft/reactxp) 288 | 289 | - [Calendar UI - react-dates](https://github.com/airbnb/react-dates) 290 | 291 | - [Select media from device library or camera - react-native-image-picker](https://github.com/react-community/react-native-image-picker) 292 | 293 | - [Device info - react-native-device-info](https://github.com/rebeccahughes/react-native-device-info) 294 | 295 | - [Firebase sdk - react-native-firebase](https://github.com/invertase/react-native-firebase) 296 | 297 | - [Google Analytics wrapper - react-native-google-analytics-bridge](https://github.com/idehub/react-native-google-analytics-bridge) 298 | 299 | - [Documentation generation - react-docgen](https://github.com/reactjs/react-docgen) 300 | 301 | - [AWS SDK - aws-sdk-js](https://github.com/aws/aws-sdk-js) 302 | 303 | - [File access and data transfer - react-native-fetch-blob](https://github.com/wkh237/react-native-fetch-blob) 304 | 305 | - [Record audio - react-native-audio](https://github.com/jsierles/react-native-audio) 306 | 307 | - [Image pan and zoom - react-native-photo-view](https://github.com/alwx/react-native-photo-view) 308 | 309 | - [AWS JS SDK - aws-sdk-js](aws-sdk-js) 310 | 311 | - [AWS Cognito, S3 - aws-amplify-react-native](https://github.com/aws/aws-amplify) 312 | 313 | - [AWS AppSync (Currently in Preview) ](https://hackernoon.com/aws-appsync-up-and-running-560a42d96ba7) 314 | 315 | # HOME STRETCH 316 | #### CREATING AND MANAGING ASSETS 317 | - [Automate build and release steps - fastlane](https://github.com/fastlane/fastlane) 318 | 319 | - [Transform app icon/splashscreen resource into necessary sizes for iOS and Android - Image Gorilla](http://apetools.webprofusion.com/tools/imagegorilla) 320 | 321 | #### PROJECTS WITHOUT NATIVE MODULES 322 | - [Continuous deloyment via Microsoft's CodePush](https://github.com/Microsoft/react-native-code-push) 323 | 324 | #### PUBLISH FOR IOS 325 | 1. Update Xcode scheme for project Product -> Scheme -> Edit Scheme -> Run -> Info -> Build Configuration -> Release 326 | 327 | 2. Ensure certificates are set for Distribution (configure w Apple Developer account) 328 | 329 | 3. Each new archive sent to the App Store must have an incremental version number e.g. 1.0 -> 1.01 Target PROJECTNAME -> General -> Identity -> Version 330 | 331 | 4. Update platform to 'Generic iOS Device' 332 | 333 | 5. Clean the project 334 | 335 | 6. Product -> Archive 336 | 337 | 7. Window -> Organizer -> Archives -> PROJECTNAME -> select version -> Upload to App store The process may take a few minutes to complete. 338 | 339 | 8. The new binary will become available in iTunesConnect. 340 | 341 | #### PUBLISH FOR ANDROID 342 | - [Google Play Store Checklist - Android Developer](https://developer.android.com/distribute/best-practices/launch/launch-checklist.html) 343 | 344 | 1. [Create signed APK - React Native docs](https://facebook.github.io/react-native/docs/signed-apk-android.html) 345 | 346 | 2. The generated APK is found under PROJECTNAME/android/app/build/outputs/apk/app-release.apk 347 | 348 | 3. Upload this file to Google Play Console. 349 | 350 | -------------------------------------------------------------------------------- /Troubleshooting.md: -------------------------------------------------------------------------------- 1 | # Debug and upgrade React Native projects 2 | 3 | ### Quick project reset 4 | 5 | Reset watchman 6 | 7 | $ watchman watch-del-all 8 | 9 | Delete the node_modules and clean install via package.json 10 | 11 | $ rm -rf node_modules && npm install 12 | 13 | Reset packager cache 14 | 15 | $ rm -fr $TMPDIR/react-* or npm start -- --reset-cache 16 | $ rm -rf ~/.yarn-cache/npm-realm-* 17 | 18 | ### For dependency TARGET_LIB update or breaking the build 19 | 20 | If library was previously linked 21 | 22 | $ react native unlink TARGET_LIB 23 | 24 | Whether linked or not, uninstall it 25 | 26 | $ npm uninstall TARGET_LIB 27 | 28 | Reset watchman 29 | 30 | $ watchman watch-del-all 31 | 32 | Reinstall library and potentially specify version 33 | 34 | $ npm install --save TARGET_LIB 35 | $ npm install --save TARGET_LIB@VERSION 36 | 37 | Reset the packager's cache 38 | 39 | $ rm -fr $TMPDIR/react-* 40 | 41 | Restart the packager 42 | 43 | *Note this will transform the terminal window in the the packager, so consider running this line in a new window.* 44 | 45 | $ npm start -- --reset-cache 46 | 47 | ### Hard reset of cache: 48 | 49 | Reset watchman 50 | 51 | $ watchman watch-del-all 52 | 53 | Remove node_modules and reinstall via package.json configurations 54 | 55 | $ rm -rf node_modules && npm install 56 | 57 | Reset packager's cache 58 | 59 | $ rm -rf $TMPDIR/react-* 60 | 61 | Reset npm cache 62 | 63 | $ rm -rf $TMPDIR/npm-* 64 | 65 | 66 | ### For android build errors 67 | 68 | $ cd android && ./gradlew clean 69 | $ cd ../ && react-native start -- --reset-cache 70 | $ react-native run-android 71 | 72 | 73 | ### For iOS build errors 74 | 75 | Delete Xcode derived data 76 | 77 | Xcode -> File -> Preferences -> Locations -> Derived Data 78 | Select arrow to open folder in Finder and delete everything. 79 | Then close Xcode and reopen the project. 80 | 81 | Delete platform caches and reset npm 82 | 83 | $ rm -rf ios/build 84 | $ npm start -- --reset-cache 85 | 86 | ### If CocoaPods is setup for iOS 87 | 88 | $ rm -rf ios/Pods 89 | $ pod cache clean --all 90 | $ pod repo update && pod install 91 | 92 | 93 | ### Upgrading React Native 94 | 95 | *Note: It's helpful to unlink native modules first. This reduces conflicts when upgrading the build.* 96 | 97 | Unlink dependencies individually 98 | 99 | $ react-native unlink NATIVEMODULENAME 100 | 101 | Ensure that react-native-git-upgrade is installed 102 | 103 | $ npm install -g react-native-git-upgrade 104 | 105 | Run the upgrade with option to specify version. This can sometimes be used to downgrade 106 | 107 | *Note: Read release notes to be aware of changes between builds e.g. single entry point with 0.49* 108 | 109 | $ react-native-git-upgrade 110 | $ react-native-git-upgrade 0.51 111 | 112 | Resolve any conflicts in build 113 | 114 | Link all 3rd party libs back into the project 115 | 116 | $ react-native link 117 | --------------------------------------------------------------------------------