Using Axios in React Native

Axios is a popular HTTP library that adds several conveniences over the built-in fetch() function (see the following chapter): automatic JSON conversion, interceptors, better error objects, and baseURL configuration.

1. Description

Axios works identically in React Native to how it works in a browser or Node.js, since it internally builds on XMLHttpRequest, which React Native's JavaScript environment also provides. Install via npm install axios, then import it directly.

2. Short example

import axios from 'axios';

const response = await axios.get('https://api.example.com/users');
console.log(response.data); // already a JS object, no .json() needed

3. Complete project: a GitHub user search

npx create-expo-app axios-demo
cd axios-demo
npm install axios

api/githubClient.js

import axios from 'axios';

const githubClient = axios.create({
  baseURL: 'https://api.github.com',
  timeout: 8000,
});

githubClient.interceptors.response.use(
  (response) => response,
  (error) => {
    console.log('API error:', error.message);
    return Promise.reject(error);
  }
);

export default githubClient;

App.js

import { useState } from 'react';
import { View, TextInput, Button, Text, Image, ActivityIndicator, StyleSheet } from 'react-native';
import githubClient from './api/githubClient';

export default function App() {
  const [username, setUsername] = useState('facebook');
  const [profile, setProfile] = useState(null);
  const [loading, setLoading] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);

  async function search() {
    setLoading(true);
    setErrorMessage(null);
    try {
      const response = await githubClient.get(`/users/${username}`);
      setProfile(response.data);
    } catch (error) {
      if (error.response?.status === 404) {
        setErrorMessage('User not found.');
      } else {
        setErrorMessage('Network error, please try again.');
      }
      setProfile(null);
    } finally {
      setLoading(false);
    }
  }

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value={username}
        onChangeText={setUsername}
        placeholder="GitHub username"
        autoCapitalize="none"
      />
      <Button title="Search" onPress={search} />
      {loading && <ActivityIndicator style={styles.spinner} />}
      {errorMessage && <Text style={styles.error}>{errorMessage}</Text>}
      {profile && (
        <View style={styles.profile}>
          <Image source={{ uri: profile.avatar_url }} style={styles.avatar} />
          <Text style={styles.name}>{profile.name ?? profile.login}</Text>
          <Text>{profile.public_repos} public repos</Text>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60, paddingHorizontal: 24 },
  input: { borderWidth: 1, borderColor: '#d1d5db', borderRadius: 8, padding: 10, marginBottom: 10 },
  spinner: { marginTop: 20 },
  error: { color: '#dc2626', marginTop: 12 },
  profile: { alignItems: 'center', marginTop: 24 },
  avatar: { width: 96, height: 96, borderRadius: 48, marginBottom: 12 },
  name: { fontSize: 18, fontWeight: 'bold' },
});

4. Explanation

axios.create({{ baseURL, timeout }}) creates a dedicated client instance with a fixed base URL – every call afterward only needs to give the path (/users/facebook instead of the full URL).
interceptors.response.use() intercepts EVERY response/error of this client centrally – used here for unified error logging, in real apps often also for automatic token refresh.
error.response?.status – Axios distinguishes between a genuine HTTP error status (server responded, but e.g. 404) and a network error (no response received) – response is undefined in the second case, hence ?..
response.data is already the parsed JSON object – unlike fetch(), no manual await response.json() is needed (see the next chapter for a direct comparison).

5. Outputs

Ausgabe

An input field (pre-filled with "facebook") and a "Search" button. After tapping, a loading spinner briefly appears, then a round profile photo, the name ("Meta"), and the number of public repositories. For a non-existent username, red text "User not found." appears instead.