Interaction not disabled on previous screen until slightly after transition

[jonthanon]

The updateContainer method has logic to disable interaction during screen transitions, but it doesn't seem to work. I can still tap on buttons from the previous screen both during the transition and for a brief moment afterwards. Grainy GIF below, test app here.

Here's the pseudocode of updateContainer as I understand it:

• Detach all screens that still exist but aren’t active anymore
• Detach all screens that were active but don’t exist anymore
• If any screens are newly-active, then…
  • Detach any already-active screens and disable their user interaction
  • Attach all active screens
• If anything changed to/from active and there’s only one active screen, then…
  • Enable user interaction on the one active screen

I noticed that only screens that were already active (i.e. the screen is currently active and was already in _activeScreens) are detached and have their user interaction disabled. Here's what I observe stepping through that method when a new screen is pushed. There are 4 calls to updateContainer, and the animated transition occurs between calls 3 and 4:

1. First call
   • Only the first screen is present and is already inactive
   • It gets removed from the active list and detached
2. Second call
   • Both the first and second screens are now present
   • First screen is inactive, second screen is active
   • Neither screen has its user interaction disabled, because this only happens for already-active screens
   • Second screen gets attached
   • Since things changed and there's only one active screen, the second screen's user interaction is enabled
3. Third call
   • Both screens still present
   • Both screens are now active
   • Only the second screen gets detached and has its user interaction disabled, because this only happens for already-active screens
   • Both screens attached
4. Fourth call (transition has just happened)
   • Both screens present
   • First screen is now inactive again
   • First screen gets detached
   • Since things changed and there's only one active screen, the second screen's user interaction is enabled

So, during the transition, the second screen's user interaction is enabled, disabled, and enabled again. Notice that the user interaction for the first screen is never changed. That said, if I observe the actual value of userInteractionEnabled for the two screens' corresponding UIViews at the start and end of updateContainer, I see wildly different things. The first screen always starts enabled, and is disabled by the end of the method. The second screen is usually enabled throughout, except for the fourth/final call, when it starts out disabled and ends up enabled. So clearly there are some side effects going on somewhere that I'm missing.

In any case, the result is that I can still tap on buttons in the previous screen both during the transition and for a brief moment afterward. At some point, possibly during or after the fourth call to updateContainer, something gestures to stop being triggered on the first screen, and enables them on the second screen, but it takes longer than it should (probably related to the delay people are seeing here).

[sayres]

#188

[alimek]

    "react-navigation": "^4.0.10",
    "react-navigation-drawer": "^2.2.2",
    "react-navigation-stack": "^1.9.4",
    "react-navigation-tabs": "^2.5.6",
    "react-native-screens": "^1.0.0-alpha.23",

is anyone seeing that this problem is still happening?

I have exactly the same problem, i have list view and clicking element pushing new screen to stack, and while transition is happening I can click on any place on the screen and it will trigger action from previous screen.

just tested that without calling useScreens() it is not happening.

[WoLewicki]

Does the issue still exist in the newest version? If so, can you provide a repo with minimal configuration showing the issue?

[alimek]

I will be updating deps next week in my app, so will check and post update here.