Scribd
Upload
2 views

React Native Notes 1

The document provides an introduction to React Native, including installation instructions for Expo CLI and the Expo Client application. It covers essential components such as Views, Text, Styles, and various input methods, as well as advanced topics like FlatList and Touchable components. Additionally, it discusses the basics of Flexbox for layout management in React Native applications.

Uploaded by

arriannepandaraoan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

React Native Notes 1

The document provides an introduction to React Native, including installation instructions for Expo CLI and the Expo Client application. It covers essential components such as Views, Text, Styles, and various input methods, as well as advanced topics like FlatList and Touchable components. Additionally, it discusses the basics of Flexbox for layout management in React Native applications.

Uploaded by

arriannepandaraoan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 32

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

You might also like