React Native - Rest API calls using Axios - Mobile App development
Congratulations! You are standing in the right place!
In this article, we will discuss how to use Axios 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.
import React, { useEffect, useState } from 'react';
import { FlatList, Text, View } from 'react-native';
import axios from 'axios'
export default App = () => {
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);
console.log(data);
useEffect(() => {
axios('https://raw.githubusercontent.com/knowledgefactory4u/Javascript/
master/dummy.json')
.then((response) => setData(response.data))
.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 Axios</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
Axios
Axios is a Javascript library used to make HTTP requests and it fortifies the Promise API that is native to JS ES6.
axios('https://raw.githubusercontent.com/knowledgefactory4u/Javascript
/master/dummy.json')
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(() => {
axios('https://raw.githubusercontent.com/knowledgefactory4u
/Javascript/master/dummy.json')
.then((response) => setData(response.data))
.catch((error) => console.error(error))
.finally(() => setLoading(false));
}, []);
Axios is a Javascript library used to make HTTP requests and it fortifies the Promise API that is native to JS ES6.
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,
