How do I have an activity indicator display while the next page is loading, or when signing out?

Question

When signing out of my app, there is a few second pause before the server receives the response and then sends response to my phone. In the intermediate, nothing happens on the screen to illustrate what is going on. How would I implement this using the Activity Indicator in React Native? Below is some of my code:

Drawer Section:

    <Drawer.Section style={styles.bottomDrawerSection}>     
            <DrawerItem
            icon={({color, size }) => (
                <Icon 
                    name="exit-to-app"
                    color={color}
                    size={size}
                    />
            )}
            label= {i18n.t('out')}
            onPress = {() => {signOut()}} 
    
        />
        </Drawer.Section>

Code in source file that executes the sign out response:

 signOut: async() =>{
      let response = await client_instance.logout()
      console.log(response)
      try{
        await AsyncStorage.removeItem('userToken');
      } catch(e) {
        console.log(e);
        }
    dispatch({type: 'LOGOUT'});
   },

Answer 1

You can use react hooks https://reactjs.org/docs/hooks-intro.html

const [loading, setLoading] = useState(false)
return (
  <Drawer.Section style={styles.bottomDrawerSection}>     
        <DrawerItem
        icon={({color, size }) => (
            <Icon 
                name="exit-to-app"
                color={color}
                size={size}
                />
        )}
        label= {i18n.t('out')}
        onPress = {() => {signOut()}} 

    />
    </Drawer.Section>
    {loading ? <ActivityIndicator />: null}
)

Then update :

signOut: async() =>{
  setLoading(true)
  let response = await client_instance.logout()
  console.log(response)
  try{
    await AsyncStorage.removeItem('userToken');
    setLoading(false)
  } catch(e) {
    setLoading(false)
    console.log(e);
    }
dispatch({type: 'LOGOUT'});

},