React Native – Part 2

State
• The model displayed by a component is this.state;
• State is a JavaScript Object that we use to track and response to
users’ inputs;
• Each React component has its own instance of state;
• Any change in state will cause all components or any children
components inside of it to be re-rendered;
• When using state in component, always set the initialize state to
the reasonable values;
• Always use this.setState(changedObjects)instead of
this.state.changedObject = someValue

2
Props
• Communication from parent to child components;
• It can be done by using attributes values, and/or callback
functions;
• Callback functions allows the child components to communicate
back to the parents.

3
Text Inputs

4
Password TextInput

5
 Showing and Setting State in TextInput
• value attribute – setting the text according to the state.weight’s value;
• onChangeText attribute – invoked when user making change the
TextInput, apply the new input value into the state.

6
 Navigator
• Navigator controls and handles the transition between different scenes
(screens) in the application;

• Navigator can switch the scenes to be display in the applications;

• To setup the navigator, you provide one or more objects call routes, to
identify each scene;

• You also provide a renderScene function that renders the scene for
each route object.

7
Basic Navigator

8
 Navigator’s Route Stack
• initialRouteStack props: supply the
Navigator’s All possible routes object
array;
• navigation.push(): adds scene into
the route stack;
• navigation.pop(): removes the latest
scene from the route stack;
• navigation.popN(2): removes the
latest 2 scene from stack.

9
Some Other Route Stack Manipulation Methods
• navigation.jumpTo(route): transitions to an existing scene without
unmounting;

• navigation.jumpForward(): jumps forward to the next scene in the route

stack;

• navigation.jumpBack(): jumps backward without unmounting the current

scene;

• navigation.popToTop(): pops to the first scene in the stack, unmounting

every other scene.

10
 Adding Navigation Bar
• navigationBar props: Adds UI
for navigation bar;

• routeMapper’s props of
Navigator.NavigationBar: defines
the UI of navigation bar:
– LeftButton: UI for Left Part of
NavBar;
– RightButton: UI for Right Part
of NavBar;
– Title: UI for Center Part of
Nav Bar.

11
 List View
• A core component designed for efficient display of vertically scrolling lists of
changing data; it supports advanced features such as:
– Scrolling;
– Section Segmentation;
– Sticky Section Headers;
– Header and Footer Supports;
– Callback when reaching the end of the available data (onEndReached), which can
enable infinite browsing.
– Re-render only when necessary and other several performance optimization.
• List View requires a ListView.Datasource to manipulate the display data. Its
simplest form is a simple array of data;
• List View render each item of data according to ListView.RenderRow
callback.
12
List View Example

13
Fetch API
• The Fetch API provides an interface for fetching resources
(including across the network);
• It is a living standard in Web Hypertext Application Technology
Working Group (WHATWG):
• Syntax:

// Resolve response as Blob

// Resolve response as JSON
// Resolve response as Text

14
.then Promise
• .then promise is a kind of advance technique of chaining
callback function;
• .then promise will be invoked when the earlier operation is
completed.

// (1) Fetching from URL

// (2) Wait until fetching is finished, then
convert
response data to text format.
// (3) Wait until the data conversion is
finished, then, using the data.

15
.catch Promise
• In cases of fetching errors, such as, Internet connection down,
the URL is no longer exist, etc. How can we resolve it?
• .catch promise can be added at the end of any promise to
capture any errors in the promise. The code interpreter will jump
from the point of the error occur to the functions in .catch
Promise.

