fix(Android,Fabric): pressables losing focus on screens with formSheet presentation (#2788)

## Description

This PR relates to new architecture only.

Currently, the pressables on form sheet lose focus on `move` action.
This is the same problem we had with `Pressables` in screen & header on
new architecture.
See: #2466

Basically the information about sheet position is different between
`ShadowTree` (ST) and `HostTree` (HT), which leads to losing focus due
to how pressables
are now handled on new architecture.

**Simplified description** of basically what happens when you click a
pressable on new arch is as follows (Android):

1. The gesture is detected after the host platform dispatches touch
event (touch events on Android are dispatched in top-down manner)
[(link)](https://github.com/facebook/react-native/blob/d6ca25b0c1a0aeed3507ec3c2f65e453e2700dc2/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/JSTouchDispatcher.java#L81-L105)
2. The JS responder is set & touch event dispatched - therefore
pressable is always clickable,
3. Moreover, the JS responder is [measured **IN THE
ST**](https://github.com/facebook/react-native/blob/d6ca25b0c1a0aeed3507ec3c2f65e453e2700dc2/packages/react-native/Libraries/Pressability/Pressability.js#L805-L810)
3. When you start moving your finger, the platform is still the source
of motion events, and target [coordinates are **read from HOST
TREE**](#2466)
4. Motion event (with platform measurement (HT)!!!) is then [compared in
JS with responder measurements based on
ST](https://github.com/facebook/react-native/blob/d6ca25b0c1a0aeed3507ec3c2f65e453e2700dc2/packages/react-native/Libraries/Pressability/Pressability.js#L831-L8750)

Therefore, any inconsistency here leads to responder losing focus.

Reference:

1.
[`TouchesHelper.createPointersArray`](https://github.com/facebook/react-native/blob/ac97177651cf369783ca93fac50c2824b484abef/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/events/TouchesHelper.kt#L37)
2. [Responder
measurement](https://github.com/facebook/react-native/blob/d6ca25b0c1a0aeed3507ec3c2f65e453e2700dc2/packages/react-native/Libraries/Pressability/Pressability.js#L805-L810)
3. [Gesture start detection
(Android)](https://github.com/facebook/react-native/blob/d6ca25b0c1a0aeed3507ec3c2f65e453e2700dc2/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/JSTouchDispatcher.java#L81-L105)
4. [Gesture move handling
(Android)](https://github.com/facebook/react-native/blob/d6ca25b0c1a0aeed3507ec3c2f65e453e2700dc2/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/JSTouchDispatcher.java#L137-L147)
5. [Checking whether native touch is in responder
region](https://github.com/facebook/react-native/blob/d6ca25b0c1a0aeed3507ec3c2f65e453e2700dc2/packages/react-native/Libraries/Pressability/Pressability.js#L831-L875)

What is bewildering is that it works on iOS, despite the fact, that e.g.
when using React inspector the views are completely out of place in
ShadowTree.
I haven't debugged the iOS part to the very bottom, but my suspicion is
as follows:

1. The form sheet on Android is mounted in subtree under react root
view, while on iOS it is mounted under separate `UITransitionView`
(different subtree of window),
2. additionally we use `RNSModalScreen` component on iOS, which has
shadow node with `RootNodeKind` (measurements in subtree of its shadow
node are done relative to it),
3. There is no root view / any react view above it -> native measurement
(done by react-native) might also think that its positioned at (0, 0)
(same as in shadow tree).

This is something to verify in the future. Opened ticked on the board
for it.

## Changes

The sheet now sends updates to the shadow tree at following moments:

1. layout (including initial one),
2. sheet detent change to any stable state (could consider here not
sending the update when the sheet is hidden, added to project board),

I'm not sending updates on every sheet move (`View.top` change), to
avoid clogging the JS thread (and later UI), whole advantage of our
sheet is that it feels smooth (given sensible Android device).
However, it could be considered in case of any further issues.

Please note, that between the event syncs or in case the JS thread is
blocked / clogged, this still will be a problem. However, any JS would
lag, not only pressables and it's not down to us.

Commits:

- **Prevent modal content from disappearing**
- **Add comment that createShadowNode is used only on old arch**
- **Add comment on threading on NativeProxy mechanisms**
- **Simplify code in RNSModalScreenShadowNode.cpp**
- **Make modal screen component selection more clear in Screen.tsx**
- **Add `headerHeight` to diff prop list when determining need for
shadow state update**
- **Add pressables to form sheet example!**
- **Send updates to shadow tree on form sheet layout changes in
appropriate moments**

### Recordings

| before | after |
| -- | -- |
| <video
src="https://github.com/user-attachments/assets/b5bbb149-61da-41d1-b6a4-73dd89eb1f92"
alt="before" /> | <video
src="https://github.com/user-attachments/assets/ce5c89c0-7215-4ebb-a347-fa50946308f4"
alt="after" /> |






## Test code and steps to reproduce

`TestFormSheet`, open the sheet, play with it & see that pressables
work!

## Checklist

- [x] Included code example that can be used to test this change
- [ ] Ensured that CI passes

Author: kkafar

android/src/fabric/java/com/swmansion/rnscreens/FabricEnabledViewGroup.kt

@@ -14,8 +14,9 @@ abstract class FabricEnabledViewGroup(
 ) : ViewGroup(context) {
     private var mStateWrapper: StateWrapper? = null
 
-    private var lastSetWidth = 0f
-    private var lastSetHeight = 0f
+    private var lastWidth = 0f
+    private var lastHeight = 0f
+    private var lastHeaderHeight = 0f
 
     fun setStateWrapper(wrapper: StateWrapper?) {
         mStateWrapper = wrapper
@@ -42,14 +43,16 @@ abstract class FabricEnabledViewGroup(
         // Check incoming state values. If they're already the correct value, return early to prevent
         // infinite UpdateState/SetState loop.
         val delta = 0.9f
-        if (abs(lastSetWidth - realWidth) < delta &&
-            abs(lastSetHeight - realHeight) < delta
+        if (abs(lastWidth - realWidth) < delta &&
+            abs(lastHeight - realHeight) < delta &&
+            abs(lastHeaderHeight - realHeaderHeight) < delta
         ) {
             return
         }
 
-        lastSetWidth = realWidth
-        lastSetHeight = realHeight
+        lastWidth = realWidth
+        lastHeight = realHeight
+        lastHeaderHeight = realHeaderHeight
         val map: WritableMap =
             WritableNativeMap().apply {
                 putDouble("frameWidth", realWidth.toDouble())

android/src/fabric/java/com/swmansion/rnscreens/NativeProxy.kt

@@ -41,7 +41,8 @@ class NativeProxy {
         }
     }
 
-    // Called from native
+    // Called from native. Currently this method is called from MountingCoordinator thread,
+    // which usually is not UI thread.
     @DoNotStrip
     public fun notifyScreenRemoved(screenTag: Int) {
         // Since RN 0.78 the screenTag we receive as argument here might not belong to a screen

android/src/main/java/com/swmansion/rnscreens/Screen.kt

@@ -103,6 +103,9 @@ class Screen(
             field = value
         }
 
+    private val isNativeStackScreen: Boolean
+        get() = container is ScreenStack
+
     init {
         // we set layout params as WindowManager.LayoutParams to workaround the issue with TextInputs
         // not displaying modal menus (e.g., copy/paste or selection). The missing menus are due to the
@@ -173,23 +176,31 @@ class Screen(
         r: Int,
         b: Int,
     ) {
-        if (container is ScreenStack && changed) {
+        // In case of form sheet we get layout notification a bit later, in `onBottomSheetBehaviorDidLayout`
+        // after the attached behaviour laid out this view.
+        if (changed && isNativeStackScreen && !usesFormSheetPresentation()) {
             val width = r - l
             val height = b - t
 
-            if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-                updateScreenSizeFabric(width, height, t)
-            } else {
-                updateScreenSizePaper(width, height)
-            }
+            dispatchShadowStateUpdate(width, height, t)
 
-            footer?.onParentLayout(changed, l, t, r, b, container!!.height)
+            // FormSheet has no header in current model.
             notifyHeaderHeightChange(t)
+        }
+    }
 
-            if (!BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-                maybeTriggerPostponedTransition()
-            }
+    internal fun onBottomSheetBehaviorDidLayout(coordinatorLayoutDidChange: Boolean) {
+        if (!usesFormSheetPresentation()) {
+            return
+        }
+        if (coordinatorLayoutDidChange && isNativeStackScreen) {
+            dispatchShadowStateUpdate(width, height, top)
         }
+        if (!BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+            maybeTriggerPostponedTransition()
+        }
+
+        footer?.onParentLayout(coordinatorLayoutDidChange, left, top, right, bottom, container!!.height)
     }
 
     private fun maybeTriggerPostponedTransition() {
@@ -214,6 +225,21 @@ class Screen(
         )
     }
 
+    /**
+     * @param offsetY ignored on old architecture
+     */
+    private fun dispatchShadowStateUpdate(
+        width: Int,
+        height: Int,
+        offsetY: Int,
+    ) {
+        if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+            updateScreenSizeFabric(width, height, offsetY)
+        } else {
+            updateScreenSizePaper(width, height)
+        }
+    }
+
     val headerConfig: ScreenStackHeaderConfig?
         get() = children.find { it is ScreenStackHeaderConfig } as? ScreenStackHeaderConfig
 
@@ -487,6 +513,11 @@ class Screen(
         isStable: Boolean,
     ) {
         dispatchSheetDetentChanged(detentIndex, isStable)
+        // There is no need to update shadow state for transient sheet states -
+        // we are unsure of the exact sheet position anyway.
+        if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED && isStable) {
+            updateScreenSizeFabric(width, height, top)
+        }
     }
 
     private fun dispatchSheetDetentChanged(

android/src/main/java/com/swmansion/rnscreens/ScreenStackFragment.kt

@@ -543,6 +543,14 @@ class ScreenStackFragment :
             }
         }
 
+        override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
+            super.onLayout(changed, l, t, r, b)
+
+            if (fragment.screen.usesFormSheetPresentation()) {
+                fragment.screen.onBottomSheetBehaviorDidLayout(changed)
+            }
+        }
+
 //        override fun reactTagForTouch(touchX: Float, touchY: Float): Int {
 //            throw IllegalStateException("Screen wrapper should never be asked for the view tag")
 //        }

android/src/main/java/com/swmansion/rnscreens/ScreenStackViewManager.kt

@@ -61,6 +61,7 @@ class ScreenStackViewManager :
         index: Int,
     ): View = parent.getScreenAt(index)
 
+    // Old architecture only.
     override fun createShadowNodeInstance(context: ReactApplicationContext): LayoutShadowNode = ScreensShadowNode(context)
 
     override fun needsCustomLayoutForChildren() = true

apps/src/tests/Test2223.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text, Button, Pressable, StyleSheet, Alert } from 'react-native';
+import { Alert, Button, Pressable, StyleSheet, Text, View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 

apps/src/tests/TestFormSheet.tsx

@@ -2,6 +2,7 @@ import { NavigationContainer, RouteProp } from '@react-navigation/native';
 import { NativeStackNavigationProp, createNativeStackNavigator } from '@react-navigation/native-stack';
 import React from 'react';
 import { Button, FlatList, ScrollView, Text, TextInput, View } from 'react-native';
+import PressableWithFeedback from '../shared/PressableWithFeedback';
 
 type ItemData = {
   id: number,
@@ -35,6 +36,11 @@ function Home({ navigation }: RouteProps<'Home'>) {
       <Button title="Open Second" onPress={() => navigation.navigate('Second')} />
       <Button title="Open sheet with FlatList" onPress={() => navigation.navigate('FormSheetWithFlatList')} />
       <Button title="Open sheet with ScrollView" onPress={() => navigation.navigate('FormSheetWithScrollView')} />
+      <PressableWithFeedback>
+        <View style={{ alignItems: 'center', height: 40, justifyContent: 'center' }}>
+          <Text>Pressable</Text>
+        </View>
+      </PressableWithFeedback>
     </View>
   );
 }
@@ -56,6 +62,11 @@ function FormSheet({ navigation }: RouteProps<'FormSheet'>) {
         <Button title="Go back" onPress={() => navigation.goBack()} />
         <Button title="Open Second" onPress={() => navigation.navigate('Second')} />
         <Button title="Open SecondFormSheet" onPress={() => navigation.navigate('SecondFormSheet')} />
+        <PressableWithFeedback>
+          <View style={{ alignItems: 'center', height: 40, justifyContent: 'center' }}>
+            <Text>Pressable</Text>
+          </View>
+        </PressableWithFeedback>
       </View>
       <View style={{ alignItems: 'center' }}>
         <TextInput style={{ marginVertical: 12, paddingVertical: 8, backgroundColor: 'lavender', borderRadius: 24, width: '80%' }} placeholder="Trigger keyboard..." />
@@ -140,6 +151,7 @@ function FormSheetWithScrollView() {
   );
 }
 
+// @ts-ignore // uncomment the usage down below if needed
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function FormSheetFooter() {
   return (

common/cpp/react/renderer/components/rnscreens/RNSModalScreenShadowNode.cpp

@@ -7,9 +7,7 @@ extern const char RNSModalScreenComponentName[] = "RNSModalScreen";
 
 Point RNSModalScreenShadowNode::getContentOriginOffset(
     bool /*includeTransform*/) const {
-  auto stateData = getStateData();
-  auto contentOffset = stateData.contentOffset;
-  return {contentOffset.x, contentOffset.y};
+  return getStateData().contentOffset;
 }
 
 } // namespace react

cpp/RNSScreenRemovalListener.cpp

@@ -8,9 +8,11 @@ std::optional<MountingTransaction> RNSScreenRemovalListener::pullTransaction(
     const TransactionTelemetry &telemetry,
     ShadowViewMutationList mutations) const {
   for (const ShadowViewMutation &mutation : mutations) {
+    // When using RNSModalScreen on Android it should be added here.
     if (mutation.type == ShadowViewMutation::Type::Remove &&
         mutation.oldChildShadowView.componentName != nullptr &&
-        strcmp(mutation.oldChildShadowView.componentName, "RNSScreen") == 0) {
+        std::strcmp(mutation.oldChildShadowView.componentName, "RNSScreen") ==
+            0) {
       // We call the listener function even if this screen has not been owned
       // by RNSScreenStack as since RN 0.78 we do not have enough information
       // here. This final filter is applied later in NativeProxy.

src/components/Screen.tsx

@@ -213,15 +213,23 @@ export const InnerScreen = React.forwardRef<View, ScreenProps>(
         sheetInitialDetentIndex,
         resolvedSheetAllowedDetents.length - 1,
       );
-      // Due to how Yoga resolves layout, we need to have different components for modal nad non-modal screens
-      const AnimatedScreen =
-        Platform.OS === 'android' ||
-        stackPresentation === undefined ||
-        stackPresentation === 'push' ||
-        stackPresentation === 'containedModal' ||
-        stackPresentation === 'containedTransparentModal'
-          ? AnimatedNativeScreen
-          : AnimatedNativeModalScreen;
+
+      // Due to how Yoga resolves layout, we need to have different components for modal nad non-modal screens (there is a need for different
+      // shadow nodes).
+      const shouldUseModalScreenComponent = Platform.select({
+        ios: !(
+          stackPresentation === undefined ||
+          stackPresentation === 'push' ||
+          stackPresentation === 'containedModal' ||
+          stackPresentation === 'containedTransparentModal'
+        ),
+        android: false,
+        default: false,
+      });
+
+      const AnimatedScreen = shouldUseModalScreenComponent
+        ? AnimatedNativeModalScreen
+        : AnimatedNativeScreen;
 
       let {
         // Filter out active prop in this case because it is unused and