DIVE IN

GETTING STARTED

• Presentation: overview of React Native

• Overview with tutorial

• React Native basics tutorial - Handlebar Labs

• Official React Native docs

DEV TOOLS

• IDE - Atom

• React Native package for Atom - Nuclide

• IDE - Visual Studio Code

• Catch typing errors - Flow

• Debugging - React Native docs

STARTER KITS

• Easiest way to build your first project - Expo

• Overview of Expo - JS Solutions blog

• CLI with boilerplates, plugins, etc - Ignite

• UI starter kit - Kitten Tricks

• UI components library - React Native Elements

• UI components library - Nacho UI

RUN ON A DEVICE

• Running on Device - React Native docs

COMMUNITY

• Support resources - React Native docs

• Reactiflux Dischord channel

• FB React Native Community

• Official Twitter for React Native

• Official React Native blog

SOLIDIFY THE FOUNDATION

JAVASCRIPT

• JavaScript envirnoment and syntax with React Native - React Native docs

• MDN docs on JavaScript

• ES6 feature overview - lukehoban on GitHub

• Composition vs Inheritance - Medium

• Call vs apply vs bind - Medium

• Prototype - MDN

• Closure - Medium

• Hoisting/Scope - Medium

REACT

• React docs

COMPONENTS

• Native, not web components e.g. not

• Building blocks of React Native app

• Has JSX, props and state

• Components and APIs - React Native docs

JSX

• Write markup language in the codebase

• Syntax for embedding XML within JavaScript e.g. Hello world!

• JSX in Depth - React docs

PROPS

• Set by the parent

• Fixed throughout lifetime of the app

• Creation parameters customize components

• Props - React Native docs

STATE

• Track data changes in app

• Init in constructor, then call setState to update

• Changes in state trigger RN lifecycle e.g. render() to run again

• State - React Native docs

LIFECYCLE

• Component Lifecycle - React docs

• React Lifecycle methods - Musefind blog

REDUX

• Paradigm to manage app state and data flow

• State management in which actions within a component dispatch transformations of state to reducers and the new state is relayed to subscribed components

• Redux docs

• Videos on redux - Dan Abramov on egghead.io

• Redux tutorial - happypoulp on GitHub

• Redux cartoon - Lin Clark on Meduim

MOBILE DEVELOPMENT

• Typical Mobile Development Cycle - Thinslices blog

• Indepth Mobile Development Process - The BHW Group

• Add custom splash screen - Medium

• Update app icon - Bam Tech Blog

• 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.

iOS DEVELOPMENT

• iOS permissions in Info.plist - Apple Developer docs

• Overview of iOS certificates, identifiers and profiles - Theodo

• Program to setup iOS certificates, provisioning profiles, TestFlight, Distribution - Apple Developer

• iOS certificate types - Apple Developer

• iOS App Distribution Guide - Apple Developer docs

• Platform to manage App Store submissions - iTunesConnect

• Xcode: Delete derived data and clean project - iOSDevCenters

• To reset iOS Emulators:

  For Xcode 9, Simulator -> Hardware -> Erase All Content and Settings...
  
  For Xcode 8, Simulator > Reset Content and Settings
  

• Run app simultaneously on multiple iOS simulators - Jesper Lund blog

ANDROID DEVELOPMENT

• Android permissions in AndroidManifest.xml - Android Developer docs

• Platform to manage Google Play submission - Android Developer

• Features with Google Play Console - Android Developer

• To reset Android emulator:

  Add the parameter -wipe-data to commandline when starting an emulator 
      e.g. /Users/YOURNAME/Library/Android/sdk/tools/emulator -avd Nexus_S_API_25 -wipe-data        
  
  Android Studio -> Tools > Android > AVD Manager -> Select your emulator device -> Wipe data
  

TESTING

• Jest docs - Facebook

• Jest tutorial - Medium

• Jest Enzyme tutorial - redlight blog

