1

CHAPTER 5
REACT NATIVE API,
NAVIGATION, HTTP AND
STORAGE

10/10/2023 Chapter 5: React Native API, Navigation, HTTP and Storage

 Content
2

 React native API

 Alert and Geolocation
 React native Http
 React native Navigation

 React native Storage

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.
 Using Fetch
 React Native provides the Fetch API for your networking needs. Fetch will
seem familiar if you have used XMLHttpRequest or other networking APIs
before.
 Making requests​
 In order to fetch content from an arbitrary URL, you can pass the URL to fetch:
 fetch('https://mywebsite.com/mydata.json');
 Fetch also takes an optional second argument that allows you to
customize the HTTP request. You may want to specify additional
headers, or make a POST request:
 Handling the response​
 The above examples show how you can make a request. In many cases, you
will want to do something with the response.
 Networking is an inherently asynchronous operation. Fetch method will
return a Promise that makes it straightforward to write code that works in
an asynchronous manner:
 You can also use the async / await syntax in a React Native app:
 Don't forget to catch any errors that may be thrown by fetch, otherwise they
will be dropped silently.
How to use async / await?
 We use async-await to manage time consuming tasks using async
await we have the option to wait for the first task before executing the
second task.
 Async keyword use for define function for use await task, when you want
to use to await for wait task then first you have to define async function.
 Await keyword use for stop execution till task response, we will use
multiple await calls in one async function.
 Syntax
 Async syntax for normal function example

 Async syntax for arrow function example

 Await syntax
 You can use await function native library calls or you can also use for call
your async function

 Await call own function example

React native Navigation
 Developing mobile applications involves many moving parts.
 From styling, functionality, authentication, and session persistence to
navigation
 React Navigation is a library consisting of components that makes
building and connecting screens in React Native easy.
 It is important to understand how navigation in mobile applications works,
and what major differences exist between
 Mobile-based navigation and
 Web-based navigation.

10/10/2023
Navigation types in React native
 Drawer navigation
 This consists of patterns in navigation that
require you to use a drawer from the left
(sometimes right) side for navigating
between and through screens.
 Typically, it consists of links that provide
a gateway to moving between screens.
 It’s similar to sidebars in web-based
applications.
 Tab navigation
 This is the most common form of
navigation in most mobile applications.
 Navigation is possible through tab-based
components.
 It consists of bottom and top tabs.
 Stack navigation
 Transition between screens is made
possible in the form of stacks.
 Various screens are stacked on top of
each other, and movement between
screens involves replacing one screen
with another.
 Most times, mobile applications make use of all types of navigators to
build the various screens and functionalities of the application. This is
called nesting navigators.
Installation and setup
 First, you need to install them in your project:
 npm install @react-navigation/native @react-navigation/native-stack
 Next, install the required peer dependencies. You need to run different commands
depending on whether your project is an Expo managed project or a bare React
Native project.
 If you have an Expo managed project, install the dependencies with expo:
 expo install react-native-screens react-native-safe-area-context
 If you have a bare React Native project, install the dependencies with npm:
 npm install react-native-screens react-native-safe-area-context
 If you're on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to
complete the linking.
 npx pod-install ios
Creating a simple stack navigation
 Step:1- Import the following components

 Step:2 - Wrapping your app in NavigationContainer​

 Now, we need to wrap the whole app in NavigationContainer. Usually
you'd do this in your entry file, such as index.js or App.js:
 Note: In a typical React Native app, the NavigationContainer should be only used
once in your app at the root.
 NavigationContainer is a component which manages our navigation tree
and contains the navigation state.
 This component must wrap all navigators structure. Usually, we'd render this
component at the root of our app, which is usually the component exported
from App.js.
 Step:3 – Creating a native stack navigation
 createNativeStackNavigator is a function that returns an object containing
2 properties:
 Screen and Navigator.
 Both of them are React components used for configuring the navigator.
 The Navigator should contain Screen elements as its children to define
