React Native Introduction
Figure 1.0 - React Native Introduction
Figure 1.1 - How React Native Works
Figure 1.2 - Expo
Figure 1.2 - Install Expo CLI Globally
● Install Expo CLI globally on your computer via command: npm install expo-cli –global
Figure 1.2 - Install Expo CLI Globally (part1)
Figure 1.3 - Install Expo CLI Globally (part2)
Figure 1.4 - Install Expo CLI Globally (part3)
● Start making app via command: expo init <title of project>
Figure 1.5 - Expo Client Application
● Install Expo Client application on your mobile device to preview your work.
Figure 1.6 - Android Studio
● Download Android Studio on your desktop/laptop.
Figure 1.7 - Android Emulator v1
Figure 1.8 - Android Emulator v2
Views, Text, and Styles
Figure 2.0 - Views, Text, and Styles
Figure 2.1 - Basic Components
Using State Hook
Figure 3.0 - useState Hook v1
Figure 3.1 - useState Hook v2
Figure 3.1 - useState Hook v3
Text Inputs
● List of Text Input props: https://reactnative.dev/docs/textinput
Figure 4.0 - Text Input
Figure 4.1 - Multi Line Prop
Figure 4.2 - Keyboard Type Prop
Lists & ScrollView
● Using map() method to call a function for every array element
Figure 4.0 - List
Figure 4.1 - Add key property to the prop
Figure 4.2 - Scroll View
● Surround the list with the ScrollView component in order to enable scrolling effect.
Flat List Component
● Use FlatList component as alternative to ScrollView component
● Flat List component has better performance than the Scroll View component.
● Flat List doesn’t need a key property unlike scroll view.
● keyExtractor tells the list to use the ids for the react keys instead of the default key
property
● numColumns - multiple columns can only be rendered with horizontal={false} and will
zig-zag like a flexWrap layout. Items should all be the same height - masonry layouts are
not supported.
Figure 5.0 - Flat List
Figure 5.1 - Flat List with Props
Figure 5.2 - Flat List with Props
Figure 5.3 - Flat List with Prop with numColumns = {2}
Figure 5.4 - Added Margin Style to the Flat List
Touchable Components
Figure 6.0 - Touchable Opacity v1
Figure 6.1 - Touchable Opacity v2
Todo App
Figure 7.0 - Todo App v1
Figure 7.1 - Header Component in Todo App
Figure 7.2 - Todo App v2
Figure 7.3 - TodoItem Customized Component with pressHandler Prop
Figure 7.4 - TodoItem Component with TouchableOpacity Module
Figure 7.5 - AddTodo Component
Figure 7.6 - Root Component with AddTodo Customized Component v1
Figure 7.7 - Root Component with AddTodo Customized Component v2
Alerts
Figure 8.0 - Adding Alert Object v2
Figure 8.1 - Adding Alert Object v2
Dismissing the Keyboard
Figure 9.0 - TouchableWithoutFeedback Component
Figure 9.1 - Importing TouchableWithoutFeedback and Keyboard Modules
Flexbox Basics
Figure 10.0 - Inside Container with Flex: 1
Figure 10.1 - Container with flexDirection: Column
Figure 10.2 - Container with flexDirection: Row
Figure 10.3 - Container without Flex: 1 Property
Figure 10.4 - Container justifyContent: Center
Figure 10.5 - Container justifyContent: Flex-end
Figure 10.6 - Container justifyContent: Space-between
Figure 10.6 - Container justifyContent: Space-around
Figure 10.6 - Container with alignItems: Center
Figure 10.7 - Container with alignItems: Flex-end
Figure 10.8 - Items Inside the Container with varied Flex: 1, 2,and 3
Figure 10.9 - Shows the Elements Go off the Screen due to No Flex Property
Figure 10.10 - Shows the Elements Doesn’t Go Off the Screen Anymore because of the Flex Property
