search

software-mansion / react-native-screens

Native navigation primitives for your React Native app.
https://docs.swmansion.com/react-native-screens/
MIT License
3.1k stars 521 forks source link

[Fabric] Going back to previous screen disables interactions with Touchables with @react-navigation/bottom-tabs #2150

Open tboba opened 6 months ago

tboba commented 6 months ago

Description

Currently, on new architecture while using @react-navigation/bottom-tabs, while going to another screen and going back to previous one, interaction with all of touchables is frozen. This seems to be only the case for touchables though, since animations are working as usual (you can see on the preview shown below, that animations are working as usual).

Blocked interaction - Fabric https://github.com/software-mansion/react-native-screens/assets/23281839/30c07f93-8569-4a77-bb0c-664d259a76d8
(Not) blocked interaction - Paper https://github.com/software-mansion/react-native-screens/assets/23281839/e0ab1002-535b-48c6-ba3c-b0fcf8d440da
(Not) blocked interaction - Paper - without bottom tabs https://github.com/software-mansion/react-native-screens/assets/23281839/6d7fa56b-d20c-46fd-92cd-f7a6fbfc501b
(Not) blocked interaction - Paper - with detachInactiveScreens disabled https://github.com/software-mansion/react-native-screens/assets/23281839/945f81ba-b156-44ad-b8b5-4b1d8c82b576

Steps to reproduce

  1. Create a bottom tab navigator with two screens,
  2. Create on both screens touchables with navigating to one screen and coming back with goBack operation,
  3. Try to run the example with new architecture enabled,
  4. Try to navigate to another screen and press touchable on the second screen to go back,
  5. You shouldn't be able to navigate to another screen with touchable now.

You can run Test645 and Test691 to reproduce this scenario.

Snack or a link to a repository

https://snack.expo.dev/@tboba/5bc06c

Screens version

3.31.1

React Native version

0.74.1

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Android emulator

Device model

Pixel 7 Pro (API 34)

Acknowledgements

Yes

alduzy commented 3 months ago

Inspired by https://github.com/software-mansion/react-native-screens/issues/1975#issuecomment-1819084348 I found out that using RectButton from react-native-gesture-handler does work in this case as well.

hosseinmd commented 2 months ago

I have a crash when going back from bottom-tabs

This is my error log

java.lang.IllegalStateException: addViewAt: cannot insert view [80] into parent [82]: View already has a parent: [-1]  Parent: ScreensFrameLayout View: Screen
                                                                                                        at com.facebook.react.fabric.mounting.SurfaceMountingManager.addViewAt(SurfaceMountingManager.java:384)