Networking

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 pretty simple 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 which abstracts the details of these networking APIs.

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

Fetch API

Let's take a look at fetch, since it's easy to use 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 ScrollView. Since fetch is asynchronous, our app may not have data when it loads. We should be prepared to show an ActivityIndicator (spinner) while data loads. We should also be prepared to show an error message if fetching data fails.

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

Networking

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 pretty simple 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 which abstracts the details of these networking APIs.

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

Fetch API

Let's take a look at fetch, since it's easy to use 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 ScrollView. Since fetch is asynchronous, our app may not have data when it loads. We should be prepared to show an ActivityIndicator (spinner) while data loads. We should also be prepared to show an error message if fetching data fails.

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