Fetching Data in React Native using Axios: A Step-by-Step Guide

React Native is a popular framework for building mobile apps using JavaScript and React. One of the most common tasks when building a React Native app is fetching data from an API. Axios is a popular library for making HTTP requests in JavaScript, and it works seamlessly with React Native.

In this article, we will learn how to use Axios to fetch data in a React Native app.

First, we need to install Axios by running the following command in our terminal:

npm install axios

Once we have Axios installed, we can import it in our React Native component and use it to make a GET request to an API endpoint. Here's an example of how to do that:

import React, {useState, useEffect} from 'react';
import {
  View,
  Text,
  ActivityIndicator,
  FlatList,
  SafeAreaView,
} from 'react-native';
import axios from 'axios';

const App = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(
          'https://jsonplaceholder.typicode.com/posts',
        );
        setData(response.data);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <ActivityIndicator />
      </View>
    );
  }

  if (error) {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>An error occurred</Text>
      </View>
    );
  }

  const renderItem = ({item}) => {
    return (
      <View
        style={{
          padding: 10,
          marginVertical: 8,
          marginHorizontal: 16,
          backgroundColor: '#f9c2ff',
        }}>
        <Text style={{fontSize: 18}}>{item.title}</Text>
        <Text style={{fontSize: 14}}>{item.body}</Text>
      </View>
    );
  };

  return (
    <SafeAreaView
      style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
};

export default App;

In this example, we are using the useEffect hook to make the API request when the component is mounted. We are also using the useState hook to keep track of the data, loading state, and error state.

The axios.get method returns a Promise that resolves to the API response, which we can access using response.data. We are then using this data to render a list of post titles in the component.

We are also using a loading indicator and an error message to provide feedback to the user while the data is being fetched or if an error occurs.

This is just a simple example of how to use Axios to fetch data in a React Native app. You can customize this example to fit your specific use case, such as making a POST request, passing parameters to the API, and more.

In conclusion, Axios is a powerful library for making HTTP requests in React Native, and it makes it easy to fetch data from an API and use it in your app.