ReactNative

Installation

Install Expo: npm install expo-cli --global

Create & Run:

expo init my-new-project

cd my-new-project

expo start

Difference

Core component:

div --> View
p --> Text
img --> Image
onClick --> onPress

Styling

Can't use CSS style sheet --> use stylesheet in JS

const styles = StyleSheet.create({
    container: {
        flex: 
        justifyContent: 'center',
        backgroundColor: '#ecf0f1',
        padding: 40,  
    },    
...});

Getting screen dimension: Use Dimension Class in React Native

getScreenSize = () => {  
    const screenWidth = Math.round(Dimensions.get('window').width);  
    const screenHeight = Math.round(Dimensions.get('window').height);  
    this.setState({ screenWidth: screenWidth, screenHeight: screenHeight 
})  }

Platform specific component

Android and IOS has unique component: TouchableNativeFeedback on Android; TouchableHighlight on IOS

Method 1: Selectively render component based on OS: if (Platform.OS === 'android')...

Method 2: Create two version of components: MyButton.ios.js / MyButton.android.js

Animation & Gesture

Mobile device involves several screens --> use react-navigation

import {createAppContainer} from'react-navigation';
import {createStackNavigator} from'react-navigation-stack';
const MainNavigator = createStackNavigator({
    Home: {screen: HomeScreen},
    Profile: {screen: ProfileScreen},
});

const App = createAppContainer(MainNavigator);
exportdefault App;

Communicating with Server API

Identify user from authentication: Authentication identifying a user in the process of providing access to system data or services based on the user's identity

Common Authentication Method:

Basic HTTP: username/password for each request
Session-based: Client receive session id after authentication --> store in Cookies --> attach it to every subsequent request
JWT-based: Client send encrypted user info --> receive a token --> token included in every request & decrypted by the server

JWT-based:

The client authenticates with a usernameand a password once, receives a token, and only sends the token for subsequent requests, until the token times out — works like an all inclusive resort!

RESTful API:

REpresentational State Transfer (REST) is an architectural style for distributed hypermedia systems.

GET: Retrieve info from server that doesn't change the server (safe method) --> Return same info everytime if no PUT or POST request issued --> 200(OK) / 404(Not Found)
POST: HTTP method that creates new subordinate resources, e.g., a new user in a collection of users. POST is not safe or idempotent --> 201 (Created) with info on new resource / 200 (OK) / 204 (No Content)
PUT: HTTP method to update existing information on the server --> 200 (OK) / 204 (No Content) --> If resource not exist, create one with code 201 (same as POST)
DELETE: HTTP method that deletes resources from the server --> idempotent (Calling DELETE multiple times doesn't change) --> 200 (OK) if resp include an entity with status --> 202 (Accepted) if request queued / 204 (No Content) if performed but entity not included

Password encode and decode: NPM base-64 package:

import base64 from'base-64';

base64.encode(username + ":" + password);

Passing Authentication Info

Pass user credential example:

'Authorization', 'Basic ' + base64.encode(username + ":" + password)

Pass token example:

'x-access-token', result.token

react-navigation
react-native-navigation: More Advanced --> Change Native Component

Setup

npm install @react-navigation/native

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

History API provides a Window object to stack pages user previously vistited:

Press back button: window.history.back()

Press forward button: window.history.forward()

Navigate in stack: window.history.go(3)

Switch navigator: Show one screen at a time, no back action (Authentication flow)
Stack navigator: Enable transition between screens, where each screen is in stack. Navigator automatically implement native transition animation (list & view detail back and forth)
Tab Navigation: Tabs at bottom or tob of the screen (Main menu and sub sections)
Drawer Navigation: Tab-like, but can be hidden and exposed like a drawer (Options & setting)

Each screen is automatically provided with a navigation props, no need to specify in constructor (navigate, goBack, state)

Mobile Input via Gesture React Native

PanResponder

Uses the core gesture responder system to reconcile several touches into a single gesture that can be used to recognize multi-touch gestures.

Initialize PanResponder obejct with event handlers

2. provide _panResponder as props into component

Animated

Create time-based animation:

LayoutAnimation

Animate entire screen when there's change in layout (remove a component)

LayoutAnimation is used before setState is called

Date Object in JS

Date object represent a single moment in time with a platform-independent format, both be used by server and user

For user: Thu Nov 07201911:53:47 GMT-0600 (Central Standard Time)

For server: 2019-11-07T11:53:47-06:00

Serialize date into ISO 8601 format:

var date = new Date();
console.log(date); // Thu Nov 07 2019 11:58:58 GMT-0600 (Central Standard Time)

var json = JSON.stringfy(date);
console.log(json); // "2019-11-07T17:58:58.487Z"

BUT, cannot deserialize back to date format

SO, use trick:

Accessibility Building

Accessible Rich Internet Application (ARIA)

aria is a set of HTML attributes that make web components available to assistive technologies.

<div id="percent-loaded" 
role="progressbar" 
aria-valuenow="75" 
aria-valuemin="0" 
aria-valuemax="100"></div>

In React Native

RN provides us with access to assistive technologies that mobile platforms provide (e.g., VoiceOver on iOS or TalkBack on Android) through component attributes.

<View accessible={true}>
    <Text>List item one</Text>
    <Text>List item two</Text>
</View>

RN accessibility Properties:

accessible: attribute to indicate if the element is an accessible element; If so, group its childern in a single selectable component
accessibilityLabel: attribute defines screen reader descriptions of components
accesssibilityHint: tell the user what will be performed on this accessible element

RN accessibility Actions:

Standard, e.g., magicTap, escape, activate, increment, decrement, longpress, or custom actions, handled by onAccessibilityAction.

onAccessibilityAction={(event) => {
    switch (event.nativeEvent.actionName) {
        case'longpress':
        // take action      ...    
    }  
}}

AsyncStorage

Simple: Core functionality set/get
Unencrpyted: Access controll by location access
Persistent: Data saved until explicitily deleted
Global: Saved data is global to the app

Setup: Async, so return a Promise

npm install @react-native-async-storage/async-storage

import AsyncStorage from'@react-native-async-storage/async-storage';

Store accordingly: Dictionary or File in IOS and databsase in Android

Save Data

storeData = async () => {
    try {
        await AsyncStorage.setItem('@storage_Key', 'stored value')  
    } 
    catch (e) {
    // saving error  
    }
}

Retrieve Data

getData = async () => {
    try {
        const value = await AsyncStorage.getItem('@storage_Key')
        if(value !== null) {
            // value previously stored    
        } 
    } 
    catch(e) {
    // error reading value  
    }
}

Theming in RN

NativeBase

Enable theming using NativeBaseProvider

extendTheme():

Sensor

React Native Library: react-native-sensors
Expo Library: expo-sensors

App LifeCycle Using AppState

Everything we have been doing so far assumes that our app is loaded on the screen and is running as a foreground process.

We need to be able to perform background processes or safely save the user's data in case the OS suspends it or the user quits it.

AppState:

active: foreground activity
background: background activity
inactive: transitioning between foreground and background

PreviousReact.js NextMobile Design

Last updated 3 years ago