Show List
Tutorials > React Native > Interacting with APIs and data sources

Interacting with APIs and data sources

Interacting with APIs and data sources is an important aspect of building mobile apps with React Native. There are several ways to interact with APIs, including using the built-in fetch API, or using a library like Axios or jQuery. In this example, we will use the fetch API to retrieve data from a remote API.

Here's how to use the fetch API to retrieve data from a remote API in React Native:

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

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

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json => {
        setData(json);
        setLoading(false);
      })
      .catch(error => {
        console.error(error);
        setLoading(false);
      });
  }, []);

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

  return (
    <View style={{ flex: 1 }}>
      {data.map(item => (
        <View key={item.id}>
          <Text>{item.title}</Text>
        </View>
      ))}
    </View>
  );
};

export default MyComponent;

In this example, we are using the fetch API to retrieve a list of posts from a remote API. The data is stored in the data state variable, and the loading state variable is used to display a loading indicator while the data is being fetched.

The useEffect hook is used to fetch the data when the component is mounted. The first argument to useEffect is a function that is executed when the component is mounted, and the second argument is an array of dependencies, in this case an empty array because we only want to fetch the data once.

Once the data has been retrieved, it is displayed in a list using the map function.

This is just a simple example of how to interact with a remote API in React Native. You can also use other APIs, such as Axios or jQuery, to interact with data sources, and you can also use libraries like Redux to manage the state of your app and simplify the process of interacting with APIs and data sources.



Next: Debugging React Native applications

    Leave a Comment

  • captcha text