React Native

1 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
 Overview

2 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Introduction
 React Native:
 JavaScript framework for developing real, native apps for iOS
and Android
 Based on ReactJS – a framework mainly for web development
 Using native components

3 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
From React to React Native

4 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Current Architecture

 3 separate threads
 JavaScript thread: implementation of the app logics
 UI thread (Java, Objective-C): native part working with the platform
 Shadow thread (C++): calculation of UI layout
 Asynchronous communication through a Bridge
5 AC3040: Mobile Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
New Architecture (Rolled-out in 2022)

 Bridge replaced by the JSI (JavaScript Interface): a direct

interface between JS and C++
 Shared ownership
 Synchronous interoperability between threads

6 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Choice of Development Framework
Feature React Native CLI Expo CLI
Easy project setup − +
Support of device’s API: Bluetooth, Wi-Fi,… + −
Adding native modules in Java, Objective-C + −
Testing without Android Studio and XCode
(No need a Mac for iOS development) − +
No build necessary to run the app − +
Building .apk and .ipa files + −
Debugging − +
 Get started with Expo, then switch to React Native CLI when
being familiar
7 AC3040: Mobile Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Environment Setup
 NodeJS
 Visual Studio Code
 Install React Native Tools extension (for debugging)
 Expo CLI and React Native CLI
 npm install -g expo-cli
 npm install -g react-native-cli
 Java SDK
 https://www.oracle.com/java/technologies/downloads/
 Choose latest LTS version
 Set JAVA_HOME env variable to <JavaSDK> folder

8 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Environment Setup (cont’d)
 Android Studio
 https://developer.android.com/studio
 Install Android Studio
 Install Android SDK from Android Studio
 Install Command-line Tools from Android Studio
 Or using command line (version number may need to be corrected):
 sdkmanager "build-tools;30.0.2"
 Setup a virtual device
 Set ANDROID_HOME env variable to <AndroidSDK> folder
 Add to PATH env variable:
 <AndroidSDK>\platform-tools
 <AndroidSDK>\cmdline-tools\latest\bin
 Install Expo Go on the virtual or physical device:
https://expo.dev/tools

9 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Create Project & Run Application
 React Native CLI
 npx react-native init <project-name>
 npm run web
 npm run android

 Expo CLI
 expo init <project-name>
 npm run android
 npm start

10 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
 Basics

11 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Hello World
import { StyleSheet, Text, View } from 'react-native';

export default function App() {

return (
<View style={styles.container}>
<Text style={{fontSize: 30}}>Hello World</Text>
</View>
);
}

const styles = StyleSheet.create({

container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});

12 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
View
 A basic building block of UI

13 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Native Components
 Components that are backed by the platform
 Most used:
React Native Android iOS HTML

<View> <ViewGroup> <UIView> <div>

<Text> <TextView> <UITextView> <p>

<Image> <ImageView> <UIImageView> <img>

<ScrollView> <ScrollView> <UIScrollView> <div>

<TextInput> <EditText> <UITextField> <input type="text">

<Button> <Button> <UIButton> <button>

14 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Exercises
1. Rewrite the “hello world” app using class component
2. Play fun with simple components and styling: <Text>,
<View>

15 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
<Text>
 Represents text nodes
 Style inheritance possible in nested text elements

 Example:
 <Text style={{ fontWeight: 'bold' }}>
I am bold
<Text style={{ color: 'red' }}>
and red
</Text>
</Text>

16 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
<Button>
<Button title="Click me" onPress={…} />

 Props: title, color, disabled

 Events: onPress

17 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
<Image>
 <Image style={styles.logo}
source={require("path/logo.png")} />
 <Image style={styles.icon}
source={{uri:
"data:image/png;base64,iVBORw0KGgo…"}} />
 <Image style={styles.icon}
source={{uri: "https://…"}} />

 Props: source, resizeMode (cover, contain,

stretch, repeat, center)
 Events: onError, onLoad

18 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
<ImageBackground>
 Like <Image> but includes children

 <ImageBackground
source={...}
style={...}
>
<Text>Inside</Text>
</ImageBackground>

19 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
<TextInput>
function App() {
const [name, setName] = useState("");
return <View style={styles.container}>
<TextInput style={styles.input}
placeholder="Enter a name"
onChangeText={val => setName(val)}
defaultValue={name} />
<Text style={styles.text}>
Name: {name}
</Text>
</View>
}
 Try the example without onChangeText and see what
happens

20 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
<TextInput>
 Props: placeholder, defaultValue, textAlign,
maxLength, multiline, autofocus,
returnKeyType

 Events: onChangeText, onFocus, onBlur,

onKeyPress

21 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
<ScrollView>
 Scrollable view with bounded height
 Props: horizontal,
showsHorizontalScrollIndicator,
showsVerticalScrollIndicator,
persistentScrollbar, pagingEnabled
 Events: onScroll

22 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
<FlatList>
 Performant interface for rendering basic, flat lists
 Renders only elements that are currently showing on the
screen
 <FlatList
data={dataArray}
renderItem={({item}) =>
<Item title={item.title}/>}
keyExtractor={item => item.id}
/>
 Props: data, renderItem, keyExtractor, inverted
 Events: onEndReached
 Other props & events inherited from <ScrollView>