16
React-Native-Maps
• https://github.com/airbnb/react-native-maps (made by Airbnb)
• React Native Map Components for iOS + Android:
– On iOS choose to work either with Google Map or Apple Map;
– On Android you can only work with Google Map.
• Installation and usage:
– npm install https://github.com/airbnb/react-native-maps.git --save
– react-native link
– react-native run-ios
– For Android, we have extra steps:
• Google Map need an API key (https://console.developers.google.com);
• Add the Google Map’s API key at android\app\src\main\AndroidManifest.xml
• react-native run-android
17
Adding Basic Map Code

18
Make It Controllable by State

19
Make It Controllable by State (continued)

20
Drag the Map
• Drag on map view to move the map;

• Once drag, this.state.region was

updated by onRegionChanged();

• Text at the lower third of the screen is

updated according to the
this.state.region;

• Try two fingers pinch, to zoom, to rotate the

map. In simulator, press alt /option button
to two fingers pinch.
21
Let’s Change the mapType

22
Adding Map Marker

23
Types of React Libraries
• Pure JavaScript, and you only need to require it to use;

• Non-pure JavaScript (Native Library), the JavaScript

library that rely on some native code:
– You have to include those native codes into the application;
– Otherwise, the application will throw an error as soon as you
try to use the library.

24
Linking with Native Library
• Why?
– Not every application uses all the native capabilities;
– Including the code to support all those features would impact the
binary size;
– It is easy to add these features whenever you need them.
• Automatic Linking:
– Use the react-native link command to link the library automatically.
• Manual Linking:
– Open Xcode project and / or Android Studio project to add the
native library by your self.

25
Automatic Linking
• Install a library:
– npm install <native-library> -save
– -save or -save-dev is important; it will save the <native-library> into
package.json file;
– React Native will link your lib based on dependencies and
devDependencies in your package.json file.
• Link your native dependencies:
– react-native link
– All libraries with a native dependencies should be successfully
linked to your iOS/Android project.

26
Camera Roll Library
• Declare photo library usage:
– In order to access user’s private data on iOS,
like location, camera roll, contacts, etc., the
application has to get the user’s permission.

• Link the CameraRoll Library:

– React Native, by default, not included the
CameraRoll into the project, so you need to add
it yourself

27
 Programming with Camera Roll Library
• Use ImagePickerIOS to
choose a image from gallery
or camera:
– Call
openSelectDialog() to
choose the image from
Gallery;
– Call
openCameraDialog() to
open a camera and take a
photo.

28
AsyncStorage

• AsyncStorage is a simple, unencrypted, asynchronous,

persistent, key-value storage system that is global to the
application;
• On iOS AsyncStorage is backed by native code that stores
small values in a serialized dictionary and larger values in
separate files;
• On Android AsyncStorage will use either RocksDB or
SQLite based on what is available.
29
How to Use AsyncStorage?
• Don’t need to installation any extra library; it comes with
React-Native by default;

• To loaded the saved data, you can do like this:

• Since loading data is a time consuming task, it is designed

to be a asynchronous operation. So getItem returned the
promise, which will invoke the call back function when the
read operation is completed.
30
Saving the Whole State
• For faster application development, instead of manipulating
the field one-by-one, we can save the whole state into the
AsyncStorage;

• setItem(), and getItem() accept only the string

arguments;

• Use JSON.stringify() and JSON.parse() to convert

between string and JSON object.

31
Saving the Whole State (continued)

32
Realm Database
• A flexible platform for
creating offline-first,
reactive mobile apps
effortlessly;

• Installation and linking

to your project:
– npm install --save
realm
– react-native link
realm

33
Realm Database Model
• Realm data models are defined by the schema information
passed into a Realm during initialization;
• The schema for an object consists of the object’s name
and a set of properties each of which has a name and
type as well as the objectType for object and list
properties;
• We can also designate each property to be optional or to
have a default value;
• Realm supports the following basic types: bool, int, float,
double, string, data, and date.
34
Creating Objects
• Objects are created by using the create method:

• Nested Objects can create recursively by specifying JSON

value of each child property:

35
Updating Objects
• You can update any object by setting its properties within a
write transaction;
• If the model class includes a primary key, you can have
Realm intelligently update or add objects based off of their
primary key values. This is done by passing true as the
third argument to the create method:

36
Deleting Objects
• Objects can be deleted by calling the delete method within
a write transaction:

37
Queries
• Queries allow you to get objects of a single type from a Realm,
with the option of filtering and sorting those results;
• All queries (including queries and property access) are lazy in
Realm. Data is only read when objects and properties are
accessed. This allows you to represent large sets of data in a
performant way;
• When performing queries you are returned a Results object.
Results are simply a view of your data and are not mutable;
• The most basic method for retrieving objects from a Realm is
using the objects method on a Realm to get all objects of a given
type:
38
Filtering and Sorting
• You can get a filtered Results by calling the filtered method with
a query string:

• Results allows you to specify a sort criteria and order based on a

single or multiple properties.

39
Auto-Updating Result
• Results instances are live, auto-updating views into the
underlying data, which means results never have to be re-
fetched. Modifying objects that affect the query will be reflected
in the results immediately:

• This applies to all Results instances, included those returned by

the objects, filtered, and sorted methods.
40
Thank you!

41