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
Navigation
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
Mobile Navigation with React Native
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)
Type of Navigation
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)
Navigation Props
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 componentaccessibilityLabel
: attribute defines screen reader descriptions of componentsaccesssibilityHint
: 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

Last updated