How to implement Activity indicator to render until flat list data is displayed? React Native

Question

I have a flat list with some hardcoded data. How can I implement the Activity indicator to spin and to be displayed until the flat list data is completely displayed on the screen? Below is my code. Thanks

import React, {useState} from 'react';
import { View, FlatList, TouchableOpacity, ActivityIndicator } from 'react-native';

import { MainScreenCard } from '../mainScreen.components/mainScreen.card';
import { Spacer } from '../assets.driveAround/spacer';

export const MainScreen = ({navigation}) => {
  
  return(
    <>
  <FlatList
      data={[
        { name: 1 },
        { name: 2 },
        { name: 3 },
        { name: 4 }
      ]}
      renderItem={() => (
        <TouchableOpacity onPress={() => navigation.navigate("Login")}>
        <Spacer position="bottom" size="large">
          <MainScreenCard/>
        </Spacer>
        </TouchableOpacity>
      )}
      keyExtractor={(item) => item.name}
      contentContainerStyle={{ padding: 16 }}
    />
    </>
);
}

Answer 1

There are two main options depending on how you want to refresh. If you want to pull from the top of the screen to refresh provide it a refresh control https://reactnative.dev/docs/refreshcontrol

      <ScrollView
        contentContainerStyle={styles.scrollView}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }
      >
        <Text>Pull down to see RefreshControl indicator</Text>
      </ScrollView>

Otherwise, another simple option is to use an ActivityIndicator to show a spinner overtop of the view https://reactnative.dev/docs/activityindicator

const [loading, setLoading] = useState(false)

...

<ActivityIndicator size="large" color="#00ff00" animating={loading}/>