Networking

    APIs

    Networking in React Native is built on two APIs: fetch and XMLHttpRequest. Both of these were designed to be compatible with browser APIs so that:

    • Web developers don't have to learn a new way to make network requests
    • Libraries built on top of these function as expected in React Native

    It's common to use the fetch API directly, since it's fairly powerful and high-level. It's rare to use XMLHttpRequest directly, since it's complex and low-level. If your networking needs are advanced (multi-part form requests, etc), you'll likely want to use a library that abstracts the details of these networking APIs.

    If you're looking for an abstraction layer, browser/node networking libraries like axios and superagent will still work in React Native.

    Fetch API

    Let's take a look at fetch, since it's powerful and comes with React Native out of the box. The Fetch API is promise-based, meaning we can use async/await.

    const response = await fetch(uri)

    Send a GET request to uri, returning a promise which represents a Response object. To access the data returned, you must either await response.text() or response.json().

    const json = await response.json()

    Parse the body of the response asynchronously as JSON.

    const text = await response.text()

    Get the body of the response as text.

    That's it!

    We can get started using fetch with just that! If you want to use fetch with custom request headers or for POST requests, read more about the API here at MDN.

    Example

    Here we'll fetch a list of posts and display them in a FlatList. Since fetch is asynchronous, our app won't have data to show right when it loads. We should instead show a loading state, e.g. an ActivityIndicator (spinner), while data loads. We should also be prepared to show an error message if fetching data fails.

    This example uses useReducer for managing data.

    Note: fetch may not work if you're using an older browser.

    Want to learn React Native in-depth?

    If you like React Native Express, you'll love my new book, Fullstack React Native: The complete guide to React Native! Throughout the book, we'll build 7 full apps, covering complex topics like navigation, gestures, and native modules. We don't assume any knowledge of React or newer JavaScript language features, so you can dive right in regardless of your experience level. The book comes in PDF, EPUB and MOBI formats.

    Looking for more help?

    Infinite Red sponsors React Native Express and is the premier React Native agency. They're also the team behind the React Native newsletter, podcast, and conference listed here. Get in touch at infinite.red/react-native for a proposal on your next project!