the configuration for routes.
 Step:4 – Creating Stack Navigator
 Step:5 – Creating Home and Profile Screens, and import inside
App
 Step:6 – Creating Stack Screens
Navigating to a new screen​
 We'll use the navigation prop that is passed down to our screen
components.
 navigation - the navigation prop is passed in to every screen component in
the native stack navigator.
 navigate('Profile') - we call the navigate function with the name of the route that we'd
like to move the user to.
 Note: We can only navigate to routes that have been defined on our navigator — we
cannot navigate to an arbitrary component.
 So we now have a stack with two routes:
 1) the Home route
 2) the Profile route.
 Step:7 – Update the Home Screens
Navigate to a route multiple times
 If you run this code, you'll
notice that when you tap
"Go to Profile" that it
doesn't do anything! This
is because we are already on
the Profile route.
 The navigate function
roughly means "go to this
screen", and if you are
already on that screen then it
makes sense that it would do
nothing.
 Let's suppose that we actually want to add another profile
screen.
 This is pretty common in cases where you pass in some unique data to
each route (more on that later when we talk about params!).
 To do this, we can change navigate to push. This allows us to express
the intent to add another route regardless of the existing navigation
history.
Going back and Go to top
 Going back
 The header bar will automatically show a back button, but you can
programmatically go back by calling navigation.goBack().
 On Android, the hardware back button just works as expected.
 Go to top
 You can go back to an existing screen in the stack
with navigation.navigate('RouteName'), and you can go back to the first
screen in the stack with navigation.popToTop().
Configuring the navigator
 All of the route configuration is specified as props to our navigator.
We haven't passed any props to our navigator, so it just uses the
default configuration.
 The initial route for the previous stack is the Home route. Try
changing it to Profile by adding initialRouteName='Profile‘
props inside Stack.Navigator and reload the app, notice that you will
now see the Profile screen.
Specifying options
 Each screen in the navigator can specify some options for the
navigator, such as the title to render in the header. These
options can be passed in the options prop for each screen
component:

 For common options, we can pass screenOptions to

Stack.Navigator
Passing parameters to routes
 Now that we know how to create a native stack navigator with some
routes and navigate between those routes, let's look at how we can
pass data to routes when we navigate to them.
 There are two pieces to this:
 Pass params to a route by putting them in an object as a second parameter
to the navigation.navigate function:
navigation.navigate('RouteName', { /* params go here */ })
 Read the params in your screen component: route.params.
 Initial params​[1]
 You can also pass some initial params to a screen. If you didn't specify any
params when navigating to this screen, the initial params will be used. They
are also shallow merged with any params that you pass. Initial params can
be specified with an initialParams prop:
 Passing additional props​[2]
 Sometimes we might want to pass additional props to a screen.
 We can do that with 2 approaches:
 Use React context and wrap the navigator with a context provider to pass data to
the screens (recommended).
 Use a render callback for the screen instead of specifying a component prop:
Tab navigation
 Possibly the most common style of navigation in mobile apps
is tab-based navigation.
 This can be tabs on the bottom of the screen or on the top below the
header (or even instead of a header).
 First, you need to install the following package in your project:
 npm install @react-navigation/bottom-tabs
Creating a simple tab navigation
 Step:1- Import the following components

 Step:2 - Wrapping your app in NavigationContainer​

 Now, we need to wrap the whole app in NavigationContainer.
 Step:3 – Creating a tab navigation
 Step:4 – Creating Tab Navigator
 Step:5 – Creating Home and Profile Screens, and import inside
App
 Step:6 – Creating Tab Screens
Drawer navigation
 Common pattern in navigation is to use drawer from left (sometimes right) side
for navigating between screens.
 First, you need to install the following package in your project:
 npm install @react-navigation/drawer
 Dependency installation
 npm install react-native-gesture-handler react-native-reanimated
 To finalize installation of react-native-gesture-handler, add the
