Loading and error states in React Native

Introduction

Loading and error states help users know what is happening in the app. They show when data is loading or if something went wrong.

When fetching data from the internet and waiting for a response.

When submitting a form and waiting for confirmation.

When loading images or files that take time to appear.

When an app cannot connect to the server and needs to show an error.

When a process takes time and you want to keep the user informed.

Syntax

React Native

function MyComponent() {
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  if (loading) {
    return <Text>Loading...</Text>;
  }

  if (error) {
    return <Text>Error: {error}</Text>;
  }

  return <Text>Data loaded successfully!</Text>;
}

Use loading state to show a spinner or message while waiting.

Use error state to show a friendly message if something goes wrong.

Examples

Show a loading message while data is being fetched.

React Native

const [loading, setLoading] = React.useState(true);

if (loading) {
  return <Text>Loading data...</Text>;
}

Show an error message if there is a problem.

React Native

const [error, setError] = React.useState('Network error');

if (error) {
  return <Text>Error: {error}</Text>;
}

Use a spinner to show loading visually.

React Native

if (loading) {
  return <ActivityIndicator size="large" color="#0000ff" />;
}

Sample App

This app shows a button to load data. When pressed, it shows a spinner for 2 seconds. Then it randomly shows data or an error message.

React Native

import React from 'react';
import { View, Text, Button, ActivityIndicator } from 'react-native';

export default function LoadingErrorExample() {
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [data, setData] = React.useState(null);

  const fetchData = () => {
    setLoading(true);
    setError(null);
    setData(null);

    setTimeout(() => {
      const success = Math.random() > 0.5;
      if (success) {
        setData('Here is your data!');
        setLoading(false);
      } else {
        setError('Failed to load data.');
        setLoading(false);
      }
    }, 2000);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {loading && <ActivityIndicator size="large" color="#0000ff" />}
      {error && <Text style={{ color: 'red', marginBottom: 10 }}>{error}</Text>}
      {data && <Text style={{ marginBottom: 10 }}>{data}</Text>}
      {!loading && !data && !error && <Text>Press the button to load data.</Text>}
      <Button title="Load Data" onPress={fetchData} />
    </View>
  );
}

Important Notes

Always give users feedback when waiting or when errors happen.

Use clear and simple messages for errors.

Spinners or progress bars help users understand the app is working.

Summary

Loading states show when the app is busy getting data.

Error states show when something goes wrong.

Use states in React Native to control what the user sees.