Title Text

JS

  • use JSHint for linting
  • use semicolons
  • use === instead of ==
  • use Strict Mode and don't let JS help you automtically ('use strict';)
  • ...

Setup - install:

  • NodeJS LTS z www.nodejs.org
  • ReactNative CLI $ npm install -g react-native-cli
  • xCode / AndroidStudio

Create new project

d

IDE

  • Atom
  • with Nuclide package

Debugging

  • open: cmd + shift + A
  • launch the app with debugger and use breakpoints
  • start Android emulator / iOS simulator
    • iOS requires fbsimctl
      • reqires Xcode 8 ale kedze je uz 9, tak to robi problemy!

      • brew tap facebook/fb
      • export CODE_SIGNING_REQUIRED=NO && brew install fbsimctl --HEAD
  • or use Chrome dev tools: https://codeburst.io/react-native-debugging-tools-3a24e4e40e4

Background execution

Localization

UI

  • uses platform widgets
  • communication via JS bridge - can become a bottleneck
  • can mix native and React Native (both ways)

Images

  • from shared directory
    • platform file extensions (*.android.png / *.ios.png)
    • size sufixes (*@2x.png, *@3x.png)
  • from android/ios dir
  • from network
  • more info
  • svg support

Animations

Bridging

  • communication between Native and React Native
  • Native Components
  • Native Modules
  • CLI tool react-native-create-bridge
    • generates all necessary boilerplate
    • supports Java/Kotlin, ObjC/Swift
    • video

DB

Android Shared Preferences / iOS Keychain

CodePush

  • cloud service from Microsoft
  • deploy mobile app updates instantly
  • medium article
  • can't use if you change a native module

Redux

Cons

  • uses native widgets = aware of android version, vendor customizations
  • JS bridge for UI communication = bottleneck
    • example for lagging animations (video)
    • Native Driver for Animated

      • supports transform and opacity but not flexbox and position properties won't

      • Animated.event will only work with direct events and not bubbling events. This means it does not work with PanResponder but does work with things like ScrollView#onScroll

React Native vs Flutter

More info

react-native

By František Gažo

react-native

  • 831