Please enable JavaScript.
Coggle requires JavaScript to display documents.
React Native 3 (Advanced) - Coggle Diagram
React Native 3 (Advanced)
Accessible Building
Accessibility in Web
Three-layer -> Peanut M&M
HTML (content) + CSS (appearance) + JavaScript (behavior)
ARIA (packages for accessibility)
Accessible Rich Internet Applications (ARIA)
HTML attribute
make web components available to assistive technology
<div aria-valuenow = "">
Accessibility in React Native
provide access to assistive technology provided by mobile platforms
VoiceOver on iOS
TalkBack on Android
<View accessible={true}>
Attributes
accessible
whether component is accessibility element
if so, group children in a single selectable component
accessibilityLabel
define screen reader descriptions of components: what to read
accessibilityHint
help user understand what will happen if they perform the action on the accessibility element
Actions
Standard
magicTap
escape
activate
increment (top half) / decrement (bottom half) to scroll
longpress
custom actions
handled by onAccessibilityAction
onAccessibilityAction={(event)=> {switch(actionName) { case 'long press': // do something...} }}
Storing Data using AsyncStorage
Set:
AsyncStorage.setItem('@storage
_key', 'stored value')
Get:
AynsStorage.getItem('@storage
_key')
What
Simple
set
get
Uncrypted
access controlled by location access (OS)
Persistent
data is saved until explicated deleted
delete app, will not delete data
need to delete data, then delete app, to delete data
Key-value storage system, global to the app, saved to device
How
AsyncStorage from react-native-community/async-storage
native code library store data in dictionary/files in iOS, database in Android
asynchronous
return Promise
may not get data immediately
= async() => {
try {
get/set...}
catch (e) {
}}
removeItem(key); mergeItem(key); clear(); getAllKeys()
multiGet(keys), multiSet(keys, values); multiRemove(keys); multiMerge(keys, values) - batch operations for array data
Theming Libraries
Native Base Theming Library
iOS
Android
Customized using NativeBase Customizer
different themes using StyleProvider (light, info, primary, success...)
<Button light ...>
import getTheme; import material
Import theme
<StyleProvider style={getTheme(material)}>
Accessing and Using Sensor Data
React Native Sensor Library (Do not use)
Expo sensors library: expo-sensors
Accelerometer
displacement in 3D (calculate velocity)
Barometer
changes in air pressure
Gyroscope
changes in rotation in 3D space
Magnetometer
changes in magnetic field
calibrated: compass
MagnetometerUncalibrated
uncalibrated raw values
Pedometer
step count from native sensor library
Access
expo install expo-sensors
import {Accelerometer} from 'expo-sensors'
Accelerometer.isAvailableAsync()
Accelerometer.addListener(listener)
Create subsribe and unsubsribe functions
_subsribe: addListener, setState, ...
Remove
Accelerometer.removeAllListeners()
Update at specific intervals
Accelerometer.setUpdateInterval(...)
Hardwares (not in expo-sensors library)
Camera
preview of front/back camera
Battery
battery information
Haptics
vibration
Audio
audio playing and recording
Brightness
get and set screen brightness
App Life Cycle using AppState
Problem
perform background process and save user's data when
OS suspends
user quits
Solution: AppState
AppState provides current state of app
active: running in foreground
background: running in background
Background fetch
BackgroundFetch.registerTaskAsync(taskName, options)
expo-background-fetch
TaskManager Native API
inactive: transition between foreground and background
import {AppState} from 'react-native';
state = {appState: AppState.currentState};
_handleAppStateChange = (nextAppState) => {
if (this.state.appState = inactive / background && next == active {
// do something}
this.setState({appState: next})}