following at the top (make sure it's at the top and there's nothing else
before it) of your entry file, such as index.js or App.js:
 import 'react-native-gesture-handler';
 The Drawer Navigator supports both Reanimated 1 and Reanimated
2. If you want to use Reanimated 2, make sure to configure it
following the
 Babel plugin : Add Reanimated's babel plugin to your babel.config.js:
Creating a simple drawer navigation
 Step:1- Import the following components

 Step:2 - Wrapping your app in NavigationContainer​

 Now, we need to wrap the whole app in NavigationContainer.
 Step:3 – Creating a Drawer navigation​
 Step:4 – Creating Drawer Navigator
 Step:5 – Creating Home and Profile Screens, and import inside
App
 Step:6 – Creating Drawer Screens
Exercise : Group Work
 Go to the site https://sampleapis.com/
 Sample APIs
 A simple, no fuss, no mess, no auth playground for
learning RESTful or GraphQL APIs.
 Select any of the API List
 Avators
 BaseBall
 Beers
 FakeBank . . .
 Design appropriate UI for displaying the data
React Native Storage: Persisting data
 When building React Native applications, there are several
ways to persist data, with each having its own strong
advantage. The most popular ways to persist data in our React
Native application are
 AsyncStorage
 React Native SQLite 2
 Realm
 React Native Local MongoDB
Persist data using AsyncStorage
 It is a simple, asynchronous, unencrypted by default module that
allows you to persist data offline in React Native apps.
 The persistence of data is done in a key-value storage system.

 Persisting data in a mobile app has benefits such as when the user restarts
the app, the data or the setting variables being available to the user in the
state they left before closing the app.
 Security
 AsyncStorage encrypts none of the data saved. All objects are stored as
strings and must be serialized before they can be saved and likewise be de-
serialized before retrieval.
 We can perform three main actions with AsyncStorage: Set, Get,
and Delete:
 The setItem() method saves data to the AsyncStorage and allows a key and
a value. Here, the key is a string that the data or value is assigned to:
 The getItem() method allows us to get data back from AsyncStorage by
using the key the data was saved as.
 The removeItem() method removes data from AsyncStorage by using the
key to delete the stored data:
 The clear() method deletes or removes all the data from AsyncStorage. It
does not need a key because it deletes all the stored data:
 Installing the community module
 npm install @react-native-async-storage/async-storage
 Usage
 Async Storage can only store string data, so in order to store object
data you need to serialize it first.
 Fordata that can be serialized to JSON you can use
 JSON.stringify() when saving the data and
 JSON.parse() when loading the data.
 Importing
 import AsyncStorage from '@react-native-async-storage/async-storage';
 Storing Data
 setItem() is used both to add new data item (when no data for given key
exists), and to modify existing item (when previous data for given key exists).
 Storing string value​
 Storing object value​
 Reading data​
 getItem returns a promise that either resolves to stored value when
data is found for given key, or returns null otherwise.
 Reading string value
 Reading object value
Persist data using SQlite
 It’s very common for developers to use SQLite, a C-language
library, as the data-store in mobile applications.
 SQLite is an open-source SQL database that stores data to a text file
on a device. It supports all the relational database features.
 In order to access this database, we don’t need to establish any kind of
connections for it like JDBC, ODBC.
 We only have to define the SQL statements for creating and updating the
database. Access to it involves accessing the file system. This can be slow.
 Therefore, it is recommended to perform database operations asynchronously.
 Installing the community module
 npm install --save react-native-sqlite-storage
 Database Setup
 While working with React Native it provides two option:
 You can make the database in runtime.
 You can use the pre-populated database so that you can start working directly.
 How to Use react-native-sqlite-storage?
 Importing
 import SQLite from ‘react-native-sqlite-storage’
 Open the database
 let db = SQLite.openDatabase({ name: 'UserDatabase.db' });
 Basic operations
 Creating table
 Insert record
 Update record
 Delete record
 Select record
 Now, whenever you need to make some database call you can use db
variable to execute the database query.
56

Thank You
10/10/2023
57

Questions?
10/10/2023