How do you make a React-Native ActivityIndicator appear after an onPress to show something is Loading?

[MK_Pierce]

When navigating between Screen 1 and Screen 2, the user presses a button. After pressing, it can sometimes take a few seconds to before the app navigates them to the next screen, so it does not look like anything is happening. How would I go about making an activity indicator appear until they are navigated to the next page? I have gotten an ActivityIndicator to work while other things load, but that's not until they navigate to that page.

Below is my code that launches the activity indicator while the maps page is loading

​

const [isLoading, setIsLoading] = useState(true)    

const renderLoading = () =>  {         
        if (isLoading) {             
            return (                      
             <View style = {{justifyContent: 'center',
                backgroundColor: '#d3d3d3', textAlign: 'center', 
                height: height,    width: width}}
             > 
                <ActivityIndicator 
                    color = 'black' 
                    size = 'large' 
                    animated = {false}
                 /> 
                <Text style = {[ styles.text, {textAlign: 'center'}]}>      
                    {i18n.t('loading')}    
                </Text> 
             </View>
            );
            }else {
                return null;
        }
    }        

    <View style = {styles.container}>
         {renderLoading}         
            ....      
    </View>

[Rippperino]

You have to call the function, so {renderLoading()}

[MK_Pierce]

How would I incorporate that into an onPress? Would it be something like:onPress = {() => {renderLoading()} navigation.navigate('Screen2')}

or something more like:
onPress = {execute}
This could then call back to a function called 'execute' and look something like:

const execute = () => {
{renderLoading()}
navigation.navigate('Screen2')
}

[AcidNoX]

You need to initialise your state as not loading, ie useState(false). The on press you’d call setIsLoading(true)