23 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
keyExtractor Prop
 A function that extracts a unique key for a given item at a
specified index:
 (item: object, index: number) => string
 When omitted, the default function checks for
item.key and item.id and considers either of the
two as the unique key
 Used by React Native for the re-rendering optimization
when the list data is changed

24 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Example
const initData = [{ id: 1, title: 'Hanoi'}, { id: 2, title: 'Danang'},...];

function Item({info}) {
console.log('Rendering: ', info);
return <View style={styles.item}>
<Text style={styles.itemInfo}>{info.title}</Text>
</View>
}

// memo is used to prevent re-rendering when component props are not changed
const MemoItem = memo(Item, (prev, next) => prev.info.id == next.info.id);

export default function App() {

const [data, setData] = useState(initData);
return <>
<Button onPress={() => setData(data.filter((e, i) => i != 0))}
title="Remove 1st item"/>
<FlatList style={styles.container} data={data}
keyExtractor={item => item.id}
renderItem={({item}) => <MemoItem info={item} />}
/>
</>
}

25 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
<SectionList>
 Performant interface for rendering sectioned lists
 const DATA = [{ title: "Main dishes",
data: ["Pizza", "Burger", "Risotto"]
}, { title: "Sides",
data: ["French Fries", "Onion Rings"]
}];

function App() (
return <SectionList
sections={DATA}
keyExtractor={(item, idx) => item + idx}
renderItem={({item}) => <Item info={item}/>}
renderSectionHeader={({section}) =>
<Header info={section} />}
/>
)
 Events and props are similar to <FlatList>

26 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
<Switch>
 Boolean input
 <Switch
trackColor=
{{ false: "#767577", true: "#81b0ff" }}
thumbColor=
{isEnabled ? "#f5dd4b" : "#f4f3f4"}
ios_backgroundColor="#3e3e3e"
onValueChange={toggleSwitch}
value={isEnabled}
/>
 Props: value, trackColor, thumbColor, disabled
 Events: onValueChange

27 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
<ActivityIndicator>
<View style={styles.indicator}>
<ActivityIndicator />
<ActivityIndicator size="large" />
<ActivityIndicator size="small"
color="#0000ff" />
<ActivityIndicator size="large"
color="#00ff00" />
</View>

 Props: animating, color, hidesWhenStopped,

size

28 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Exercise
1. Render a list with different sorting options
2. Create a BMI calculator as in the figure
 𝐵𝑀𝐼 = 𝑤/ℎ2 (𝑤 in kg, ℎ in meters)
 < 18.5 : underweight
 18.5 ÷ 25 : normal
 25 ÷ 30 : overweight
 ≥ 30 : obese

29 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
 Touchable Wrappers

30 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Introduction
 <Button> is limited in content presentation

 Use the following wrappers to response to press:

 <TouchableWithoutFeedback>
 <TouchableHighlight>
 <TouchableOpacity>
 <TouchableNativeFeedback>
 <Pressable>

31 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
<TouchableWithoutFeedback>
 No visual feedback to press
 <TouchableWithoutFeedback onPress={…}>
<MyChildComponent />
</TouchableWithoutFeedback>

 Props: disabled
 Events: onPress, onPressIn, onPressOut,
onLongPress, onFocus, onBlur

32 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
<TouchableHighlight>
 Darkens or lightens the background of the child element when
pressed
 Inherits <TouchableWithoutFeedback>
 <TouchableHighlight
activeOpacity={0.6}
underlayColor="#DDDDDD"
onPress={() => alert("Pressed!")}
>
<MyChildComponent />
</TouchableHighlight>

 Props: activeOpacity, underlayColor

 Events: onHideUnderlay, onShowUnderlay

33 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
<TouchableOpacity>
 Decreases the opacity of the child element when pressed
 Inherits <TouchableWithoutFeedback>
 <TouchableOpacity
activeOpacity={0.6}
style={styles.button}
onPress={onPress}
>
<MyChildComponent />
</TouchableOpacity>

 Props: activeOpacity

34 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
<TouchableNativeFeedback>
 Uses native state drawable to display touch feedback
(Android only)
 Inherits <TouchableWithoutFeedback>
 <TouchableNativeFeedback background=
{TouchableNativeFeedback.Ripple("#ff0",
false)}>
<MyChildComponent>
</TouchableNativeFeedback>

 Props: background, useForeground

35 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
<Pressable>
 Detects various stages of press
interactions on children
 No visual feedback
 <Pressable onPress={…}>
<Child1/>
<Child2/>
</Pressable>

 Props: disabled
 children, style props can be functions that receive a Boolean
pressed property reflecting whether the component is currently
pressed
 Events: onPress, onPressIn, onPressOut,
onLongPress
36 AC3040: Mobile Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
<Pressable> with Visual Feedback
<Pressable style={({ pressed }) => [ {
backgroundColor: pressed ? "#7f7" : "#fff"
}, styles.wrapper]}
>
{({ pressed }) =>
<Text>
{pressed ? "Pressed!" : "Press Me"}
</Text>}
</Pressable>

37 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Exercise
 Make a card that flips up and down when being pressed
 Use <Pressable>

38 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Homework
1. Write a memory card
matching game
2. Create a simple
calculator as in the figure

39 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology