REST API Testing Tutorial Using Axios in React Native

Mr.Paresh Chavda

import React, {useEffect, useState} from 'react';

import {

ActivityIndicator,

FlatList,

Text,

View,

SafeAreaView,

Image,

Dimensions,

} from 'react-native';

import axios from 'axios';

const {width, height} = Dimensions.get('window');

export default App = () => {

const [isLoading, setLoading] = useState(true);

const [responseData, setData] = useState([]);

const [resData, setApiData] = useState([]);

useEffect(() => {

const headers = {

Authorization: 'Bearer my-token',

'My-Custom-Header': 'foobar',

};

// ::::::::::::::::::::::::::::::;-- GET API-1 ---:::::::::::::::::::::::::::

axios

// .get('https://jsonplaceholder.typicode.com/albums/1/photos')

.get('https://reqres.in/api/users?page=2')

.then((Response) => {

console.log('get api response', Response);

if (Response.status === 200) {

// setData(Response.data.results);

setData(Response.data.data);

setLoading(false);

}

})

.catch((error) => {

console.log('error', error);

})

.finally((succes) => {

console.log('Success', succes);

setLoading(false);

});

// --------------------------------- Second Api --------------------------

axios

.get('https://api.npms.io/v2/search?q=react')

.then((response) => {

console.log('response', response);

if (response.status === 200) {

setApiData(response.data.results);

setLoading(false);

}

})

.catch((error) => {

console.log('error', error);

});

}, []);

const renderitem = ({item, index}) => {

return (

<View

style={{

padding: 10,

margin: 5,

backgroundColor: 'pink',

width: width / 2.1,

height: width / 1.7,

}}>

<Image

source={{uri: item.avatar}}

style={{width: '100%', height: 150}}

/>

<View style={{flexDirection: 'row'}}>

<Text style={{fontSize: 15}}>{item.id} </Text>

<Text style={{fontSize: 15}}>{item.first_name} </Text>

<Text style={{fontSize: 15}}>{item.last_name} </Text>

</View>

<Text style={{fontSize: 15}}>Email: {item.email} </Text>

</View>

);

};

const renderitemSecond = ({item, index}) => {

return (

<View

style={{

padding: 10,

margin: 5,

backgroundColor: '#d3d3d3',

width: width / 2.1,

height: width / 1.7,

}}>

<View style={{margin: 10}}>

<Text style={{fontSize: 15}}>{item.searchScore} </Text>

<Text style={{fontSize: 15}}>{item.package.name} </Text>

<Text style={{fontSize: 15}}>{item.package.scope} </Text>

<Text style={{fontSize: 15}} numberOfLines={1}>

{item.package.description}

</Text>

<Text style={{fontSize: 15}}>{item.package.publisher.username} </Text>

<Text style={{fontSize: 15}}>{item.package.publisher.email} </Text>

<Text style={{fontSize: 15}}>

{item.package.maintainers.username}

</Text>

</View>

</View>

);

};

return (

<SafeAreaView style={{flex: 1}}>

<View

style={{

flex: 1,

}}>

{isLoading ? (

<ActivityIndicator size={'large'} />

) : (

<View>

<FlatList

horizontal={true}

showsHorizontalScrollIndicator={false}

data={responseData}

renderItem={renderitem}

keyExtractor={(item, index) => {

return index.toString();

}}

/>

<FlatList

horizontal={true}

showsHorizontalScrollIndicator={false}

data={resData}

renderItem={renderitemSecond}

/>

</View>

)}

</View>

</SafeAreaView>

);

};