How to prevent user interaction during screen transition animation?-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

you need to flag screen before navigating away; disabling all touchs.

an easy way would be to have a reusable hook that return a transparent absolute positioned View that cover entier page and a callback to enable it;

so you flow will be; enable this which will overlap whole screen and capture any clicks basically disabling them;

something more like:

function useOverlay(){
 const [isVisible, toggle] = React.useState(false);
 const Component = React.memo(()=><View style={styles.transparentAbsolute} />,[])


  return [toggle, isVisible ? Component : null];
}

then inside your Screen before you call navigate just call toggle

and include Component at top of you screen;

export default function TabOneScreen({ navigation }: RootTabScreenProps<'TabOne'>) {
  const [ toggle, component ]  = useOverlay();
  return (
    <View style={styles.container}>
      {component}
      <Button onPress={()=>{toggle(true); navigation.navigate('Home');} title="go home" />
    </View>
  );
}