Contents
About ................................................................................................................................................................................... 1
Chapter 1: Getting started with React Native ................................................................................................ 2
Section 1.1: Setup for Mac ............................................................................................................................................. 2
Section 1.2: Setup for Linux (Ubuntu) .......................................................................................................................... 8
Section 1.3: Setup for Windows .................................................................................................................................. 10
Chapter 2: Hello World ............................................................................................................................................. 12
Section 2.1: Editing index.ios.js or index.android.js ................................................................................................... 12
Section 2.2: Hello world! .............................................................................................................................................. 12
Chapter 3: Props .......................................................................................................................................................... 13
Section 3.1: PropTypes ................................................................................................................................................ 13
Section 3.2: What are props? ..................................................................................................................................... 14
Section 3.3: Use of props ............................................................................................................................................ 14
Section 3.4: Default Props .......................................................................................................................................... 15
Chapter 4: Multiple props rendering ................................................................................................................ 16
Section 4.1: render multiple variables ........................................................................................................................ 16
Chapter 5: Modal ........................................................................................................................................................ 17
Section 5.1: Modal Basic Example .............................................................................................................................. 17
Section 5.2: Transparent Modal Example ................................................................................................................. 18
Chapter 6: State .......................................................................................................................................................... 20
Section 6.1: setState ..................................................................................................................................................... 20
Section 6.2: Initialize State .......................................................................................................................................... 22
Chapter 7: Routing ..................................................................................................................................................... 23
Section 7.1: Navigator component ............................................................................................................................. 23
Chapter 8: Styling ....................................................................................................................................................... 24
Section 8.1: Conditional Styling .................................................................................................................................. 24
Section 8.2: Styling using inline styles ....................................................................................................................... 24
Section 8.3: Styling using a stylesheet ...................................................................................................................... 24
Section 8.4: Adding multiple styles ............................................................................................................................ 24
Chapter 9: Layout ....................................................................................................................................................... 26
Section 9.1: Flexbox ...................................................................................................................................................... 26
Chapter 10: Components ......................................................................................................................................... 35
Section 10.1: Basic Component ................................................................................................................................... 35
Section 10.2: Stateful Component .............................................................................................................................. 35
Section 10.3: Stateless Component ............................................................................................................................ 35
Chapter 11: ListView ................................................................................................................................................... 37
Section 11.1: Simple Example ....................................................................................................................................... 37
Chapter 12: RefreshControl with ListView ...................................................................................................... 38
Section 12.1: Refresh Control with ListView Full Example ........................................................................................ 38
Section 12.2: Refresh Control ..................................................................................................................................... 39
Section 12.3: onRefresh function Example ................................................................................................................ 39
Chapter 13: WebView ................................................................................................................................................ 41
Section 13.1: Simple component using webview ....................................................................................................... 41
Chapter 14: Command Line Instructions ........................................................................................................ 42
Section 14.1: Check version installed .......................................................................................................................... 42
Section 14.2: Initialize and getting started with React Native project .................................................................... 42
, Section 14.3: Upgrade existing project to latest RN version ................................................................................... 42
Section 14.4: Add android project for your app ....................................................................................................... 42
Section 14.5: Logging .................................................................................................................................................. 43
Section 14.6: Start React Native Packager ............................................................................................................... 43
Chapter 15: HTTP Requests ................................................................................................................................... 44
Section 15.1: Using Promises with the fetch API and Redux .................................................................................... 44
Section 15.2: HTTP with the fetch API ........................................................................................................................ 44
Section 15.3: Networking with XMLHttpRequest ....................................................................................................... 45
Section 15.4: WebSockets ........................................................................................................................................... 45
Section 15.5: Http with axios ....................................................................................................................................... 45
Section 15.6: Web Socket with Socket.io .................................................................................................................... 47
Chapter 16: Platform Module ................................................................................................................................ 49
Section 16.1: Find the OS Type/Version ..................................................................................................................... 49
Chapter 17: Images .................................................................................................................................................... 50
Section 17.1: Image Module ......................................................................................................................................... 50
Section 17.2: Image Example ...................................................................................................................................... 50
Section 17.3: Conditional Image Source .................................................................................................................... 50
Section 17.4: Using variable for image path ............................................................................................................. 50
Section 17.5: To fit an Image ...................................................................................................................................... 51
Chapter 18: Custom Fonts ...................................................................................................................................... 52
Section 18.1: Custom fonts for both Android and IOS .............................................................................................. 52
Section 18.2: Steps to use custom fonts in React Native (Android) ....................................................................... 53
Section 18.3: Steps to use custom fonts in React Native (iOS) ............................................................................... 53
Chapter 19: Animation API ...................................................................................................................................... 56
Section 19.1: Animate an Image ................................................................................................................................. 56
Chapter 20: Android - Hardware Back Button ............................................................................................ 57
Section 20.1: Detect Hardware back button presses in Android ............................................................................ 57
Section 20.2: Example of BackAndroid along with Navigator ............................................................................... 57
Section 20.3: Hardware back button handling using BackHandler and Navigation Properties (without
using deprecated BackAndroid & deprecated Navigator) ............................................................................. 58
Section 20.4: Example of Hardware back button detection using BackHandler ................................................. 59
Chapter 21: Run an app on device (Android Version) .............................................................................. 60
Section 21.1: Running an app on Android Device ..................................................................................................... 60
Chapter 22: Native Modules .................................................................................................................................. 61
Section 22.1: Create your Native Module (IOS) ........................................................................................................ 61
Chapter 23: Linking Native API ............................................................................................................................. 63
Section 23.1: Outgoing Links ....................................................................................................................................... 63
Section 23.2: Incomming Links ................................................................................................................................... 63
Chapter 24: ESLint in React Native ................................................................................................................... 65
Section 24.1: How to start ........................................................................................................................................... 65
Chapter 25: Integration with Firebase for Authentication .................................................................... 66
Section 25.1: Authentication In React Native Using Firebase .................................................................................. 66
Section 25.2: React Native - ListView with Firebase ................................................................................................ 66
Chapter 26: Navigator Best Practices .............................................................................................................. 69
Section 26.1: Navigator ............................................................................................................................................... 69
Section 26.2: Use react-navigation for navigation in react native apps ............................................................... 71
Section 26.3: react-native Navigation with react-native-router-flux ..................................................................... 72
Chapter 27: Navigator with buttons injected from pages .................................................................... 74
, Section 27.1: Introduction ............................................................................................................................................ 74
Section 27.2: Full commented example .................................................................................................................... 74
Chapter 28: Create a shareable APK for android ...................................................................................... 77
Section 28.1: Create a key to sign the APK ............................................................................................................... 77
Section 28.2: Once the key is generated, use it to generate the installable build: ............................................... 77
Section 28.3: Generate the build using gradle ......................................................................................................... 77
Section 28.4: Upload or share the generated APK .................................................................................................. 77
Chapter 29: PushNotification ................................................................................................................................ 78
Section 29.1: Push Notification Simple Setup ............................................................................................................ 78
Section 29.2: Navigating to scene from Notification ............................................................................................... 80
Chapter 30: Render Best Practises .................................................................................................................... 82
Section 30.1: Functions in JSX .................................................................................................................................... 82
Chapter 31: Debugging ............................................................................................................................................. 83
Section 31.1: Start Remote JS Debugging in Android .............................................................................................. 83
Section 31.2: Using console.log() ................................................................................................................................ 83
Chapter 32: Unit Testing ......................................................................................................................................... 84
Section 32.1: Unit Test In React Native Using Jest ................................................................................................... 84
Credits .............................................................................................................................................................................. 85
You may also like ........................................................................................................................................................ 87
, Chapter 1: Getting started with React
Native
Section 1.1: Setup for Mac
Installing package manager Homebrew brew
Paste that at a Terminal prompt.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Installing Xcode IDE
Download it using link below or find it on Mac App Store
https://developer.apple.com/download/
NOTE: If you have Xcode-beta.app installed along with production version of Xcode.app, make sure you
are using production version of xcodebuild tool. You can set it with:
sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer/
Installing Android environment
Git git
*If you have installed XCode, Git is already installed, otherwise run the following
brew install git
Latest JDK
Android Studio
Choose a Custom installation
2
About ................................................................................................................................................................................... 1
Chapter 1: Getting started with React Native ................................................................................................ 2
Section 1.1: Setup for Mac ............................................................................................................................................. 2
Section 1.2: Setup for Linux (Ubuntu) .......................................................................................................................... 8
Section 1.3: Setup for Windows .................................................................................................................................. 10
Chapter 2: Hello World ............................................................................................................................................. 12
Section 2.1: Editing index.ios.js or index.android.js ................................................................................................... 12
Section 2.2: Hello world! .............................................................................................................................................. 12
Chapter 3: Props .......................................................................................................................................................... 13
Section 3.1: PropTypes ................................................................................................................................................ 13
Section 3.2: What are props? ..................................................................................................................................... 14
Section 3.3: Use of props ............................................................................................................................................ 14
Section 3.4: Default Props .......................................................................................................................................... 15
Chapter 4: Multiple props rendering ................................................................................................................ 16
Section 4.1: render multiple variables ........................................................................................................................ 16
Chapter 5: Modal ........................................................................................................................................................ 17
Section 5.1: Modal Basic Example .............................................................................................................................. 17
Section 5.2: Transparent Modal Example ................................................................................................................. 18
Chapter 6: State .......................................................................................................................................................... 20
Section 6.1: setState ..................................................................................................................................................... 20
Section 6.2: Initialize State .......................................................................................................................................... 22
Chapter 7: Routing ..................................................................................................................................................... 23
Section 7.1: Navigator component ............................................................................................................................. 23
Chapter 8: Styling ....................................................................................................................................................... 24
Section 8.1: Conditional Styling .................................................................................................................................. 24
Section 8.2: Styling using inline styles ....................................................................................................................... 24
Section 8.3: Styling using a stylesheet ...................................................................................................................... 24
Section 8.4: Adding multiple styles ............................................................................................................................ 24
Chapter 9: Layout ....................................................................................................................................................... 26
Section 9.1: Flexbox ...................................................................................................................................................... 26
Chapter 10: Components ......................................................................................................................................... 35
Section 10.1: Basic Component ................................................................................................................................... 35
Section 10.2: Stateful Component .............................................................................................................................. 35
Section 10.3: Stateless Component ............................................................................................................................ 35
Chapter 11: ListView ................................................................................................................................................... 37
Section 11.1: Simple Example ....................................................................................................................................... 37
Chapter 12: RefreshControl with ListView ...................................................................................................... 38
Section 12.1: Refresh Control with ListView Full Example ........................................................................................ 38
Section 12.2: Refresh Control ..................................................................................................................................... 39
Section 12.3: onRefresh function Example ................................................................................................................ 39
Chapter 13: WebView ................................................................................................................................................ 41
Section 13.1: Simple component using webview ....................................................................................................... 41
Chapter 14: Command Line Instructions ........................................................................................................ 42
Section 14.1: Check version installed .......................................................................................................................... 42
Section 14.2: Initialize and getting started with React Native project .................................................................... 42
, Section 14.3: Upgrade existing project to latest RN version ................................................................................... 42
Section 14.4: Add android project for your app ....................................................................................................... 42
Section 14.5: Logging .................................................................................................................................................. 43
Section 14.6: Start React Native Packager ............................................................................................................... 43
Chapter 15: HTTP Requests ................................................................................................................................... 44
Section 15.1: Using Promises with the fetch API and Redux .................................................................................... 44
Section 15.2: HTTP with the fetch API ........................................................................................................................ 44
Section 15.3: Networking with XMLHttpRequest ....................................................................................................... 45
Section 15.4: WebSockets ........................................................................................................................................... 45
Section 15.5: Http with axios ....................................................................................................................................... 45
Section 15.6: Web Socket with Socket.io .................................................................................................................... 47
Chapter 16: Platform Module ................................................................................................................................ 49
Section 16.1: Find the OS Type/Version ..................................................................................................................... 49
Chapter 17: Images .................................................................................................................................................... 50
Section 17.1: Image Module ......................................................................................................................................... 50
Section 17.2: Image Example ...................................................................................................................................... 50
Section 17.3: Conditional Image Source .................................................................................................................... 50
Section 17.4: Using variable for image path ............................................................................................................. 50
Section 17.5: To fit an Image ...................................................................................................................................... 51
Chapter 18: Custom Fonts ...................................................................................................................................... 52
Section 18.1: Custom fonts for both Android and IOS .............................................................................................. 52
Section 18.2: Steps to use custom fonts in React Native (Android) ....................................................................... 53
Section 18.3: Steps to use custom fonts in React Native (iOS) ............................................................................... 53
Chapter 19: Animation API ...................................................................................................................................... 56
Section 19.1: Animate an Image ................................................................................................................................. 56
Chapter 20: Android - Hardware Back Button ............................................................................................ 57
Section 20.1: Detect Hardware back button presses in Android ............................................................................ 57
Section 20.2: Example of BackAndroid along with Navigator ............................................................................... 57
Section 20.3: Hardware back button handling using BackHandler and Navigation Properties (without
using deprecated BackAndroid & deprecated Navigator) ............................................................................. 58
Section 20.4: Example of Hardware back button detection using BackHandler ................................................. 59
Chapter 21: Run an app on device (Android Version) .............................................................................. 60
Section 21.1: Running an app on Android Device ..................................................................................................... 60
Chapter 22: Native Modules .................................................................................................................................. 61
Section 22.1: Create your Native Module (IOS) ........................................................................................................ 61
Chapter 23: Linking Native API ............................................................................................................................. 63
Section 23.1: Outgoing Links ....................................................................................................................................... 63
Section 23.2: Incomming Links ................................................................................................................................... 63
Chapter 24: ESLint in React Native ................................................................................................................... 65
Section 24.1: How to start ........................................................................................................................................... 65
Chapter 25: Integration with Firebase for Authentication .................................................................... 66
Section 25.1: Authentication In React Native Using Firebase .................................................................................. 66
Section 25.2: React Native - ListView with Firebase ................................................................................................ 66
Chapter 26: Navigator Best Practices .............................................................................................................. 69
Section 26.1: Navigator ............................................................................................................................................... 69
Section 26.2: Use react-navigation for navigation in react native apps ............................................................... 71
Section 26.3: react-native Navigation with react-native-router-flux ..................................................................... 72
Chapter 27: Navigator with buttons injected from pages .................................................................... 74
, Section 27.1: Introduction ............................................................................................................................................ 74
Section 27.2: Full commented example .................................................................................................................... 74
Chapter 28: Create a shareable APK for android ...................................................................................... 77
Section 28.1: Create a key to sign the APK ............................................................................................................... 77
Section 28.2: Once the key is generated, use it to generate the installable build: ............................................... 77
Section 28.3: Generate the build using gradle ......................................................................................................... 77
Section 28.4: Upload or share the generated APK .................................................................................................. 77
Chapter 29: PushNotification ................................................................................................................................ 78
Section 29.1: Push Notification Simple Setup ............................................................................................................ 78
Section 29.2: Navigating to scene from Notification ............................................................................................... 80
Chapter 30: Render Best Practises .................................................................................................................... 82
Section 30.1: Functions in JSX .................................................................................................................................... 82
Chapter 31: Debugging ............................................................................................................................................. 83
Section 31.1: Start Remote JS Debugging in Android .............................................................................................. 83
Section 31.2: Using console.log() ................................................................................................................................ 83
Chapter 32: Unit Testing ......................................................................................................................................... 84
Section 32.1: Unit Test In React Native Using Jest ................................................................................................... 84
Credits .............................................................................................................................................................................. 85
You may also like ........................................................................................................................................................ 87
, Chapter 1: Getting started with React
Native
Section 1.1: Setup for Mac
Installing package manager Homebrew brew
Paste that at a Terminal prompt.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Installing Xcode IDE
Download it using link below or find it on Mac App Store
https://developer.apple.com/download/
NOTE: If you have Xcode-beta.app installed along with production version of Xcode.app, make sure you
are using production version of xcodebuild tool. You can set it with:
sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer/
Installing Android environment
Git git
*If you have installed XCode, Git is already installed, otherwise run the following
brew install git
Latest JDK
Android Studio
Choose a Custom installation
2
