Q: How to show ActivityIndicator at the time of data loading in React Native I am fetching data from the api in flatlist I want to show ActivityIndicator at the time  of data loading.
I have implemented code to do that but its not showing ActivityIndicator.
Below is my code:
App.js
import React from 'react';
import {StatusBar, StyleSheet} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import List from './components/list';
import Detail from './components/details';

const Stack = createStackNavigator();

const App = () => {

return (
  
  <NavigationContainer>
  <StatusBar barStyle="dark-content" backgroundColor="#8E24AA"/>
  <Stack.Navigator>
    <Stack.Screen 
    name="Home" 
    component={List}
    options={{ 
      headerStyle: {
        backgroundColor: '#AB47BC',
      },
      headerTintColor: '#fff' }} />

    <Stack.Screen 
    name="Detail" 
    component={Detail}
    options={{ 
      headerStyle: {
        backgroundColor: '#AB47BC',
      },
      headerTintColor: '#fff' }} />  
  </Stack.Navigator>
</NavigationContainer>   

  )
}

export default App;

List.js
import React, {useEffect,useState} from 'react';
import {View,Text,StyleSheet,ActivityIndicator,FlatList} from 'react-native';

const List = () => {

const[post,setPost] = useState([]);
const[isLoading,setLoading] = useState(true);

useEffect(() => {
    
    const url = 'http://api.duckduckgo.com/?q=simpsons+characters&format=json';
    fetch(url).then((res) => res.json())
    .then((resp) => {
     setPost(resp.RelatedTopics);
     setLoading(false); 
    }).catch((err) => alert(err));
},[]);

    return(
     
       <View style={{flex:1}}>

         { isLoading ? <ActivityIndicator/> : <FlatList 
            data = {post} 
            keyExtractor = {(item) => item.FirstURL} 
            renderItem = {({item}) => <Text style={styles.my}>{item.Text.split('-', 1)[0]}</Text>}/>  
         }
      
      </View>
    );

};

const styles = StyleSheet.create({
 my:{
     marginBottom: 15,
     marginTop: 15,
     marginLeft: 15
   }
});

export default List; 

Someone let me know what I am doing wrong in above code.

A: You are never setting isLoading to false, you can do this when the data is fetched (in the then block)
useEffect(() => {
  const url = 'http://api.duckduckgo.com/?q=simpsons+characters&format=json';
  fetch(url).then((res) => res.json())
    .then((resp) => {
      setPost(resp.RelatedTopics);
      setLoading(false); // loaded
    })
    .catch((err) => alert(err));
}, []);

This way, when the data is loaded, the state will update causing the component to re-render.

A: <View style={{flex:1}}>

         { isLoading ? <ActivityIndicator color="#000"/> : <FlatList 
            data = {post} 
            keyExtractor = {(item) => item.FirstURL} 
            renderItem = {({item}) => <Text style={styles.my}>{item.Text.split('-', 1)[0]}</Text>}/>  
         }
      
      </View>

Apply the flex:1 to cover entire screen.
