? React Native Empty List & Loading

✨ Quick Overview

In React Native applications, handling empty lists and loading states is essential for providing a smooth user experience. Instead of showing a blank screen, developers display loaders, placeholders, or friendly messages while data is being fetched or when no data is available.

? Key Concepts

• Loading state using ActivityIndicator
• Empty list UI using ListEmptyComponent
• Conditional rendering
• Improved user feedback

? Syntax / Theory

React Native provides the FlatList component to render scrollable lists efficiently. It supports a special prop called ListEmptyComponent which is rendered when the data array is empty.

? Code Example(s)

// FlatList with loading and empty state handling
import React, { useEffect, useState } from "react";
import { View, Text, FlatList, ActivityIndicator } from "react-native";

export default function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Simulate network request
    setTimeout(() => {
      setData([]); // Or data from API
      setLoading(false);
    }, 2000);
  }, []);

  if (loading) {
    return ;
  }

  return (
     index.toString()}
      ListEmptyComponent={No data available}
      renderItem={({ item }) => {item.name}}
    />
  );
}

? Live Output / Explanation

? Interactive / Visual Example

Use the controls below to simulate how a Mobile App reacts to data fetching, receiving data, or receiving an empty result.

? Use Cases

• Product lists with no results
• Chat screens with no messages
• Search results returning zero matches
• First-time app usage screens