fix: clicking on Pressable located in screen header

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

@@ -14,43 +14,64 @@ abstract class FabricEnabledHeaderConfigViewGroup(
 ) : ViewGroup(context) {
     private var mStateWrapper: StateWrapper? = null
 
+    private var lastWidth = 0f
+    private var lastHeight = 0f
     private var lastPaddingStart = 0f
     private var lastPaddingEnd = 0f
 
     fun setStateWrapper(wrapper: StateWrapper?) {
         mStateWrapper = wrapper
     }
 
-    fun updatePaddingsFabric(
+    fun updatePaddings(
         paddingStart: Int,
         paddingEnd: Int,
     ) {
-        updateState(paddingStart, paddingEnd)
+        // Do nothing on Fabric. This method is used only on Paper.
+    }
+
+    fun updateHeaderConfigState(
+        width: Int,
+        height: Int,
+        paddingStart: Int,
+        paddingEnd: Int,
+    ) {
+        updateState(width, height, paddingStart, paddingEnd)
     }
 
     @UiThread
     fun updateState(
+        width: Int,
+        height: Int,
         paddingStart: Int,
         paddingEnd: Int,
     ) {
-        val paddingStartDip: Float = PixelUtil.toDIPFromPixel(paddingStart.toFloat())
-        val paddingEndDip: Float = PixelUtil.toDIPFromPixel(paddingEnd.toFloat())
+        val realWidth: Float = PixelUtil.toDIPFromPixel(width.toFloat())
+        val realHeight: Float = PixelUtil.toDIPFromPixel(height.toFloat())
+        val realPaddingStart: Float = PixelUtil.toDIPFromPixel(paddingStart.toFloat())
+        val realPaddingEnd: Float = PixelUtil.toDIPFromPixel(paddingEnd.toFloat())
 
         // Check incoming state values. If they're already the correct value, return early to prevent
         // infinite UpdateState/SetState loop.
-        if (abs(lastPaddingStart - paddingStart) < DELTA &&
-            abs(lastPaddingEnd - paddingEnd) < DELTA
+        if (abs(lastWidth - realWidth) < DELTA &&
+            abs(lastHeight - realHeight) < DELTA &&
+            abs(lastPaddingStart - realPaddingStart) < DELTA &&
+            abs(lastPaddingEnd - realPaddingEnd) < DELTA
         ) {
             return
         }
 
-        lastPaddingStart = paddingStartDip
-        lastPaddingEnd = paddingEndDip
+        lastWidth = realWidth
+        lastHeight = realHeight
+        lastPaddingStart = realPaddingStart
+        lastPaddingEnd = realPaddingEnd
 
         val map: WritableMap =
             WritableNativeMap().apply {
-                putDouble("paddingStart", paddingStartDip.toDouble())
-                putDouble("paddingEnd", paddingEndDip.toDouble())
+                putDouble("frameWidth", realWidth.toDouble())
+                putDouble("frameHeight", realHeight.toDouble())
+                putDouble("paddingStart", realPaddingStart.toDouble())
+                putDouble("paddingEnd", realPaddingEnd.toDouble())
             }
         mStateWrapper?.updateState(map)
     }

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

@@ -0,0 +1,51 @@
+package com.swmansion.rnscreens
+
+import android.content.Context
+import android.view.ViewGroup
+import androidx.annotation.UiThread
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.bridge.WritableNativeMap
+import com.facebook.react.uimanager.PixelUtil
+import com.facebook.react.uimanager.StateWrapper
+
+abstract class FabricEnabledHeaderSubviewGroup(
+    context: Context?,
+) : ViewGroup(context) {
+    private var mStateWrapper: StateWrapper? = null
+
+    fun setStateWrapper(wrapper: StateWrapper?) {
+        mStateWrapper = wrapper
+    }
+
+    protected fun updateSubviewFrameState(
+        width: Int,
+        height: Int,
+        offsetX: Int,
+        offsetY: Int,
+    ) {
+        updateState(width, height, offsetX, offsetY)
+    }
+
+    @UiThread
+    fun updateState(
+        width: Int,
+        height: Int,
+        offsetX: Int,
+        offsetY: Int,
+    ) {
+        val realWidth: Float = PixelUtil.toDIPFromPixel(width.toFloat())
+        val realHeight: Float = PixelUtil.toDIPFromPixel(height.toFloat())
+        val offsetXDip: Float = PixelUtil.toDIPFromPixel(offsetX.toFloat())
+        val offsetYDip: Float = PixelUtil.toDIPFromPixel(offsetY.toFloat())
+
+        val map: WritableMap =
+            WritableNativeMap().apply {
+                putDouble("frameWidth", realWidth.toDouble())
+                putDouble("frameHeight", realHeight.toDouble())
+                putDouble("contentOffsetX", offsetXDip.toDouble())
+                putDouble("contentOffsetY", offsetYDip.toDouble())
+            }
+
+        mStateWrapper?.updateState(map)
+    }
+}

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

@@ -68,8 +68,18 @@ open class CustomToolbar(
     ) {
         super.onLayout(changed, l, t, r, b)
 
-        // our children are already laid out
+        if (!changed) {
+            return
+        }
+
         val contentInsetStart = if (navigationIcon != null) contentInsetStartWithNavigation else contentInsetStart
-        config.updatePaddingsFabric(contentInsetStart, contentInsetEnd)
+        if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+            val width = r - l;
+            val height = b - t;
+            config.updateHeaderConfigState(width, height, contentInsetStart, contentInsetEnd)
+        } else {
+            // our children are already laid out
+            config.updatePaddings(contentInsetStart, contentInsetEnd)
+        }
     }
 }

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

@@ -8,7 +8,7 @@ import com.facebook.react.views.view.ReactViewGroup
 @SuppressLint("ViewConstructor")
 class ScreenStackHeaderSubview(
     context: ReactContext?,
-) : ReactViewGroup(context) {
+) : FabricEnabledHeaderSubviewGroup(context) {
     private var reactWidth = 0
     private var reactHeight = 0
     var type = Type.RIGHT
@@ -37,11 +37,17 @@ class ScreenStackHeaderSubview(
 
     override fun onLayout(
         changed: Boolean,
-        left: Int,
-        top: Int,
-        right: Int,
-        bottom: Int,
-    ) = Unit
+        l: Int,
+        t: Int,
+        r: Int,
+        b: Int,
+    ) {
+       if (changed && BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+           val width = r - l;
+           val height = b - t;
+           updateSubviewFrameState(width, height, l, t)
+       }
+    }
 
     enum class Type {
         LEFT,

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

@@ -2,6 +2,8 @@ package com.swmansion.rnscreens
 
 import com.facebook.react.bridge.JSApplicationIllegalArgumentException
 import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ReactStylesDiffMap
+import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.ViewManagerDelegate
@@ -39,6 +41,17 @@ class ScreenStackHeaderSubviewManager :
             }
     }
 
+    override fun updateState(
+        view: ScreenStackHeaderSubview,
+        props: ReactStylesDiffMap?,
+        stateWrapper: StateWrapper?
+    ): Any? {
+        if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+            view.setStateWrapper(stateWrapper)
+        }
+        return super.updateState(view, props, stateWrapper)
+    }
+
     protected override fun getDelegate(): ViewManagerDelegate<ScreenStackHeaderSubview> = delegate
 
     companion object {

android/src/paper/java/com/swmansion/rnscreens/FabricEnabledHeaderConfigViewGroup.kt

@@ -16,7 +16,15 @@ abstract class FabricEnabledHeaderConfigViewGroup(
 
     fun setStateWrapper(wrapper: StateWrapper?) = Unit
 
-    fun updatePaddingsFabric(
+    // Do nothing on Paper. This method is used only on Fabric.
+    fun updateHeaderConfigState(
+        width: Int,
+        height: Int,
+        paddingStart: Int,
+        paddingEnd: Int,
+    ) = Unit
+
+    fun updatePaddings(
         paddingStart: Int,
         paddingEnd: Int,
     ) {

android/src/paper/java/com/swmansion/rnscreens/FabricEnabledHeaderSubviewGroup.kt

@@ -0,0 +1,18 @@
+package com.swmansion.rnscreens
+
+import android.content.Context
+import android.view.ViewGroup
+import com.facebook.react.uimanager.StateWrapper
+
+abstract class FabricEnabledHeaderSubviewGroup(context: Context?): ViewGroup(context) {
+
+    fun setStateWrapper(wrapper: StateWrapper?) = Unit
+
+    // Fabric only
+    protected fun updateSubviewFrameState(
+        width: Int,
+        height: Int,
+        offsetX: Int,
+        offsetY: Int
+    ) = Unit
+}

apps/src/tests/Test2466.tsx

@@ -0,0 +1,155 @@
+import { Header } from '@react-navigation/elements';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator, NativeStackNavigationProp } from '@react-navigation/native-stack';
+import React, { ForwardedRef } from 'react';
+import { findNodeHandle, GestureResponderEvent, Pressable, PressableProps, StyleSheet, Text, View } from 'react-native';
+
+type StackParamList = {
+  Home: undefined,
+}
+
+type RouteProps = {
+  navigation: NativeStackNavigationProp<StackParamList>;
+}
+
+type PressableState = 'pressed-in' | 'pressed' | 'pressed-out'
+
+
+const Stack = createNativeStackNavigator<StackParamList>();
+
+const PressableWithFeedback = React.forwardRef((props: PressableProps, ref: ForwardedRef<View>): React.JSX.Element => {
+  const [pressedState, setPressedState] = React.useState<PressableState>('pressed-out');
+
+  const onPressInCallback = React.useCallback((e: GestureResponderEvent) => {
+    console.log('Pressable onPressIn', {
+      locationX: e.nativeEvent.locationX,
+      locationY: e.nativeEvent.locationY,
+      pageX: e.nativeEvent.pageX,
+      pageY: e.nativeEvent.pageY,
+    });
+    setPressedState('pressed-in');
+    props.onPressIn?.(e);
+  }, [props]);
+
+  const onPressCallback = React.useCallback((e: GestureResponderEvent) => {
+    console.log('Pressable onPress');
+    setPressedState('pressed');
+    props.onPress?.(e);
+  }, [props]);
+
+  const onPressOutCallback = React.useCallback((e: GestureResponderEvent) => {
+    console.log('Pressable onPressOut');
+    setPressedState('pressed-out');
+    props.onPressOut?.(e);
+  }, [props]);
+
+  const onResponderMoveCallback = React.useCallback((e: GestureResponderEvent) => {
+    console.log('Pressable onResponderMove');
+    props.onResponderMove?.(e);
+  }, [props]);
+
+  const contentsStyle = pressedState === 'pressed-out'
+    ? styles.pressablePressedOut
+    : (pressedState === 'pressed'
+      ? styles.pressablePressed
+      : styles.pressablePressedIn);
+
+  return (
+    <View ref={ref} style={[contentsStyle]}>
+      <Pressable
+        onPressIn={onPressInCallback}
+        onPress={onPressCallback}
+        onPressOut={onPressOutCallback}
+        onResponderMove={onResponderMoveCallback}
+      >
+        {props.children}
+      </Pressable>
+    </View>
+
+  );
+});
+
+function HeaderTitle(): React.JSX.Element {
+  return (
+    <PressableWithFeedback
+      onLayout={event => {
+        const { x, y, width, height } = event.nativeEvent.layout;
+        console.log('Title onLayout', { x, y, width, height });
+      }}
+      onPressIn={() => {
+        console.log('Pressable onPressIn');
+      }}
+      onPress={() => console.log('Pressable onPress')}
+      onPressOut={() => console.log('Pressable onPressOut')}
+      onResponderMove={() => console.log('Pressable onResponderMove')}
+      ref={node => {
+        console.log(findNodeHandle(node));
+        node?.measure((x, y, width, height, pageX, pageY) => {
+          console.log('header component measure', { x, y, width, height, pageX, pageY });
+        });
+      }}
+    >
+      <View style={{ height: 40, justifyContent: 'center', alignItems: 'center' }}>
+        <Text style={{ alignItems: 'center' }}>Regular Pressable</Text>
+      </View>
+    </PressableWithFeedback>
+  );
+}
+
+function HeaderLeft(): React.JSX.Element {
+  return (
+    <HeaderTitle />
+  );
+}
+
+function Home(_: RouteProps): React.JSX.Element {
+  return (
+    <View style={{ flex: 1, backgroundColor: 'rgba(0, 0, 0, .8)' }}
+    >
+      <View style={{ flex: 1, alignItems: 'center', marginTop: 48 }}>
+        <PressableWithFeedback
+          onPressIn={() => console.log('Pressable onPressIn')}
+          onPress={() => console.log('Pressable onPress')}
+          onPressOut={() => console.log('Pressable onPressOut')}
+        >
+          <View style={{ height: 40, width: 200, justifyContent: 'center', alignItems: 'center' }}>
+            <Text style={{ alignItems: 'center' }}>Regular Pressable</Text>
+          </View>
+        </PressableWithFeedback>
+      </View>
+    </View>
+  );
+}
+
+function App(): React.JSX.Element {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Home"
+          component={Home}
+          options={{
+            headerTitle: HeaderTitle,
+            headerLeft: HeaderLeft,
+            headerRight: HeaderLeft,
+          }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  pressablePressedIn: {
+    backgroundColor: 'lightsalmon',
+  },
+  pressablePressed: {
+    backgroundColor: 'crimson',
+  },
+  pressablePressedOut: {
+    backgroundColor: 'lightseagreen',
+  },
+});
+
+
+export default App;