React Native - Rest API calls using Fetch - Mobile App

Congratulations! You are standing in the right place!

In this article, we will discuss how to use Fetch to access the Rest API within a React application.

We are going to create a mobile app like below,


Implementation:

You must set up your local development environment. Follow the below link to set up your local environment.


After executing the commands mentioned in this link, a folder with a specified name is created with the following contents.



Next, we are going to edit the App.js file and write the below code.

App.js

import React, { useEffect, useState } from 'react';
import { FlatList, Text, View } from 'react-native';
export default App = () => {
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);
console.log(data);

useEffect(() => {
fetch('https://raw.githubusercontent.com/knowledgefactory4u/Javascript/
master/dummy.json')
.then((response) => response.json())
.then((json) => setData(json))
.catch((error) => console.error(error))
.finally(() => setLoading(false));
}, []);

return (

<View style={{ flex: 1, padding: 24, backgroundColor: 'purple' }}>
{isLoading ? <Text>Loading...</Text> :
(<View style={{ flex: 1, flexDirection: 'column', justifyContent: '
space-between' }}>
<Text style={{ fontSize: 20, color: 'white', textAlign: 'center' }}>
Fetch content using Fetch API</Text>
<Text style={{ fontSize: 18, color: 'white', textAlign: 'center' }}>
{data.title}</Text>
<Text style={{ fontSize: 14, color: 'white', textAlign: 'center',
paddingBottom: 10 }}>Articles:</Text>
<FlatList
data={data.articles}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => (
<Text style={{ color: 'white' }}>{item.id + '. ' + item.title}
</Text>
)}
/>
</View>
)}
</View>
);
};


Explanation

Fetch

In React Native, you can request data from an API over the network utilizing the fetch() method.
The syntax is simple as follows:

fetch('https://raw.githubusercontent.com/knowledgefactory4u
/Javascript/master/dummy.json')

We simply pass the URL to the fetch method to make a request.

useEffect

With useEffect, we invoke side effects from within functional components, which is a paramount concept to understand in the React Hooks. Working with the side effects invoked by the useEffect Hook may seem cumbersome at first, but we will ineluctably learn everything makes a plethora of sense.

useEffect(() => {
fetch('https://raw.githubusercontent.com/knowledgefactory4u
/Javascript/master/dummy.json')
.then((response) => response.json())
.then((json) => setData(json))
.catch((error) => console.error(error))
.finally(() => setLoading(false));
}, []);

Flatlist

Flatlist is a core component designed for the efficient exhibit of vertically scrolling lists of transmuting data, it superseded the ListView component and enhanced the facility of developers to deal with lists more facilely.

<FlatList
data={data.articles}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => (
<Text style={{ color: 'white' }}>{item.id + '. ' +
item.title}</Text>
)}
/>

View

The View is a core component designed for the efficient exhibit of vertically scrolling lists of transmuting data, it superseded the ListView component and enhanced the facility of developers to deal with lists more facilely.

<View style={{ flex: 1, padding: 24, backgroundColor: 'purple' }}>
{isLoading ? <Text>Loading...</Text> :
(<View style={{ flex: 1, flexDirection: 'column', justifyContent:
'space-between' }}>
<Text style={{ fontSize: 20, color: 'white', textAlign: 'center' }}>
Fetch content using Fetch API</Text>
<Text style={{ fontSize: 18, color: 'white', textAlign: 'center' }}>
{data.title}</Text>
<Text style={{ fontSize: 14, color: 'white', textAlign: 'center',
paddingBottom: 10 }}>Articles:</Text>
<FlatList
data={data.articles}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => (
<Text style={{ color: 'white' }}>
{item.id + '. ' + item.title}</Text>
)}
/>
</View>
)}
</View>


Run

sibinmuhammed@ladmin-H310M-S2:~$ react-native start

sibinmuhammed@ladmin-H310M-S2:~/knf-reactnative/KnowledgeFactoryDemo$ react-native run-android



More Topics,

Popular posts from this blog

Spring boot video streaming example-HTML5

Learn Java 8 streams with an example - print odd/even numbers from Array and List

Spring Boot + Mockito simple application with 100% code coverage

Spring Boot + OpenCSV Export Data to CSV Example

Custom Exception Handling in Quarkus REST API

DataTable-Pagination example with Spring boot, jQuery and ajax

Registration and Login with Spring Boot + Spring Security + Thymeleaf

Node JS mini projects with source code - free download

Spring boot web project free download:User Registration System

Java - Blowfish Encryption and decryption Example