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,
