react-native-screens: Interactions briefly unresponsive after navigating between screens

Our team has been doing some experimentation with useScreens in react-navigation. One thing I noticed was the time it takes for a screen to respond to touch events seems longer with react-native-screens enabled. Purely anecdotal, but trying to nav back and forth between screens pretty consistently takes 1 extra quick tap with useScreens compared to not using it.

Seeking feedback if this could be react-native-screens specific, the implementation in react-navigation, or possibly something in our own app.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 5
  • Comments: 27 (14 by maintainers)

Most upvoted comments

@Hirbod so does it only happen in modals, or in all presentation kinds? Also, could you somehow show the difference in the time of the ability to click, scroll in the next/previous screen when native-stack compared to e.g. Settings app and App Store app (there is a modal there when you click your profile icon). I can spot the delay in those apps too, but probably I am missing something. Also, when providing stackAnimation: 'none', you can click the buttons immediately, which would suggest that there is no delay introduced by us. But here too, I might be missing something.

@WoLewicki By using import { createStackNavigator } from 'react-navigation/stack' and also calling enableScreens, are we even getting the native navigation behavior at all? I don’t quite get what’s the behavior with the regular createStackNavigator and enableScreens. I thought this library makes sense only with import { createNativeStackNavigator } from 'react-native-screens/native-stack'.

Also, the behavior with createNativeStackNavigator is not the same in iOS as regular native apps. With a regular native app, there is no delay at all for interacting with a new view controller that was just pushed to the navigation stack. With react-native-screens + createNativeStackNavigator (+ enableScreens obivously), there’s a slight delay (probably 100-500ms?) where you can’t tap on new elements after the transition ended. That is the issue that I think most people in this thread are reporting.

Hey @kmagiera, you can find a demo app here https://github.com/jack828/RNScreenDemo. I’ve written some setup instructions in the readme.

To demonstrate the issue:

First, comment out the line here. Rapidly press the navigation button - you’ll notice it responds immediately and without delay. Then, add the line back in, and try again - you’ll notice a significant delay before the button is “accepting” touch events again.

Unfortunately #188 does not help, as I’ve only seen this on android. (iOS untested)

Please let me know if this is enough information for you!

EDIT: I can’t find the issue but someone mentioned this change in this file https://github.com/kmagiera/react-native-screens/blob/d4636d31302da01a12a711510ebad729d5d7558b/android/src/main/java/com/swmansion/rnscreens/Screen.java#L135

-   return mTransitioning ? PointerEvents.NONE : PointerEvents.AUTO;
+   return PointerEvents.AUTO;

Which, fixes the issue for screens that are not the “home” screen. Issue still occurs when trying to navigate from HomeScreen (see demo app)

EDIT 2: boooyahhh I found it https://github.com/kmagiera/react-native-screens/issues/61#issuecomment-525418749

Hey all. I’m not really sure the details provided here are enough for me to look into. Please check the linked issues and in particular whether #188 fixes the problem.

I’d be happy to take a look or provide guidance but for that I’d need:

  1. a minumum repro scenario
  2. some video or instructions on how to reproduce it useing the provided code
  3. confirmation whether #188 fixes the problem (there are not enough details on #188 apparently but we can work on improving the PR description if it fixes the problem)