How to prevent user interaction during screen transition animation?

Question

When navigating between screens using the StackNavigator with a fade transition, a user is able to click during the transition animation and possibly hit a TouchableOpacity on the screen that is being navigated away from. The TouchableOpacity registers the hit and thus the app responds accordingly. This is causing issues for "fast clicking" users where they click a button to navigate to a new screen and immediately click where they think a new button will be, but in reality is clicking a button on the previous screen.

Is there a way to prevent any user interaction during these transition animations? I have tried setting the transition duration to 0 like so:

transitionConfig: () => ({
    transitionSpec: {
      duration: 0
    }
})

but the issue still occurs.

I do not want to disable the animation completely, because it is quick enough for most users and they like the animation.

Answer 1

So in your case you can do several things

• You can use React Native Activity Indicator -> View
• You can use Overlay Library -> react-native-loading-spinner-overlay -> View GitHub
• If you like to make loading like facebook / instagram -> then use react-native-easy-content-loader -> View GitHub