1

CHAPTER FOUR

MORE ON REACT NATIVE

COMPONENTS
10/10/2023 Chapter 0: Components
Outline
 React native Scroll View
 React native List View – FlatList and SectionList
 ActivityIndicator and ProgressBar
 Image and Animation
 React native Web View
 React native Picker

10/10/2023
Core Component - ScrollView

 The ScrollView is a generic

scrolling container that can contain
multiple components and views.
 The scrollable items can be
heterogeneous, and you can scroll
both vertically and horizontally (by
setting the horizontal property).
 This example creates a vertical
ScrollView with both images and
text mixed together.
 ScrollViews can be configured to allow paging
through views using swiping gestures by using the
pagingEnabled props.

 Swiping horizontally between views can also be

implemented on Android using the ViewPager
component.

 The ScrollView works best to present a small amount

of things of a limited size.
 All the elements and views of a ScrollView are
rendered, even if they are not currently shown on
the screen.
 If you have a long list of items which cannot fit on
the screen, you should use a FlatList instead.
List views – FlatList and
SectionList
 React Native provides a suite of components for presenting lists of
data. Generally, you'll want to use either FlatList or SectionList.

 The FlatList component displays a scrolling list of changing, but

similarly structured, data. FlatList works well for long lists of data,
where the number of items might change over time.
 Unlike the more generic ScrollView, the FlatList only renders elements
that are currently showing on the screen, not all the elements at once.

 The FlatList component requires two props: data and renderItem. data
is the source of information for the list. renderItem takes one item from
the source and returns a formatted component to render.
 This example creates a basic
FlatList of hardcoded data.
 Each item in the data props
is rendered as a Text
component.
 The FlatListBasics
component then renders the
FlatList and all Text
components.
SectionList
A performant interface for rendering sectioned lists, supporting
the most handy features:
 Fully cross-platform.
 Configurable viewability callbacks.
 List header support.
 List footer support.
 Item separator support.
 Section header support.
 Section separator support.
 Heterogeneous data and item rendering support.
 Pull to Refresh.
 Scroll loading.
Note: If you don't need section support and want a simpler
10/10/2023
interface, use <FlatList>.
10/10/2023
ActivityIndicator
 Displays a circular loading indicator.

10/10/2023
React Native - Images
 Images are an essential aspect of any mobile app. This
component enable use to displays different types of images.
 Adding Image
 To add images in the application, you first need to import
the Image component from react-native.
 The React Native image component allows you to
display images from different sources, such as:
 Static resources
 Network images
 Temporary local images
 Local disk images, i.e. from the camera roll

10/10/2023
 To import the Image component, add it to
the import statement at the top of your application , as
shown below.
import { Image } from 'react-native‘

10/10/2023
 Display Static Images
 To display a static image, the first thing to add is the
image file in the assets folder of the project.
 Static images are loaded by providing the image path.
 The code for displaying a static image will look
something like this:

10/10/2023
10/10/2023
 Network Images
 Displaying an image from a network or web-based
source is similar to displaying a static image.
 Within the Image component, use the source attribute and
set the path of the image in an object with the uri key, as
shown below.
 Don't forget that for network and URI-encoded images, you
will need to manually specify the dimensions of your
image.

10/10/2023
10/10/2023
 URI Data Images
 You can also display images via a data URI, in which
case all the image data is actually encoded in the URI.
 This is only recommended for very small or dynamic
images.
 For a URI-encoded image, you'll provide the image
data with a source attribute like
const encodedBase64 = 'R0lGODlhAQABAIAAAAAA...7‘
<Image source={{ uri: `data:image/gif;base64,${encodedBase64}`}} />

10/10/2023
 Background Images
 You can also use an image as the background for your
screen.
 To do so, get a background image of your choice and
add it to the assets folder.
 Next, import the ImageBackground component
from react-native as shown below.
 import {ImageBackground } from 'react-native';

10/10/2023
 The ImageBackground component wraps and
displays a background for whatever elements
are inside it.
 In this case, we will replace the View tag with
