In React Native Expo, you can make API calls using fetch or axios. Since you’re already working with axios, I’ll show examples using both.
1. Using fetch
import React, { useEffect, useState } from 'react';
import { View, Text, ActivityIndicator, FlatList } from 'react-native';
const FetchExample = () => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const json = await response.json();
setData(json);
} catch (error) {
console.error('Error fetching data:', error);
} finally {
setLoading(false);
}
};
return (
<View>
{loading ? (
<ActivityIndicator size="large" color="blue" />
) : (
<FlatList
data={data}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => <Text>{item.title}</Text>}
/>
)}
</View>
);
};
export default FetchExample;
2. Using axios
Installation
First, install axios if you haven’t already:
npm install axios
Implementation
import React, { useEffect, useState } from 'react';
import { View, Text, ActivityIndicator, FlatList } from 'react-native';
import axios from 'axios';
const AxiosExample = () => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
setData(response.data);
} catch (error) {
console.error('Error fetching data:', error);
} finally {
setLoading(false);
}
};
return (
<View>
{loading ? (
<ActivityIndicator size="large" color="blue" />
) : (
<FlatList
data={data}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => <Text>{item.title}</Text>}
/>
)}
</View>
);
};
export default AxiosExample;
3. Making a POST Request
const postData = async () => {
try {
const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'New Post',
body: 'This is a new post',
userId: 1,
});
console.log('Response:', response.data);
} catch (error) {
console.error('Error posting data:', error);
}
};
Call postData() when needed, e.g., on a button press.
Let me know if you need modifications for your specific API! 🚀