• Enzyme docs - Airbnb

NETWORKING

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.

• Network Proxy - Charles

• Charles iOS Tutorial

• Charles - Android Tutorial

THE NEXT LEVEL

CONTRIBUTE

• How to contribute to open source - Opensource.guide

• Contributing to React Native - React Native docs

CUSTOM COMPONENTS

• Create your first custom UI component - Medium

• React Native custom components - Medium

PERFORMANCE

• Performance with React Native - React Native docs

DESIGN AND PROTOTYPING

• Design, prototyping for UI - Figma

• Vector editor - Designer.io

• Image editor - Pixlr

• Simple graphic design tool - Canva

• Mobile design prototyping - Origami Studio

• Add custom icons to an app - Medium

MOBILE UX/UI

• Mobile UX for errors - UX Planet

• Mobile app personalization - UsabilityGeek

• User onboarding - UsabilityGeek

• Difference between UX and UI - UsabilityGeek

• Mobile UI Design: common designs - UX Planet

• UI inspiration - Dribble

NODE

• Node.js docs

• packager managers: yarn vs npm - RisingStack

• Understanding differences between npm, yarn and pnpm - Alex Kras

TOOLS FOR LIBRARY SELECTION

• Compare repos: stars, issues, etc - npmcompare

• Resource for recommended React Native libaries - Awesome React Native

LINKING LIBRARIES

• Linking libraries for iOS builds - React Native docs

• Manage iOS native modules w CocoaPods - React Native docs

• Native Modules with Android - React Native docs

UPGRADING BUILDS

• Currently updates once a month

• 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.

• 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?

• List of versions - React Native docs

• Upgrading React Native - React Native docs

• Upgrade package.json dependencies - tjunnone on GitHub

3rd PARTY LIBRARIES

• Icons and fonts - react-native-vector-icons

• Officially recommended navigation library - react-navigation

• Really popular navigation library - react-native-navigation

• FB login, sharing, etc - react-native-fbsdk

• Device storage w relational db - realm

• Mapview w markers - react-native-maps

• Animations - lottie-react-native

• SVG library - react-native-svg

• Data visualization - victory-native

• Data visualization - react-native-chart

• Progress bars - react-native-image-progress

• Cross-platform: web, mobile - reactxp

• Calendar UI - react-dates

• Select media from device library or camera - react-native-image-picker

• Device info - react-native-device-info

• Firebase sdk - react-native-firebase

• Google Analytics wrapper - react-native-google-analytics-bridge

• Documentation generation - react-docgen

• AWS SDK - aws-sdk-js

• File access and data transfer - react-native-fetch-blob

• Record audio - react-native-audio

• Image pan and zoom - react-native-photo-view

• AWS JS SDK - aws-sdk-js

• AWS Cognito, S3 - aws-amplify-react-native

• AWS AppSync (Currently in Preview)

HOME STRETCH

CREATING AND MANAGING ASSETS

• Automate build and release steps - fastlane

• Transform app icon/splashscreen resource into necessary sizes for iOS and Android - Image Gorilla

PROJECTS WITHOUT NATIVE MODULES

• Continuous deloyment via Microsoft's CodePush

PUBLISH FOR IOS

1. Update Xcode scheme for project Product -> Scheme -> Edit Scheme -> Run -> Info -> Build Configuration -> Release

2. Ensure certificates are set for Distribution (configure w Apple Developer account)

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

4. Update platform to 'Generic iOS Device'

5. Clean the project

6. Product -> Archive

7. Window -> Organizer -> Archives -> PROJECTNAME -> select version -> Upload to App store The process may take a few minutes to complete.

8. The new binary will become available in iTunesConnect.

PUBLISH FOR ANDROID

• Google Play Store Checklist - Android Developer

1. Create signed APK - React Native docs

2. The generated APK is found under PROJECTNAME/android/app/build/outputs/apk/app-release.apk

3. Upload this file to Google Play Console.