ReactNative + Axios - HTTP GET POST Request Examples

Mr.Paresh Chavda

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

import {

ActivityIndicator,

FlatList,

Text,

View,

SafeAreaView,

Image,

} from 'react-native';

import axios from 'axios';

export default App = () => {

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

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

useEffect(() => {

const article = {title: 'React POST Request Example'};

const headers = {

Authorization: 'Bearer my-token',

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

};

axios

.post('https://reqres.in/api/articles', article, {headers})

.then((response) => console.log('res1', response));

axios

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

.then((Response) => {

console.log('res', Response);

if (Response.status === 200) {

// setData(Response.data.results);

setData(Response.data);

setLoading(false);

}

})

.catch((error) => {

console.log('error', error);

});

}, []);

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

return <Text children={item.searchScore} />;

};

return (

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

<View

style={{

flex: 1,

alignItems: 'center',

}}>

{isLoading ? (

<ActivityIndicator size={'large'} />

) : (

<FlatList

data={data}

keyExtractor={(item, index) => {

return index.toString();

}}

renderItem={({item, index}) => {

return (

<View

style={{

padding: 10,

margin: 10,

borderRadius: 10,

}}>

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

<Image

source={{uri: item.url}}

style={{width: '100%', height: 150}}></Image>

</View>

);

}}

/>

)}

</View>

</SafeAreaView>

);

};