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
-
- iOS requires fbsimctl
- or use Chrome dev tools: https://codeburst.io/react-native-debugging-tools-3a24e4e40e4
Background execution
- only Android has support for headless JS
- new libraries for task scheduling from JS code:
- React Native Queue
-
React Native Background Task
- iOS has limitation for 30s bg task!
- won't work on a simulator
- medium article about them
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
- Animated core library (no CSS)
- for more see this video
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)
-
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