Axios library in React Native - Mini App: Build & Ship

Build: User List

This screen fetches and shows a list of users from a remote API using Axios. It displays user names in a scrollable list.

Target UI

-------------------------
|       User List       |
-------------------------
| • Loading...          |
|                       |
|                       |
|                       |
|                       |
-------------------------

Use Axios to fetch user data from https://jsonplaceholder.typicode.com/users

Show a loading text while fetching data

Display the user names in a scrollable list after data loads

Handle errors by showing an error message

Starter Code

React Native

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import axios from 'axios';

export default function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // TODO: Fetch user data with Axios here
  }, []);

  return (
    <View style={styles.container}>
      {/* TODO: Show loading, error or user list here */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff'
  },
  item: {
    fontSize: 18,
    paddingVertical: 10
  },
  error: {
    color: 'red',
    fontSize: 16
  }
});

Task 1

Task 2

Task 3

Task 4

Task 5

Task 6

Solution

React Native

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import axios from 'axios';

export default function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(response => {
        setUsers(response.data);
        setLoading(false);
      })
      .catch(() => {
        setError('Failed to load users');
        setLoading(false);
      });
  }, []);

  if (loading) {
    return (
      <View style={styles.container}>
        <Text>Loading...</Text>
      </View>
    );
  }

  if (error) {
    return (
      <View style={styles.container}>
        <Text style={styles.error}>{error}</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <FlatList
        data={users}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => <Text style={styles.item}>{item.name}</Text>}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff'
  },
  item: {
    fontSize: 18,
    paddingVertical: 10
  },
  error: {
    color: 'red',
    fontSize: 16
  }
});

This solution uses the Axios library to fetch user data from a public API when the component loads.

We use useEffect to run the fetch once after the screen appears.

While loading, it shows a simple 'Loading...' text.

If there is an error fetching data, it shows a red error message.

When data is loaded successfully, it displays the user names in a scrollable list using FlatList.

This approach keeps the UI responsive and handles errors gracefully.

Final Result

Completed Screen

-------------------------
|       User List       |
-------------------------
| Leanne Graham         |
| Ervin Howell          |
| Clementine Bauch      |
| Patricia Lebsack      |
| Chelsey Dietrich      |
| Mrs. Dennis Schulist  |
| Kurtis Weissnat       |
| Nicholas Runolfsdottir|
| Glenna Reichert       |
| Clementina DuBuque    |
-------------------------

When the screen loads, it shows 'Loading...' text.

After data loads, the list of user names appears.

If the fetch fails, an error message 'Failed to load users' is shown.

Stretch Goal

Add a pull-to-refresh feature to reload the user list when the user swipes down.

💡 Hint

Use FlatList's refreshing and onRefresh props to implement pull-to-refresh.