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

[tboba]

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]

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]

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)

[mobinni]

Any update on this one, still happening on 4.3.0 I have noticed

[kkafar]

@mobinni I've just attempted to reproduce the issue & I haven't been able to. I believe this could've been fixed with #2466.

https://github.com/user-attachments/assets/b552024c-3fd4-4af6-83c7-0c1fb5de1e61

Therefore the fix should be available with 4.6.0-beta.0 (stable coming next week most likely).

Ping me in case 4.6.0-beta.0 does not resolve the issue I'll reopen.