the ImageBackground tag and wrap it around all the
content in the app.

10/10/2023
10/10/2023
React Native HTTP
 Many mobile apps need to load resources from a
remote URL.
 You may want to make a POST request to a REST
API, or you may need to fetch a chunk of static content
from another server.

10/10/2023
 Using Fetch
 We will use the componentDidMount lifecycle
method to load the data from server as soon as the
component is mounted.
 This function will send GET request to the server,
return JSON data, log output to console and update our
state.

10/10/2023
10/10/2023
React Native – Animations
 The Animated library is designed to make
animations fluid, powerful, and painless to build
and maintain.
 Animated focuses on declarative relationships
between inputs and outputs, configurable
transforms in between, and start/stop methods to
control time-based animation execution.

10/10/2023
 The core workflow for creating an animation is to
create an Animated.Value, hook it up to one or
more style attributes of an animated component,
and then drive updates via animations
using Animated.timing().

10/10/2023
 Animations Component
 We will set myStyle as a property of the state.
 This property is used for styling an element inside
PresentationalAnimationComponent.
 We will also create two functions: expandElement and
collapseElement.
 These functions will update values from the state.
 The first one will use the spring preset animation while the
second one will have the linear preset.
 We will pass these as props too.
 The Expand and the Collapse buttons call the
expandElement() and collapseElement() functions.
10/10/2023
10/10/2023
10/10/2023
React Native – Debugging
 React native offers a couple of methods that help in
debugging your code.
 In App Developer Menu
 You can open the developer menu on the
 IOS simulator by pressing command + D.
 Android emulator by pressing command + M.

10/10/2023
10/10/2023
 Reload
 This is used for reloading simulator. You can use the shortcut, command + R
 Debug JS Remotely
 This is used to activate debugging inside the browser developer console.
 Enable Live Reload
 This is used for enabling live reloading whenever your code is saved. The
debugger will open at localhost:8081/debugger-ui.
 Start Systrace
 This is used for starting the Android marker based profiling tool.
 Show Inspector
 This is used for opening inspector where you can find information about your
components. You can use the shortcut, command + I
 Show Perf
 Monitor This is used to track the performance of your app.
10/10/2023
React Native – Router
 Step 1 – Install Router
 To begin with, we need to install the Router. We will
use the React Native Router Flux. You can run the
following command in terminal, from the project
folder.
npm i react-native-router-flux --save
 Step 2
 Since we want our router to handle the entire
application, we will add it in index.ios.js. For Android,
you can do the same in index.android.js.
10/10/2023
10/10/2023
 Step 3 – Add Router
 Now we will create the Routes component inside the
components folder. It will return Router with several
scenes. Each scene will need key, component and
title.
 Router uses the key property to switch between scenes,
component will be rendered on screen and the title will
be shown in the navigation bar. We can also set the
initial property to the scene that is to be rendered
initially.

10/10/2023
10/10/2023
 Step 4 – Create components
 We need to add Home and About component.
 We will add the goToAbout and the goToHome
functions to switch between scenes.

10/10/2023
10/10/2023
10/10/2023
10/10/2023
React Native – Running IOS
 If you want to test your app in the IOS simulator, all you
need is to open the root folder of your app in terminal and run
−
 react-native run-ios
 The above command will start the simulator and run the app.
We can also specify the device we want to use.
 react-native run-ios --simulator "iPhone 5s
 After you open the app in simulator, you can press command
+ D on IOS to open the developers menu. You can check
more about this in our debugging chapter. You can also
reload the IOS simulator by pressing command + R.

10/10/2023
React Native – Running Android
 We can run the React Native app on Android platform by
running the following code in the terminal.
 react-native run-android
 Before you can run your app on Android device, you need to
enable USB Debugging inside the Developer Options.
 When USB Debugging is enabled, you can plug in your
device and run the code snippet given above.
 The Native Android emulator is slow. We recommend
downloading Genymotion for testing your app.
 The developer menu can be accessed by pressing command
+ M.
10/10/2023
Thank You
10/10/2023