Networking in React Native is built on two APIs:
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
superagent will still work in React Native.
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
const response = await fetch(uri)
GET request to
uri, returning a promise which represents a
Response object. To access the data returned, you must either await
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.
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.
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?