From 81f35b35da9b3daab74da9f048b126347c136fdc Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Wed, 28 Aug 2024 12:32:12 +0200
Subject: [PATCH 01/49] Add repros

---
 apps/App.tsx                       |   8 +-
 apps/src/tests/TestHeaderRight.tsx |  69 +++++++++++++++++
 apps/src/tests/TestHeaderTitle.tsx | 120 +++++++++++++++++++++++++++++
 apps/src/tests/index.ts            |   2 +
 4 files changed, 195 insertions(+), 4 deletions(-)
 create mode 100644 apps/src/tests/TestHeaderRight.tsx
 create mode 100644 apps/src/tests/TestHeaderTitle.tsx

diff --git a/apps/App.tsx b/apps/App.tsx
index 23a9af9c45..e19111891c 100644
--- a/apps/App.tsx
+++ b/apps/App.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { enableFreeze } from 'react-native-screens';
-import Example from './Example';
-// import * as Test from './src/tests';
+// import Example from './Example';
+import * as Test from './src/tests';
 
 enableFreeze(true);
 
 export default function App() {
-  return <Example />;
-  // return <Test.Test42 />;
+  // return <Example />;
+  return <Test.TestHeaderTitle />;
 }
diff --git a/apps/src/tests/TestHeaderRight.tsx b/apps/src/tests/TestHeaderRight.tsx
new file mode 100644
index 0000000000..f445157711
--- /dev/null
+++ b/apps/src/tests/TestHeaderRight.tsx
@@ -0,0 +1,69 @@
+import React, {useLayoutEffect} from 'react';
+import {NavigationContainer} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import {useNavigation} from '@react-navigation/native';
+import {Button, Text, TextInput, View} from 'react-native';
+import {NativeStackNavigationProp} from '@react-navigation/native-stack';
+import { HeaderBackButton, HeaderButton } from '@react-navigation/elements';
+type RootStackNavigatorParamsList = {
+  Home: undefined;
+  Details: undefined;
+};
+const Stack = createNativeStackNavigator<RootStackNavigatorParamsList>();
+const HomeScreen = () => {
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackNavigatorParamsList>>();
+  const onHandlePress = () => {
+    navigation.navigate('Details');
+  };
+  return (
+    <View>
+      <Text>HomeScreen</Text>
+      <View>
+        <Button title="Go to Details" onPress={onHandlePress} />
+      </View>
+    </View>
+  );
+};
+const DetailsScreen = () => {
+  const [text, setText] = React.useState('');
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackNavigatorParamsList>>();
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerTitle:  'Detail Screen',
+      headerRight: () => {
+        if(text.length === 0) {
+          return null;
+        }
+        return <HeaderButton ><Text>X</Text></HeaderButton> ;
+      }
+    });
+  }, [navigation, text]);
+  const onHandlePress = () => {
+    navigation.goBack();
+  };
+  return (
+    <View>
+      <Text>RegisterScreen</Text>
+      <View>
+      <TextInput  style={{ backgroundColor: 'grey', height: 40, borderColor: 'black' }} placeholder='Enter text' value={text} onChangeText={(text) => {
+          setText(text);
+        }}/>
+        <Button title="Go to Home" onPress={onHandlePress} />
+        <Button title="Go to Details" onPress={onHandlePress} />       
+      </View>
+    </View>
+  );
+};
+function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen name="Details" component={DetailsScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+export default App;
diff --git a/apps/src/tests/TestHeaderTitle.tsx b/apps/src/tests/TestHeaderTitle.tsx
new file mode 100644
index 0000000000..95e89be636
--- /dev/null
+++ b/apps/src/tests/TestHeaderTitle.tsx
@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+const baseTitle = 'Ab';
+
+function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{ statusBarTranslucent: false }}>
+        <Stack.Screen
+          name="Screen"
+          component={Screen}
+          options={{
+            headerLeft: () => {
+              return (
+                <View style={{ width: 80, height: 20, backgroundColor: 'goldenrod', flexShrink: 1 }}>
+                </View>
+              )
+            },
+            // headerRight: () => (
+            //   <View style={{ width: 80, height: 20, minWidth: 80, backgroundColor: 'goldenrod', flexShrink: 0, opacity: 0.4 }}>
+            //   </View>
+            // ),
+            headerTitle: baseTitle.repeat(20),
+            // headerTitle: () => (
+            //   <Text>{baseTitle.repeat(20)}</Text>
+            // ),
+            // headerTitle: () => (
+            //   <View style={{ borderColor: 'red', borderWidth: 2, height: 20, flexShrink: 1 }}>
+            //     <Text numberOfLines={1} style={{ flexShrink: 1 }}>{baseTitle.repeat(25)}</Text>
+            //   </View>
+            // ),
+            // title: baseTitle.repeat(15),
+            // headerTitleAlign: 'center'
+          }}
+        />
+        <Stack.Screen
+          name="Details"
+          component={DetailsScreen}
+          options={({ navigation }) => ({
+            title: 'Details',
+            headerRight: () => (
+              <Pressable
+                onPress={navigation.goBack}
+                style={({ pressed }) => [
+                  styles.pressable,
+                  pressed && { backgroundColor: 'goldenrod' },
+                ]}>
+                <Text>Go Back</Text>
+              </Pressable>
+            ),
+          })}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+function Screen({ navigation }: any) {
+  return (
+    <View style={styles.container}>
+      <View style={{ justifyContent: 'center', alignItems: 'flex-start' }}>
+        <View style={{ backgroundColor: 'goldenrod', flexDirection: 'row', width: 200 }}>
+          <View collapsable={false} style={{ flexShrink: 1 }}>
+            <Text numberOfLines={1} style={{ flexShrink: 0 }}>{baseTitle.repeat(20)}</Text>
+          </View>
+          <View collapsable={false} style={{ flexShrink: 1, width: 80 }}>
+            <View style={{ backgroundColor: 'lightgreen', width: 80, height: 20, opacity: 0.6 }} />
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function DetailsScreen() {
+  let counter = React.useRef(0);
+
+  return (
+    <View style={{ ...styles.container, backgroundColor: 'beige' }}>
+      <Pressable
+        onPressIn={() => {
+          counter.current += 1;
+          console.log(`[${counter.current}] Details: onPressIn`);
+        }}
+        onPress={() => {
+          console.log(`[${counter.current}] Details: onPress`);
+        }}
+        onPressOut={() => {
+          console.log(`[${counter.current}] Details: onPressOut`);
+        }}
+        style={({ pressed }) => [
+          styles.pressable,
+          pressed && { backgroundColor: 'goldenrod' },
+        ]}>
+        <Text>Press me</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  pressable: {
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+    backgroundColor: 'red',
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 24,
+  },
+});
+
+export default App;
diff --git a/apps/src/tests/index.ts b/apps/src/tests/index.ts
index 1b7139c0ca..943f0740ab 100644
--- a/apps/src/tests/index.ts
+++ b/apps/src/tests/index.ts
@@ -113,4 +113,6 @@ export { default as Test2271 } from './Test2271';
 export { default as Test2282 } from './Test2282';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestHeader } from './TestHeader';
+export { default as TestHeaderTitle } from './TestHeaderTitle';
+export { default as TestHeaderRight } from './TestHeaderRight';
 

From c4eeed341e99ad06729cdd1dc524e98a68d0d77b Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Thu, 29 Aug 2024 08:40:49 +0200
Subject: [PATCH 02/49] Play around with fixing things before adding
 shadownodes

---
 apps/src/tests/TestHeaderTitle.tsx         | 65 ++++++++++++++--------
 src/components/ScreenStackHeaderConfig.tsx |  4 +-
 2 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/apps/src/tests/TestHeaderTitle.tsx b/apps/src/tests/TestHeaderTitle.tsx
index 95e89be636..03da78c40b 100644
--- a/apps/src/tests/TestHeaderTitle.tsx
+++ b/apps/src/tests/TestHeaderTitle.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { View, Text, StyleSheet, Pressable } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 const Stack = createNativeStackNavigator();
 
@@ -17,23 +18,23 @@ function App() {
           options={{
             headerLeft: () => {
               return (
-                <View style={{ width: 80, height: 20, backgroundColor: 'goldenrod', flexShrink: 1 }}>
+                <View style={{ width: 80, height: 20, backgroundColor: 'goldenrod' }}>
                 </View>
               )
             },
-            // headerRight: () => (
-            //   <View style={{ width: 80, height: 20, minWidth: 80, backgroundColor: 'goldenrod', flexShrink: 0, opacity: 0.4 }}>
-            //   </View>
-            // ),
-            headerTitle: baseTitle.repeat(20),
+            headerRight: () => (
+              <View style={{ width: 80, height: 20, backgroundColor: 'goldenrod', opacity: 0.4 }}>
+              </View>
+            ),
+            // headerTitle: baseTitle.repeat(20),
             // headerTitle: () => (
             //   <Text>{baseTitle.repeat(20)}</Text>
             // ),
-            // headerTitle: () => (
-            //   <View style={{ borderColor: 'red', borderWidth: 2, height: 20, flexShrink: 1 }}>
-            //     <Text numberOfLines={1} style={{ flexShrink: 1 }}>{baseTitle.repeat(25)}</Text>
-            //   </View>
-            // ),
+            headerTitle: () => (
+              <View style={{ height: 20 }}>
+                <Text numberOfLines={1} style={{ flexShrink: 1 }}>{baseTitle.repeat(25)}</Text>
+              </View>
+            ),
             // title: baseTitle.repeat(15),
             // headerTitleAlign: 'center'
           }}
@@ -43,16 +44,27 @@ function App() {
           component={DetailsScreen}
           options={({ navigation }) => ({
             title: 'Details',
+            headerLeft: () => {
+              return (
+                <View style={{ width: 80, height: 20, backgroundColor: 'goldenrod' }}>
+                </View>
+              )
+            },
             headerRight: () => (
-              <Pressable
-                onPress={navigation.goBack}
-                style={({ pressed }) => [
-                  styles.pressable,
-                  pressed && { backgroundColor: 'goldenrod' },
-                ]}>
-                <Text>Go Back</Text>
-              </Pressable>
+              <View style={{ width: 80, height: 20, backgroundColor: 'goldenrod', opacity: 0.4 }}>
+              </View>
+            ),
+            // headerTitle: baseTitle.repeat(20),
+            // headerTitle: () => (
+            //   <Text>{baseTitle.repeat(20)}</Text>
+            // ),
+            headerTitle: () => (
+              <View style={{ height: 20 }}>
+                <Text numberOfLines={1} style={{ flexShrink: 1 }}>{baseTitle.repeat(25)}</Text>
+              </View>
             ),
+            // title: baseTitle.repeat(15),
+            // headerTitleAlign: 'center'
           })}
         />
       </Stack.Navigator>
@@ -65,18 +77,25 @@ function Screen({ navigation }: any) {
     <View style={styles.container}>
       <View style={{ justifyContent: 'center', alignItems: 'flex-start' }}>
         <View style={{ backgroundColor: 'goldenrod', flexDirection: 'row', width: 200 }}>
-          <View collapsable={false} style={{ flexShrink: 1 }}>
-            <Text numberOfLines={1} style={{ flexShrink: 0 }}>{baseTitle.repeat(20)}</Text>
+          <View collapsable={false} style={{ flex: 1}}>
+            <Text numberOfLines={1} style={{}}>{baseTitle.repeat(20)}</Text>
+          </View>
+          <View collapsable={false} style={{}}>
+            <View style={{ backgroundColor: 'lightgreen', width: 50, height: 20, opacity: 0.6 }} />
           </View>
-          <View collapsable={false} style={{ flexShrink: 1, width: 80 }}>
-            <View style={{ backgroundColor: 'lightgreen', width: 80, height: 20, opacity: 0.6 }} />
+          <View collapsable={false} style={{}}>
+            <View style={{ backgroundColor: 'pink', width: 30, height: 20, opacity: 0.6 }} />
           </View>
         </View>
       </View>
+
+      <Button onPress={() => navigation.navigate("Details")} title="GoDetails"/>
     </View>
   );
 }
 
+// function AppScreensOnly
+
 function DetailsScreen() {
   let counter = React.useRef(0);
 
diff --git a/src/components/ScreenStackHeaderConfig.tsx b/src/components/ScreenStackHeaderConfig.tsx
index e65799092b..e6565fb0da 100644
--- a/src/components/ScreenStackHeaderConfig.tsx
+++ b/src/components/ScreenStackHeaderConfig.tsx
@@ -50,7 +50,7 @@ export const ScreenStackHeaderCenterView = (
   <ScreenStackHeaderSubview
     {...props}
     type="center"
-    style={styles.headerSubview}
+    style={[styles.headerSubview, { borderWidth: 2, borderColor: 'blue' }]}
   />
 );
 
@@ -66,7 +66,7 @@ export const ScreenStackHeaderSearchBarView = (
 
 const styles = StyleSheet.create({
   headerSubview: {
-    position: 'absolute',
+    flex: 1,
     top: 0,
     right: 0,
     flexDirection: 'row',

From 6ff7ca03cfbf71e4ba901e67d6a232d1b7388b5c Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Thu, 29 Aug 2024 09:40:34 +0200
Subject: [PATCH 03/49] Add custom shadow node for header subview

---
 android/src/main/jni/rnscreens.h              |  1 +
 ...eenStackHeaderSubviewComponentDescriptor.h | 27 +++++++++++++
 .../RNSScreenStackHeaderSubviewShadowNode.cpp |  8 ++++
 .../RNSScreenStackHeaderSubviewShadowNode.h   | 32 +++++++++++++++
 .../RNSScreenStackHeaderSubviewState.cpp      | 15 +++++++
 .../RNSScreenStackHeaderSubviewState.h        | 40 +++++++++++++++++++
 ...ScreenStackHeaderSubviewNativeComponent.ts |  4 +-
 7 files changed, 126 insertions(+), 1 deletion(-)
 create mode 100644 common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewComponentDescriptor.h
 create mode 100644 common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewShadowNode.cpp
 create mode 100644 common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewShadowNode.h
 create mode 100644 common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewState.cpp
 create mode 100644 common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewState.h

diff --git a/android/src/main/jni/rnscreens.h b/android/src/main/jni/rnscreens.h
index a8dbde1289..cf9c33af3a 100644
--- a/android/src/main/jni/rnscreens.h
+++ b/android/src/main/jni/rnscreens.h
@@ -18,6 +18,7 @@
  */
 #include <react/renderer/components/rnscreens/RNSScreenComponentDescriptor.h>
 #include <react/renderer/components/rnscreens/RNSModalScreenComponentDescriptor.h>
+#include <react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewComponentDescriptor.h>
 
 namespace facebook {
 namespace react {
diff --git a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewComponentDescriptor.h b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewComponentDescriptor.h
new file mode 100644
index 0000000000..2228c1170a
--- /dev/null
+++ b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewComponentDescriptor.h
@@ -0,0 +1,27 @@
+#pragma once
+
+#ifdef ANDROID
+#include <fbjni/fbjni.h>
+#endif
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/components/rnscreens/Props.h>
+#include <react/renderer/components/rnscreens/utils/RectUtil.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include "RNSScreenStackHeaderSubviewShadowNode.h"
+
+namespace facebook::react {
+
+using namespace rnscreens;
+
+class RNSScreenStackHeaderSubviewComponentDescriptor final
+    : public ConcreteComponentDescriptor<
+          RNSScreenStackHeaderSubviewShadowNode> {
+ public:
+  using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+
+  void adopt(ShadowNode &shadowNode) const override {
+    ConcreteComponentDescriptor::adopt(shadowNode);
+  }
+};
+
+} // namespace facebook::react
diff --git a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewShadowNode.cpp b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewShadowNode.cpp
new file mode 100644
index 0000000000..e0d6988e91
--- /dev/null
+++ b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewShadowNode.cpp
@@ -0,0 +1,8 @@
+#include "RNSScreenStackHeaderSubviewShadowNode.h"
+
+namespace facebook::react {
+
+extern const char RNSScreenStackHeaderSubviewComponentName[] =
+    "RNSScreenStackHeaderSubview";
+
+}
diff --git a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewShadowNode.h b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewShadowNode.h
new file mode 100644
index 0000000000..e91cb63f73
--- /dev/null
+++ b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewShadowNode.h
@@ -0,0 +1,32 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include <react/renderer/components/rnscreens/EventEmitters.h>
+#include <react/renderer/components/rnscreens/Props.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/core/LayoutContext.h>
+#include "FrameCorrectionModes.h"
+#include "RNSScreenStackHeaderSubviewState.h"
+
+namespace facebook::react {
+
+using namespace rnscreens;
+
+JSI_EXPORT extern const char RNSScreenStackHeaderSubviewComponentName[];
+
+class JSI_EXPORT RNSScreenStackHeaderSubviewShadowNode final
+    : public ConcreteViewShadowNode<
+          RNSScreenStackHeaderSubviewComponentName,
+          RNSScreenStackHeaderSubviewProps,
+          RNSScreenStackHeaderSubviewEventEmitter,
+          RNSScreenStackHeaderSubviewState> {
+ public:
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+  using StateData = ConcreteViewShadowNode::ConcreteStateData;
+
+#pragma mark - ShadowNode overrides
+
+#pragma mark - Custom interface
+};
+
+} // namespace facebook::react
diff --git a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewState.cpp b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewState.cpp
new file mode 100644
index 0000000000..a5019eb812
--- /dev/null
+++ b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewState.cpp
@@ -0,0 +1,15 @@
+#include "RNSScreenStackHeaderSubviewState.h"
+
+namespace facebook {
+namespace react {
+
+using namespace rnscreens;
+
+#ifdef ANDROID
+folly::dynamic RNSScreenStackHeaderSubviewState::getDynamic() const {
+  return folly::dynamic::object();
+}
+#endif
+
+} // namespace react
+} // namespace facebook
diff --git a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewState.h b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewState.h
new file mode 100644
index 0000000000..32fdae2694
--- /dev/null
+++ b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewState.h
@@ -0,0 +1,40 @@
+#pragma once
+
+#include <react/renderer/core/graphicsConversions.h>
+#include <react/renderer/graphics/Float.h>
+
+#ifdef ANDROID
+#include <folly/dynamic.h>
+#include <react/renderer/mapbuffer/MapBuffer.h>
+#include <react/renderer/mapbuffer/MapBufferBuilder.h>
+#endif
+
+#include "FrameCorrectionModes.h"
+
+namespace facebook::react {
+
+using namespace rnscreens;
+
+class JSI_EXPORT RNSScreenStackHeaderSubviewState final {
+ public:
+  using Shared = std::shared_ptr<const RNSScreenStackHeaderSubviewState>;
+
+  RNSScreenStackHeaderSubviewState() = default;
+
+#ifdef ANDROID
+  RNSScreenStackHeaderSubviewState(
+      RNSScreenStackHeaderSubviewState const &previousState,
+      folly::dynamic data) {}
+#endif
+
+#ifdef ANDROID
+  folly::dynamic getDynamic() const;
+  MapBuffer getMapBuffer() const {
+    return MapBufferBuilder::EMPTY();
+  };
+#endif
+
+#pragma mark - Getters
+};
+
+} // namespace facebook::react
diff --git a/src/fabric/ScreenStackHeaderSubviewNativeComponent.ts b/src/fabric/ScreenStackHeaderSubviewNativeComponent.ts
index 625e578459..6c4fc72456 100644
--- a/src/fabric/ScreenStackHeaderSubviewNativeComponent.ts
+++ b/src/fabric/ScreenStackHeaderSubviewNativeComponent.ts
@@ -16,5 +16,7 @@ export interface NativeProps extends ViewProps {
 
 export default codegenNativeComponent<NativeProps>(
   'RNSScreenStackHeaderSubview',
-  {},
+  {
+    interfaceOnly: true,
+  },
 );

From 6df50f7ef4be91539664199b05ef94c45e9a4aa7 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Thu, 29 Aug 2024 09:48:59 +0200
Subject: [PATCH 04/49] Add custom shadow node for header config

---
 android/src/main/jni/rnscreens.h              |  1 +
 ...reenStackHeaderConfigComponentDescriptor.h | 26 ++++++++++++++
 .../RNSScreenStackHeaderConfigShadowNode.cpp  |  8 +++++
 .../RNSScreenStackHeaderConfigShadowNode.h    | 32 +++++++++++++++++
 .../RNSScreenStackHeaderConfigState.cpp       | 13 +++++++
 .../RNSScreenStackHeaderConfigState.h         | 36 +++++++++++++++++++
 .../ScreenStackHeaderConfigNativeComponent.ts |  4 ++-
 7 files changed, 119 insertions(+), 1 deletion(-)
 create mode 100644 common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h
 create mode 100644 common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigShadowNode.cpp
 create mode 100644 common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigShadowNode.h
 create mode 100644 common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.cpp
 create mode 100644 common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.h

diff --git a/android/src/main/jni/rnscreens.h b/android/src/main/jni/rnscreens.h
index cf9c33af3a..e57cd2fcab 100644
--- a/android/src/main/jni/rnscreens.h
+++ b/android/src/main/jni/rnscreens.h
@@ -19,6 +19,7 @@
 #include <react/renderer/components/rnscreens/RNSScreenComponentDescriptor.h>
 #include <react/renderer/components/rnscreens/RNSModalScreenComponentDescriptor.h>
 #include <react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewComponentDescriptor.h>
+#include <react/renderer/components/rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h>
 
 namespace facebook {
 namespace react {
diff --git a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h
new file mode 100644
index 0000000000..1bc46ea86b
--- /dev/null
+++ b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h
@@ -0,0 +1,26 @@
+#pragma once
+
+#ifdef ANDROID
+#include <fbjni/fbjni.h>
+#endif
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/components/rnscreens/Props.h>
+#include <react/renderer/components/rnscreens/utils/RectUtil.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include "RNSScreenStackHeaderConfigShadowNode.h"
+
+namespace facebook::react {
+
+using namespace rnscreens;
+
+class RNSScreenStackHeaderConfigComponentDescriptor final
+    : public ConcreteComponentDescriptor<RNSScreenStackHeaderConfigShadowNode> {
+ public:
+  using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
+
+  void adopt(ShadowNode &shadowNode) const override {
+    ConcreteComponentDescriptor::adopt(shadowNode);
+  }
+};
+
+} // namespace facebook::react
diff --git a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigShadowNode.cpp b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigShadowNode.cpp
new file mode 100644
index 0000000000..c13cc3a02f
--- /dev/null
+++ b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigShadowNode.cpp
@@ -0,0 +1,8 @@
+#include "RNSScreenStackHeaderConfigShadowNode.h"
+
+namespace facebook::react {
+
+extern const char RNSScreenStackHeaderConfigComponentName[] =
+    "RNSScreenStackHeaderConfig";
+
+}
diff --git a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigShadowNode.h b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigShadowNode.h
new file mode 100644
index 0000000000..bdbe3ec11f
--- /dev/null
+++ b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigShadowNode.h
@@ -0,0 +1,32 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include <react/renderer/components/rnscreens/EventEmitters.h>
+#include <react/renderer/components/rnscreens/Props.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/core/LayoutContext.h>
+#include "FrameCorrectionModes.h"
+#include "RNSScreenStackHeaderConfigState.h"
+
+namespace facebook::react {
+
+using namespace rnscreens;
+
+JSI_EXPORT extern const char RNSScreenStackHeaderConfigComponentName[];
+
+class JSI_EXPORT RNSScreenStackHeaderConfigShadowNode final
+    : public ConcreteViewShadowNode<
+          RNSScreenStackHeaderConfigComponentName,
+          RNSScreenStackHeaderConfigProps,
+          RNSScreenStackHeaderConfigEventEmitter,
+          RNSScreenStackHeaderConfigState> {
+ public:
+  using ConcreteViewShadowNode::ConcreteViewShadowNode;
+  using StateData = ConcreteViewShadowNode::ConcreteStateData;
+
+#pragma mark - ShadowNode overrides
+
+#pragma mark - Custom interface
+};
+
+} // namespace facebook::react
diff --git a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.cpp b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.cpp
new file mode 100644
index 0000000000..959e8e968c
--- /dev/null
+++ b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.cpp
@@ -0,0 +1,13 @@
+#include "RNSScreenStackHeaderConfigState.h"
+
+namespace facebook {
+namespace react {
+
+#ifdef ANDROID
+folly::dynamic RNSScreenStackHeaderConfigState::getDynamic() const {
+  return folly::dynamic::object();
+}
+#endif
+
+} // namespace react
+} // namespace facebook
diff --git a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.h b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.h
new file mode 100644
index 0000000000..f39b61726a
--- /dev/null
+++ b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.h
@@ -0,0 +1,36 @@
+#pragma once
+
+#include <react/renderer/core/graphicsConversions.h>
+#include <react/renderer/graphics/Float.h>
+
+#ifdef ANDROID
+#include <folly/dynamic.h>
+#include <react/renderer/mapbuffer/MapBuffer.h>
+#include <react/renderer/mapbuffer/MapBufferBuilder.h>
+#endif
+
+namespace facebook::react {
+
+class JSI_EXPORT RNSScreenStackHeaderConfigState final {
+ public:
+  using Shared = std::shared_ptr<const RNSScreenStackHeaderConfigState>;
+
+  RNSScreenStackHeaderConfigState() = default;
+
+#ifdef ANDROID
+  RNSScreenStackHeaderConfigState(
+      RNSScreenStackHeaderConfigState const &previousState,
+      folly::dynamic data) {}
+#endif
+
+#ifdef ANDROID
+  folly::dynamic getDynamic() const;
+  MapBuffer getMapBuffer() const {
+    return MapBufferBuilder::EMPTY();
+  };
+#endif
+
+#pragma mark - Getters
+};
+
+} // namespace facebook::react
diff --git a/src/fabric/ScreenStackHeaderConfigNativeComponent.ts b/src/fabric/ScreenStackHeaderConfigNativeComponent.ts
index de0574aa1b..2ba272ffab 100644
--- a/src/fabric/ScreenStackHeaderConfigNativeComponent.ts
+++ b/src/fabric/ScreenStackHeaderConfigNativeComponent.ts
@@ -73,5 +73,7 @@ export interface NativeProps extends ViewProps {
 
 export default codegenNativeComponent<NativeProps>(
   'RNSScreenStackHeaderConfig',
-  {},
+  {
+    interfaceOnly: true,
+  },
 );

From 9dec6ddc11384265c16c10ddb1eea22fd00df1b9 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Thu, 29 Aug 2024 15:02:00 +0200
Subject: [PATCH 05/49] PoC of the solution

---
 .../rnscreens/FabricEnabledConfigViewGroup.kt | 58 ++++++++++++++
 .../com/swmansion/rnscreens/CustomToolbar.kt  | 10 ++-
 .../rnscreens/ScreenStackHeaderConfig.kt      |  2 +-
 .../ScreenStackHeaderConfigViewManager.kt     | 13 +++
 apps/src/tests/TestHeaderTitle.tsx            | 80 +++++++------------
 ...reenStackHeaderConfigComponentDescriptor.h | 19 +++++
 .../RNSScreenStackHeaderConfigState.cpp       | 11 ++-
 .../RNSScreenStackHeaderConfigState.h         | 17 +++-
 react-navigation                              |  2 +-
 src/components/ScreenStackHeaderConfig.tsx    | 56 +++++++------
 10 files changed, 191 insertions(+), 77 deletions(-)
 create mode 100644 android/src/fabric/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt

diff --git a/android/src/fabric/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt b/android/src/fabric/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt
new file mode 100644
index 0000000000..f71dfc1774
--- /dev/null
+++ b/android/src/fabric/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt
@@ -0,0 +1,58 @@
+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
+import kotlin.math.abs
+
+abstract class FabricEnabledConfigViewGroup(
+    context: Context?,
+) : ViewGroup(context) {
+    private var mStateWrapper: StateWrapper? = null
+
+    private var lastPaddingStart = 0f
+    private var lastPaddingEnd = 0f
+
+    fun setStateWrapper(wrapper: StateWrapper?) {
+        mStateWrapper = wrapper
+    }
+
+    fun updatePaddingsFabric(
+        paddingStart: Int,
+        paddingEnd: Int,
+    ) {
+        updateState(paddingStart, paddingEnd)
+    }
+
+    @UiThread
+    fun updateState(
+        paddingStart: Int,
+        paddingEnd: Int,
+    ) {
+        val paddingLeftInDIP: Float = PixelUtil.toDIPFromPixel(paddingStart.toFloat())
+        val paddingRightInDIP: Float = PixelUtil.toDIPFromPixel(paddingEnd.toFloat())
+        // 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(lastPaddingStart - paddingStart) < delta &&
+            abs(lastPaddingEnd - paddingEnd) < delta
+        ) {
+            return
+        }
+
+        lastPaddingStart = paddingLeftInDIP
+        lastPaddingEnd = paddingRightInDIP
+
+        val map: WritableMap =
+            WritableNativeMap().apply {
+                putDouble("paddingStart", paddingLeftInDIP.toDouble())
+                putDouble("paddingEnd", paddingRightInDIP.toDouble())
+            }
+        mStateWrapper?.updateState(map)
+    }
+}
diff --git a/android/src/main/java/com/swmansion/rnscreens/CustomToolbar.kt b/android/src/main/java/com/swmansion/rnscreens/CustomToolbar.kt
index 7168a4c6fd..456ffe64a9 100644
--- a/android/src/main/java/com/swmansion/rnscreens/CustomToolbar.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/CustomToolbar.kt
@@ -9,4 +9,12 @@ import androidx.appcompat.widget.Toolbar
 open class CustomToolbar(
     context: Context,
     val config: ScreenStackHeaderConfig,
-) : Toolbar(context)
+) : Toolbar(context) {
+    override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
+        super.onLayout(changed, l, t, r, b)
+
+        // our children are already laid out
+        val contentInsetStart = if (navigationIcon != null) contentInsetStartWithNavigation else contentInsetStart
+        config.updatePaddingsFabric(contentInsetStart, contentInsetEnd)
+    }
+}
diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt
index dba26bdefa..99f79f9d2b 100644
--- a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt
@@ -25,7 +25,7 @@ import com.swmansion.rnscreens.events.HeaderDetachedEvent
 
 class ScreenStackHeaderConfig(
     context: Context,
-) : ViewGroup(context) {
+) : FabricEnabledConfigViewGroup(context) {
     private val configSubviews = ArrayList<ScreenStackHeaderSubview>(3)
     val toolbar: CustomToolbar
     var isHeaderHidden = false // named this way to avoid conflict with platform's isHidden
diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt
index 7c1893eedc..ea43106ea3 100644
--- a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt
@@ -5,6 +5,8 @@ import android.view.View
 import com.facebook.react.bridge.JSApplicationCausedNativeException
 import com.facebook.react.common.MapBuilder
 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
@@ -42,6 +44,17 @@ class ScreenStackHeaderConfigViewManager :
         parent.addConfigSubview(child, index)
     }
 
+    override fun updateState(
+        view: ScreenStackHeaderConfig,
+        props: ReactStylesDiffMap?,
+        stateWrapper: StateWrapper?
+    ): Any? {
+        if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+            view.setStateWrapper(stateWrapper)
+        }
+        return super.updateState(view, props, stateWrapper)
+    }
+
     override fun onDropViewInstance(
         @Nonnull view: ScreenStackHeaderConfig,
     ) {
diff --git a/apps/src/tests/TestHeaderTitle.tsx b/apps/src/tests/TestHeaderTitle.tsx
index 03da78c40b..b2219a1a3d 100644
--- a/apps/src/tests/TestHeaderTitle.tsx
+++ b/apps/src/tests/TestHeaderTitle.tsx
@@ -3,11 +3,38 @@ import { NavigationContainer } from '@react-navigation/native';
 import { View, Text, StyleSheet, Pressable } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { Button } from '@react-navigation/elements';
+import { NativeStackNavigationOptions } from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
 const baseTitle = 'Ab';
 
+const headerOptions = {
+  // headerLeft: () => {
+  //   return (
+  //     <View style={{ width: 80, height: 20, backgroundColor: 'goldenrod' }}>
+  //     </View>
+  //   )
+  // },
+  headerRight: () => (
+    <View style={{ }}>
+      <View style={{ width: 80, height: 20, backgroundColor: 'goldenrod', opacity: 0.4 }}>
+      </View>
+    </View>
+  ),
+  // headerTitle: baseTitle.repeat(20),
+  // headerTitle: () => (
+  //   <Text>{baseTitle.repeat(20)}</Text>
+  // ),
+  // headerTitle: () => (
+  //   <View style={{ height: 20, flex: 1, flexDirection: 'row', justifyContent: 'center' }}>
+  //     <Text numberOfLines={1} style={{}}>{baseTitle.repeat(10)}</Text>
+  //   </View>
+  // ),
+  title: baseTitle.repeat(10),
+  headerTitleAlign: 'center',
+}
+
 function App() {
   return (
     <NavigationContainer>
@@ -15,57 +42,12 @@ function App() {
         <Stack.Screen
           name="Screen"
           component={Screen}
-          options={{
-            headerLeft: () => {
-              return (
-                <View style={{ width: 80, height: 20, backgroundColor: 'goldenrod' }}>
-                </View>
-              )
-            },
-            headerRight: () => (
-              <View style={{ width: 80, height: 20, backgroundColor: 'goldenrod', opacity: 0.4 }}>
-              </View>
-            ),
-            // headerTitle: baseTitle.repeat(20),
-            // headerTitle: () => (
-            //   <Text>{baseTitle.repeat(20)}</Text>
-            // ),
-            headerTitle: () => (
-              <View style={{ height: 20 }}>
-                <Text numberOfLines={1} style={{ flexShrink: 1 }}>{baseTitle.repeat(25)}</Text>
-              </View>
-            ),
-            // title: baseTitle.repeat(15),
-            // headerTitleAlign: 'center'
-          }}
+          options={headerOptions}
         />
         <Stack.Screen
           name="Details"
           component={DetailsScreen}
-          options={({ navigation }) => ({
-            title: 'Details',
-            headerLeft: () => {
-              return (
-                <View style={{ width: 80, height: 20, backgroundColor: 'goldenrod' }}>
-                </View>
-              )
-            },
-            headerRight: () => (
-              <View style={{ width: 80, height: 20, backgroundColor: 'goldenrod', opacity: 0.4 }}>
-              </View>
-            ),
-            // headerTitle: baseTitle.repeat(20),
-            // headerTitle: () => (
-            //   <Text>{baseTitle.repeat(20)}</Text>
-            // ),
-            headerTitle: () => (
-              <View style={{ height: 20 }}>
-                <Text numberOfLines={1} style={{ flexShrink: 1 }}>{baseTitle.repeat(25)}</Text>
-              </View>
-            ),
-            // title: baseTitle.repeat(15),
-            // headerTitleAlign: 'center'
-          })}
+          options={headerOptions}
         />
       </Stack.Navigator>
     </NavigationContainer>
@@ -77,7 +59,7 @@ function Screen({ navigation }: any) {
     <View style={styles.container}>
       <View style={{ justifyContent: 'center', alignItems: 'flex-start' }}>
         <View style={{ backgroundColor: 'goldenrod', flexDirection: 'row', width: 200 }}>
-          <View collapsable={false} style={{ flex: 1}}>
+          <View collapsable={false} style={{ flex: 1 }}>
             <Text numberOfLines={1} style={{}}>{baseTitle.repeat(20)}</Text>
           </View>
           <View collapsable={false} style={{}}>
@@ -89,7 +71,7 @@ function Screen({ navigation }: any) {
         </View>
       </View>
 
-      <Button onPress={() => navigation.navigate("Details")} title="GoDetails"/>
+      <Button onPress={() => navigation.navigate("Details")} title="GoDetails" />
     </View>
   );
 }
diff --git a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h
index 1bc46ea86b..7eb35f0fe7 100644
--- a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h
+++ b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h
@@ -19,6 +19,25 @@ class RNSScreenStackHeaderConfigComponentDescriptor final
   using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
 
   void adopt(ShadowNode &shadowNode) const override {
+#ifdef ANDROID
+    react_native_assert(
+        dynamic_cast<RNSScreenStackHeaderConfigShadowNode *>(&shadowNode));
+    auto &configShadowNode =
+        static_cast<RNSScreenStackHeaderConfigShadowNode &>(shadowNode);
+
+    react_native_assert(
+        dynamic_cast<YogaLayoutableShadowNode *>(&configShadowNode));
+    auto &layoutableShadowNode =
+        dynamic_cast<YogaLayoutableShadowNode &>(configShadowNode);
+
+    auto state = std::static_pointer_cast<
+        const RNSScreenStackHeaderConfigShadowNode::ConcreteState>(
+        shadowNode.getState());
+    auto stateData = state->getData();
+
+    layoutableShadowNode.setPadding(
+        {stateData.getPaddingStart(), 0, stateData.getPaddingEnd(), 0});
+#endif
     ConcreteComponentDescriptor::adopt(shadowNode);
   }
 };
diff --git a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.cpp b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.cpp
index 959e8e968c..759a917444 100644
--- a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.cpp
+++ b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.cpp
@@ -5,7 +5,16 @@ namespace react {
 
 #ifdef ANDROID
 folly::dynamic RNSScreenStackHeaderConfigState::getDynamic() const {
-  return folly::dynamic::object();
+  return folly::dynamic::object("paddingStart", paddingStart_)(
+      "paddingEnd_", paddingEnd_);
+}
+
+Float RNSScreenStackHeaderConfigState::getPaddingStart() const noexcept {
+  return paddingStart_;
+}
+
+Float RNSScreenStackHeaderConfigState::getPaddingEnd() const noexcept {
+  return paddingEnd_;
 }
 #endif
 
diff --git a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.h b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.h
index f39b61726a..08b402b69e 100644
--- a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.h
+++ b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.h
@@ -17,10 +17,15 @@ class JSI_EXPORT RNSScreenStackHeaderConfigState final {
 
   RNSScreenStackHeaderConfigState() = default;
 
+  RNSScreenStackHeaderConfigState(Float paddingStart, Float paddingEnd)
+      : paddingStart_{paddingStart}, paddingEnd_{paddingEnd} {}
+
 #ifdef ANDROID
   RNSScreenStackHeaderConfigState(
       RNSScreenStackHeaderConfigState const &previousState,
-      folly::dynamic data) {}
+      folly::dynamic data)
+      : paddingStart_{static_cast<Float>(data["paddingStart"].getDouble())},
+        paddingEnd_{static_cast<Float>(data["paddingEnd"].getDouble())} {}
 #endif
 
 #ifdef ANDROID
@@ -28,9 +33,19 @@ class JSI_EXPORT RNSScreenStackHeaderConfigState final {
   MapBuffer getMapBuffer() const {
     return MapBufferBuilder::EMPTY();
   };
+
+  [[nodiscard]] Float getPaddingStart() const noexcept;
+
+  [[nodiscard]] Float getPaddingEnd() const noexcept;
 #endif
 
 #pragma mark - Getters
+
+#ifdef ANDROID
+ private:
+  Float paddingStart_{0.f};
+  Float paddingEnd_{0.f};
+#endif
 };
 
 } // namespace facebook::react
diff --git a/react-navigation b/react-navigation
index 248fcf7d32..a1469952c1 160000
--- a/react-navigation
+++ b/react-navigation
@@ -1 +1 @@
-Subproject commit 248fcf7d328b7a813106f5306a78ffd7eef5bcb3
+Subproject commit a1469952c19b4e11f76a48a001701ede839127e7
diff --git a/src/components/ScreenStackHeaderConfig.tsx b/src/components/ScreenStackHeaderConfig.tsx
index e6565fb0da..c812e98c91 100644
--- a/src/components/ScreenStackHeaderConfig.tsx
+++ b/src/components/ScreenStackHeaderConfig.tsx
@@ -26,33 +26,45 @@ export const ScreenStackHeaderBackButtonImage = (
 
 export const ScreenStackHeaderRightView = (
   props: React.PropsWithChildren<ViewProps>,
-): JSX.Element => (
-  <ScreenStackHeaderSubview
-    {...props}
-    type="right"
-    style={styles.headerSubview}
-  />
-);
+): JSX.Element => {
+  const { style, ...rest } = props;
+
+  return (
+    <ScreenStackHeaderSubview
+      {...rest}
+      type="right"
+      style={[styles.headerSubview, style, { flex: undefined }]}
+    />
+  );
+};
 
 export const ScreenStackHeaderLeftView = (
   props: React.PropsWithChildren<ViewProps>,
-): JSX.Element => (
-  <ScreenStackHeaderSubview
-    {...props}
-    type="left"
-    style={styles.headerSubview}
-  />
-);
+): JSX.Element => {
+  const { style, ...rest } = props;
+
+  return (
+    <ScreenStackHeaderSubview
+      {...rest}
+      type="left"
+      style={[styles.headerSubview, style]}
+    />
+  );
+};
 
 export const ScreenStackHeaderCenterView = (
   props: React.PropsWithChildren<ViewProps>,
-): JSX.Element => (
-  <ScreenStackHeaderSubview
-    {...props}
-    type="center"
-    style={[styles.headerSubview, { borderWidth: 2, borderColor: 'blue' }]}
-  />
-);
+): JSX.Element => {
+  const { style, ...rest } = props;
+
+  return (
+    <ScreenStackHeaderSubview
+      {...rest}
+      type="center"
+      style={[styles.headerSubview, style]}
+    />
+  );
+};
 
 export const ScreenStackHeaderSearchBarView = (
   props: React.PropsWithChildren<SearchBarProps>,
@@ -67,8 +79,6 @@ export const ScreenStackHeaderSearchBarView = (
 const styles = StyleSheet.create({
   headerSubview: {
     flex: 1,
-    top: 0,
-    right: 0,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',

From 7003af126536d02be6ac58abd593fd020fc6d55e Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Fri, 30 Aug 2024 09:23:12 +0200
Subject: [PATCH 06/49] Fix Android,Paper build issues

---
 .../rnscreens/ScreenStackHeaderConfig.kt      |  2 +-
 .../rnscreens/FabricEnabledConfigViewGroup.kt | 21 +++++++++++++++++++
 .../rnscreens/FabricEnabledViewGroup.kt       |  2 ++
 3 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt

diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt
index 99f79f9d2b..7d89c8dcac 100644
--- a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt
@@ -1,5 +1,6 @@
 package com.swmansion.rnscreens
 
+import FabricEnabledConfigViewGroup
 import android.content.Context
 import android.graphics.PorterDuff
 import android.graphics.PorterDuffColorFilter
@@ -8,7 +9,6 @@ import android.text.TextUtils
 import android.util.TypedValue
 import android.view.Gravity
 import android.view.View.OnClickListener
-import android.view.ViewGroup
 import android.view.WindowInsets
 import android.widget.ImageView
 import android.widget.TextView
diff --git a/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt b/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt
new file mode 100644
index 0000000000..43dec8add6
--- /dev/null
+++ b/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt
@@ -0,0 +1,21 @@
+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
+import kotlin.math.abs
+
+abstract class FabricEnabledConfigViewGroup(
+    context: Context?,
+) : ViewGroup(context) {
+    private var mStateWrapper: StateWrapper? = null
+
+    fun setStateWrapper(wrapper: StateWrapper?) = Unit
+
+    fun updatePaddingsFabric(
+        paddingStart: Int,
+        paddingEnd: Int,
+    ) = Unit
+}
\ No newline at end of file
diff --git a/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledViewGroup.kt b/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledViewGroup.kt
index d575094dc8..a1be0fc548 100644
--- a/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledViewGroup.kt
+++ b/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledViewGroup.kt
@@ -17,3 +17,5 @@ abstract class FabricEnabledViewGroup(
         // do nothing
     }
 }
+
+

From 558a9b6c27502d31509f22d3be42506cfbf0c734 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Fri, 30 Aug 2024 09:38:29 +0200
Subject: [PATCH 07/49] Working PoC on Fabric

---
 apps/src/tests/TestHeaderTitle.tsx         | 33 ++++++++++------------
 src/components/ScreenStackHeaderConfig.tsx |  3 +-
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/apps/src/tests/TestHeaderTitle.tsx b/apps/src/tests/TestHeaderTitle.tsx
index b2219a1a3d..ea2ce74a6e 100644
--- a/apps/src/tests/TestHeaderTitle.tsx
+++ b/apps/src/tests/TestHeaderTitle.tsx
@@ -1,23 +1,21 @@
 import * as React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
-import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { View, Text, StyleSheet, Pressable, Button } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { Button } from '@react-navigation/elements';
-import { NativeStackNavigationOptions } from 'react-native-screens/native-stack';
 
 const Stack = createNativeStackNavigator();
 
 const baseTitle = 'Ab';
 
 const headerOptions = {
-  // headerLeft: () => {
-  //   return (
-  //     <View style={{ width: 80, height: 20, backgroundColor: 'goldenrod' }}>
-  //     </View>
-  //   )
-  // },
+  headerLeft: () => {
+    return (
+      <View style={{ width: 80, height: 20, backgroundColor: 'goldenrod' }}>
+      </View>
+    )
+  },
   headerRight: () => (
-    <View style={{ }}>
+    <View style={{}}>
       <View style={{ width: 80, height: 20, backgroundColor: 'goldenrod', opacity: 0.4 }}>
       </View>
     </View>
@@ -26,13 +24,13 @@ const headerOptions = {
   // headerTitle: () => (
   //   <Text>{baseTitle.repeat(20)}</Text>
   // ),
-  // headerTitle: () => (
-  //   <View style={{ height: 20, flex: 1, flexDirection: 'row', justifyContent: 'center' }}>
-  //     <Text numberOfLines={1} style={{}}>{baseTitle.repeat(10)}</Text>
-  //   </View>
-  // ),
-  title: baseTitle.repeat(10),
-  headerTitleAlign: 'center',
+  headerTitle: () => (
+    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center' }}>
+      <Text numberOfLines={1} style={{}}>{baseTitle.repeat(20)}</Text>
+    </View>
+  ),
+  // title: baseTitle.repeat(20),
+  headerTitleAlign: 'left',
 }
 
 function App() {
@@ -70,7 +68,6 @@ function Screen({ navigation }: any) {
           </View>
         </View>
       </View>
-
       <Button onPress={() => navigation.navigate("Details")} title="GoDetails" />
     </View>
   );
diff --git a/src/components/ScreenStackHeaderConfig.tsx b/src/components/ScreenStackHeaderConfig.tsx
index c812e98c91..f832ca6bdb 100644
--- a/src/components/ScreenStackHeaderConfig.tsx
+++ b/src/components/ScreenStackHeaderConfig.tsx
@@ -33,7 +33,7 @@ export const ScreenStackHeaderRightView = (
     <ScreenStackHeaderSubview
       {...rest}
       type="right"
-      style={[styles.headerSubview, style, { flex: undefined }]}
+      style={[styles.headerSubview, style]}
     />
   );
 };
@@ -78,7 +78,6 @@ export const ScreenStackHeaderSearchBarView = (
 
 const styles = StyleSheet.create({
   headerSubview: {
-    flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',

From 00efd3932402b11bc6c8ebacdd5f29d638b6ccdf Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Fri, 30 Aug 2024 09:38:52 +0200
Subject: [PATCH 08/49] Fix import on Android,Fabric

---
 .../main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt | 1 -
 1 file changed, 1 deletion(-)

diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt
index 7d89c8dcac..01beee0048 100644
--- a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt
@@ -1,6 +1,5 @@
 package com.swmansion.rnscreens
 
-import FabricEnabledConfigViewGroup
 import android.content.Context
 import android.graphics.PorterDuff
 import android.graphics.PorterDuffColorFilter

From 65cf758d4afb2854dbab139f5f948833e65f8d85 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Fri, 30 Aug 2024 09:40:34 +0200
Subject: [PATCH 09/49] Fix imports on Android,Paper

---
 .../swmansion/rnscreens/FabricEnabledConfigViewGroup.kt  | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt b/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt
index 43dec8add6..f89cebb086 100644
--- a/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt
+++ b/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt
@@ -1,11 +1,8 @@
+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
-import kotlin.math.abs
 
 abstract class FabricEnabledConfigViewGroup(
     context: Context?,
@@ -18,4 +15,4 @@ abstract class FabricEnabledConfigViewGroup(
         paddingStart: Int,
         paddingEnd: Int,
     ) = Unit
-}
\ No newline at end of file
+}

From 3ca3794251751c84bcd7529bcc0b0fd55b89d90c Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Fri, 30 Aug 2024 11:21:28 +0200
Subject: [PATCH 10/49] PoC for Android,Paper

---
 .../ScreenStackHeaderConfigShadowNode.kt      | 31 +++++++++++++++++++
 .../ScreenStackHeaderConfigViewManager.kt     |  4 +++
 .../rnscreens/utils/PaddingBundle.kt          |  3 ++
 .../rnscreens/FabricEnabledConfigViewGroup.kt | 17 ++++++++--
 4 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigShadowNode.kt
 create mode 100644 android/src/main/java/com/swmansion/rnscreens/utils/PaddingBundle.kt

diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigShadowNode.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigShadowNode.kt
new file mode 100644
index 0000000000..39eec60c91
--- /dev/null
+++ b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigShadowNode.kt
@@ -0,0 +1,31 @@
+package com.swmansion.rnscreens
+
+import android.util.Log
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.LayoutShadowNode
+import com.facebook.react.uimanager.Spacing
+import com.swmansion.rnscreens.utils.PaddingBundle
+
+internal class ScreenStackHeaderConfigShadowNode(
+    private var context: ReactContext,
+) : LayoutShadowNode() {
+    var paddingStart: Float = 0f
+    var paddingEnd: Float = 0f
+
+    override fun setLocalData(data: Any?) {
+        if (data is PaddingBundle) {
+            Log.i("ShadowNode", "$data")
+            paddingStart = data.paddingStart
+            paddingEnd = data.paddingEnd
+
+            setPadding(Spacing.START, paddingStart)
+            setPadding(Spacing.END, paddingEnd)
+//            markUpdated()
+        } else {
+            super.setLocalData(data)
+        }
+
+//        dirty()
+//        markUpdated()
+    }
+}
diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt
index ea43106ea3..49181266c8 100644
--- a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt
@@ -3,8 +3,10 @@ package com.swmansion.rnscreens
 import android.util.Log
 import android.view.View
 import com.facebook.react.bridge.JSApplicationCausedNativeException
+import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.common.MapBuilder
 import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.LayoutShadowNode
 import com.facebook.react.uimanager.ReactStylesDiffMap
 import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.uimanager.ThemedReactContext
@@ -31,6 +33,8 @@ class ScreenStackHeaderConfigViewManager :
 
     override fun createViewInstance(reactContext: ThemedReactContext) = ScreenStackHeaderConfig(reactContext)
 
+    override fun createShadowNodeInstance(context: ReactApplicationContext): LayoutShadowNode = ScreenStackHeaderConfigShadowNode(context)
+
     override fun addView(
         parent: ScreenStackHeaderConfig,
         child: View,
diff --git a/android/src/main/java/com/swmansion/rnscreens/utils/PaddingBundle.kt b/android/src/main/java/com/swmansion/rnscreens/utils/PaddingBundle.kt
new file mode 100644
index 0000000000..9654cbed71
--- /dev/null
+++ b/android/src/main/java/com/swmansion/rnscreens/utils/PaddingBundle.kt
@@ -0,0 +1,3 @@
+package com.swmansion.rnscreens.utils
+
+data class PaddingBundle(val paddingStart: Float, val paddingEnd: Float)
diff --git a/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt b/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt
index f89cebb086..82f4652090 100644
--- a/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt
+++ b/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt
@@ -2,10 +2,16 @@ package com.swmansion.rnscreens
 
 import android.content.Context
 import android.view.ViewGroup
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.StateWrapper
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.UIManagerModule
+import com.facebook.react.uimanager.common.UIManagerType
+import com.swmansion.rnscreens.utils.PaddingBundle
 
 abstract class FabricEnabledConfigViewGroup(
-    context: Context?,
+    context: Context,
 ) : ViewGroup(context) {
     private var mStateWrapper: StateWrapper? = null
 
@@ -14,5 +20,12 @@ abstract class FabricEnabledConfigViewGroup(
     fun updatePaddingsFabric(
         paddingStart: Int,
         paddingEnd: Int,
-    ) = Unit
+    ) {
+        val paddingStartInDip = PixelUtil.toDIPFromPixel(paddingStart.toFloat())
+        val paddingEndInDip = PixelUtil.toDIPFromPixel(paddingEnd.toFloat())
+
+        val reactContext = context as ReactContext
+        val uiManagerModule = reactContext.getNativeModule(UIManagerModule::class.java)
+        uiManagerModule!!.setViewLocalData(this.id, PaddingBundle(paddingStartInDip, paddingEndInDip))
+    }
 }

From a7af4b35d87a03955ea35cdb4e8d6723d84628ce Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Fri, 30 Aug 2024 12:53:55 +0200
Subject: [PATCH 11/49] fix: pass pixel values to shadow node on paper

---
 .../com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt b/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt
index 82f4652090..19fec06606 100644
--- a/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt
+++ b/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt
@@ -5,9 +5,7 @@ import android.view.ViewGroup
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.StateWrapper
-import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.UIManagerModule
-import com.facebook.react.uimanager.common.UIManagerType
 import com.swmansion.rnscreens.utils.PaddingBundle
 
 abstract class FabricEnabledConfigViewGroup(
@@ -26,6 +24,6 @@ abstract class FabricEnabledConfigViewGroup(
 
         val reactContext = context as ReactContext
         val uiManagerModule = reactContext.getNativeModule(UIManagerModule::class.java)
-        uiManagerModule!!.setViewLocalData(this.id, PaddingBundle(paddingStartInDip, paddingEndInDip))
+        uiManagerModule!!.setViewLocalData(this.id, PaddingBundle(paddingStart.toFloat(), paddingEnd.toFloat()))
     }
 }

From 42d33169a7be60d87d426e7dfbc43b60312c3931 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Fri, 30 Aug 2024 15:59:47 +0200
Subject: [PATCH 12/49] Remove flex: 1 from subview child

---
 react-navigation | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react-navigation b/react-navigation
index a1469952c1..e151c2321c 160000
--- a/react-navigation
+++ b/react-navigation
@@ -1 +1 @@
-Subproject commit a1469952c19b4e11f76a48a001701ede839127e7
+Subproject commit e151c2321c4910a0b25979bb7de5d52297cc0c8d

From 3f38c9a50398946459e0098afcac255f6020c3d8 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 2 Sep 2024 17:32:25 +0200
Subject: [PATCH 13/49] Remove redundant logging

---
 .../swmansion/rnscreens/ScreenStackHeaderConfigShadowNode.kt    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigShadowNode.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigShadowNode.kt
index 39eec60c91..3ae95ea253 100644
--- a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigShadowNode.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigShadowNode.kt
@@ -1,6 +1,5 @@
 package com.swmansion.rnscreens
 
-import android.util.Log
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.uimanager.LayoutShadowNode
 import com.facebook.react.uimanager.Spacing
@@ -14,7 +13,6 @@ internal class ScreenStackHeaderConfigShadowNode(
 
     override fun setLocalData(data: Any?) {
         if (data is PaddingBundle) {
-            Log.i("ShadowNode", "$data")
             paddingStart = data.paddingStart
             paddingEnd = data.paddingEnd
 

From a2a5bab8c40a3d116de1f9abcc0bbe9f0f62d1bd Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Tue, 3 Sep 2024 10:17:10 +0200
Subject: [PATCH 14/49] PoC: iOS,Paper fix

---
 ios/RNSScreen.h                   |  2 ++
 ios/RNSScreen.mm                  | 13 +++++++++
 ios/RNSScreenStack.mm             | 14 +++++++++
 ios/RNSScreenStackHeaderConfig.h  | 17 +++++++++++
 ios/RNSScreenStackHeaderConfig.mm | 48 +++++++++++++++++++++++++++++++
 5 files changed, 94 insertions(+)

diff --git a/ios/RNSScreen.h b/ios/RNSScreen.h
index a5b98f4cc1..6c0a43678c 100644
--- a/ios/RNSScreen.h
+++ b/ios/RNSScreen.h
@@ -135,6 +135,8 @@ namespace react = facebook::react;
 /// Looks for header configuration in instance's `reactSubviews` and returns it. If not present returns `nil`.
 - (RNSScreenStackHeaderConfig *_Nullable)findHeaderConfig;
 
+- (void)updateHeaderInsetsInShadowTreeTo:(NSDirectionalEdgeInsets)insets;
+
 @end
 
 @interface UIView (RNSScreen)
diff --git a/ios/RNSScreen.mm b/ios/RNSScreen.mm
index a207074d17..24f3807d4f 100644
--- a/ios/RNSScreen.mm
+++ b/ios/RNSScreen.mm
@@ -71,6 +71,7 @@ @implementation RNSScreenView {
   __weak RCTBridge *_bridge;
   RCTTouchHandler *_touchHandler;
   CGRect _reactFrame;
+  NSDirectionalEdgeInsets _lastHeaderInsets;
 #endif
 }
 
@@ -137,6 +138,18 @@ - (UIViewController *)reactViewController
 }
 #endif
 
+- (void)updateHeaderInsetsInShadowTreeTo:(NSDirectionalEdgeInsets)insets
+{
+#ifdef RCT_NEW_ARCH_ENABLED
+#else
+  if (_lastHeaderInsets.leading != insets.leading || _lastHeaderInsets.trailing != insets.trailing) {
+    [_bridge.uiManager setLocalData:[[RNSHeaderConfigInsetsPayload alloc] initWithInsets:insets]
+                            forView:self.findHeaderConfig];
+    _lastHeaderInsets = insets;
+  }
+#endif // RCT_NEW_ARCH_ENABLED
+}
+
 - (void)updateBounds
 {
 #ifdef RCT_NEW_ARCH_ENABLED
diff --git a/ios/RNSScreenStack.mm b/ios/RNSScreenStack.mm
index 50e7cc0fe1..bc195a901c 100644
--- a/ios/RNSScreenStack.mm
+++ b/ios/RNSScreenStack.mm
@@ -82,6 +82,20 @@ - (void)viewDidLayoutSubviews
     if (![screenController hasNestedStack] && isNotDismissingModal) {
       [screenController calculateAndNotifyHeaderHeightChangeIsModal:NO];
     }
+
+    NSDirectionalEdgeInsets navBarMargins = [self.navigationBar directionalLayoutMargins];
+    NSDirectionalEdgeInsets navBarContentMargins = [self.navigationBar.subviews[1] directionalLayoutMargins];
+    NSDirectionalEdgeInsets titleViewMargins = self.navigationBar.topItem.titleView.directionalLayoutMargins;
+
+    // I think there could be bug if we have one push screen and one modal!
+    BOOL isDisplayingBackButton = self.viewControllers.count > 1;
+
+    [screenController.screenView
+        updateHeaderInsetsInShadowTreeTo:NSDirectionalEdgeInsets{
+                                             .leading = navBarMargins.leading + navBarContentMargins.leading +
+                                                 (isDisplayingBackButton ? 44 : 0),
+                                             .trailing = navBarMargins.trailing + navBarContentMargins.trailing,
+                                         }];
   }
 }
 
diff --git a/ios/RNSScreenStackHeaderConfig.h b/ios/RNSScreenStackHeaderConfig.h
index 0c74aab332..edfe4bebef 100644
--- a/ios/RNSScreenStackHeaderConfig.h
+++ b/ios/RNSScreenStackHeaderConfig.h
@@ -1,6 +1,7 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTViewComponentView.h>
 #else
+#import <React/RCTShadowView.h>
 #import <React/RCTViewManager.h>
 #endif
 
@@ -67,6 +68,22 @@
 
 @end
 
+#ifdef RCT_NEW_ARCH_ENABLED
+#else
+
+@interface RNSHeaderConfigInsetsPayload : NSObject
+
+@property (nonatomic) NSDirectionalEdgeInsets insets;
+
+- (instancetype)initWithInsets:(NSDirectionalEdgeInsets)insets NS_DESIGNATED_INITIALIZER;
+
+@end
+
+@interface RNSScreenStackHeaderConfigShadowView : RCTShadowView
+
+@end
+#endif
+
 @interface RCTConvert (RNSScreenStackHeader)
 
 + (UIBlurEffectStyle)UIBlurEffectStyle:(id)json;
diff --git a/ios/RNSScreenStackHeaderConfig.mm b/ios/RNSScreenStackHeaderConfig.mm
index 4750e9be0f..ec316c926a 100644
--- a/ios/RNSScreenStackHeaderConfig.mm
+++ b/ios/RNSScreenStackHeaderConfig.mm
@@ -966,6 +966,14 @@ - (UIView *)view
   return [RNSScreenStackHeaderConfig new];
 }
 
+#ifdef RCT_NEW_ARCH_ENABLED
+#else
+- (RCTShadowView *)shadowView
+{
+  return [RNSScreenStackHeaderConfigShadowView new];
+}
+#endif // RCT_NEW_ARCH_ENABLED
+
 RCT_EXPORT_VIEW_PROPERTY(title, NSString)
 RCT_EXPORT_VIEW_PROPERTY(titleFontFamily, NSString)
 RCT_EXPORT_VIEW_PROPERTY(titleFontSize, NSNumber)
@@ -996,6 +1004,46 @@ - (UIView *)view
 
 @end
 
+#ifdef RCT_NEW_ARCH_ENABLED
+#else
+
+@implementation RNSHeaderConfigInsetsPayload
+
+- (instancetype)init
+{
+  return [self initWithInsets:NSDirectionalEdgeInsets{}];
+}
+
+- (instancetype)initWithInsets:(NSDirectionalEdgeInsets)insets
+{
+  if (self = [super init]) {
+    self.insets = insets;
+  }
+  return self;
+}
+
+@end
+
+@implementation RNSScreenStackHeaderConfigShadowView {
+}
+
+- (void)setLocalData:(NSObject *)localData
+{
+  if ([localData isKindOfClass:RNSHeaderConfigInsetsPayload.class]) {
+    RNSHeaderConfigInsetsPayload *payload = (RNSHeaderConfigInsetsPayload *)localData;
+    [self setPaddingStart:YGValue{.value = (float)payload.insets.leading, .unit = YGUnitPoint}];
+    [self setPaddingEnd:YGValue{.value = (float)payload.insets.trailing, .unit = YGUnitPoint}];
+
+    // Trigger layout prop recomputation
+    [self didSetProps:@[]];
+  } else {
+    [super setLocalData:localData];
+  }
+}
+
+@end
+#endif
+
 @implementation RCTConvert (RNSScreenStackHeader)
 
 + (NSMutableDictionary *)blurEffectsForIOSVersion

From bee5c84300a5a8fb44fdc9f11863c3bd54f4a8c2 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Tue, 3 Sep 2024 10:17:24 +0200
Subject: [PATCH 15/49] Bump react-navigation

---
 react-navigation | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react-navigation b/react-navigation
index e151c2321c..fe3ebf3e0d 160000
--- a/react-navigation
+++ b/react-navigation
@@ -1 +1 @@
-Subproject commit e151c2321c4910a0b25979bb7de5d52297cc0c8d
+Subproject commit fe3ebf3e0d570d1966f29d04eac53b0196af422e

From 2cd6a5bf30b185ab63ddf728dcf9124f5edb28c0 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Thu, 12 Sep 2024 11:12:20 +0200
Subject: [PATCH 16/49] Patch crash on iOS when there arent at least two
 subviews

---
 ios/RNSScreenStack.mm | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/ios/RNSScreenStack.mm b/ios/RNSScreenStack.mm
index bc195a901c..2ebe3c1c17 100644
--- a/ios/RNSScreenStack.mm
+++ b/ios/RNSScreenStack.mm
@@ -84,6 +84,11 @@ - (void)viewDidLayoutSubviews
     }
 
     NSDirectionalEdgeInsets navBarMargins = [self.navigationBar directionalLayoutMargins];
+
+    if (self.navigationBar.subviews.count < 2) {
+      return;
+    }
+
     NSDirectionalEdgeInsets navBarContentMargins = [self.navigationBar.subviews[1] directionalLayoutMargins];
     NSDirectionalEdgeInsets titleViewMargins = self.navigationBar.topItem.titleView.directionalLayoutMargins;
 

From ee956a5e0642fb614ae41847785cd9e9e86f1d05 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Thu, 12 Sep 2024 15:09:08 +0200
Subject: [PATCH 17/49] Patch for native Android code

---
 .../rnscreens/ScreenStackHeaderConfigShadowNode.kt          | 4 ----
 .../com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt | 6 +++---
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigShadowNode.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigShadowNode.kt
index 3ae95ea253..48a864ff5a 100644
--- a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigShadowNode.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigShadowNode.kt
@@ -18,12 +18,8 @@ internal class ScreenStackHeaderConfigShadowNode(
 
             setPadding(Spacing.START, paddingStart)
             setPadding(Spacing.END, paddingEnd)
-//            markUpdated()
         } else {
             super.setLocalData(data)
         }
-
-//        dirty()
-//        markUpdated()
     }
 }
diff --git a/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt b/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt
index 19fec06606..854a48c440 100644
--- a/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt
+++ b/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt
@@ -22,8 +22,8 @@ abstract class FabricEnabledConfigViewGroup(
         val paddingStartInDip = PixelUtil.toDIPFromPixel(paddingStart.toFloat())
         val paddingEndInDip = PixelUtil.toDIPFromPixel(paddingEnd.toFloat())
 
-        val reactContext = context as ReactContext
-        val uiManagerModule = reactContext.getNativeModule(UIManagerModule::class.java)
-        uiManagerModule!!.setViewLocalData(this.id, PaddingBundle(paddingStart.toFloat(), paddingEnd.toFloat()))
+        val reactContext = context as? ReactContext
+        val uiManagerModule = reactContext?.getNativeModule(UIManagerModule::class.java)
+        uiManagerModule?.setViewLocalData(this.id, PaddingBundle(paddingStart.toFloat(), paddingEnd.toFloat()))
     }
 }

From 556b63d1f5419bdaf395f4bf953a8674b5dcd210 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Fri, 13 Sep 2024 12:35:17 +0200
Subject: [PATCH 18/49] Enable cpp part of fix for iOS

---
 .../RNSScreenStackHeaderConfigComponentDescriptor.h      | 2 --
 .../rnscreens/RNSScreenStackHeaderConfigState.cpp        | 3 ++-
 .../rnscreens/RNSScreenStackHeaderConfigState.h          | 9 ++++-----
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h
index 7eb35f0fe7..3284f7136f 100644
--- a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h
+++ b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h
@@ -19,7 +19,6 @@ class RNSScreenStackHeaderConfigComponentDescriptor final
   using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
 
   void adopt(ShadowNode &shadowNode) const override {
-#ifdef ANDROID
     react_native_assert(
         dynamic_cast<RNSScreenStackHeaderConfigShadowNode *>(&shadowNode));
     auto &configShadowNode =
@@ -37,7 +36,6 @@ class RNSScreenStackHeaderConfigComponentDescriptor final
 
     layoutableShadowNode.setPadding(
         {stateData.getPaddingStart(), 0, stateData.getPaddingEnd(), 0});
-#endif
     ConcreteComponentDescriptor::adopt(shadowNode);
   }
 };
diff --git a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.cpp b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.cpp
index 759a917444..49422783e5 100644
--- a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.cpp
+++ b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.cpp
@@ -9,6 +9,8 @@ folly::dynamic RNSScreenStackHeaderConfigState::getDynamic() const {
       "paddingEnd_", paddingEnd_);
 }
 
+#endif
+
 Float RNSScreenStackHeaderConfigState::getPaddingStart() const noexcept {
   return paddingStart_;
 }
@@ -16,7 +18,6 @@ Float RNSScreenStackHeaderConfigState::getPaddingStart() const noexcept {
 Float RNSScreenStackHeaderConfigState::getPaddingEnd() const noexcept {
   return paddingEnd_;
 }
-#endif
 
 } // namespace react
 } // namespace facebook
diff --git a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.h b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.h
index 08b402b69e..c1738b177a 100644
--- a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.h
+++ b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigState.h
@@ -34,18 +34,17 @@ class JSI_EXPORT RNSScreenStackHeaderConfigState final {
     return MapBufferBuilder::EMPTY();
   };
 
-  [[nodiscard]] Float getPaddingStart() const noexcept;
-
-  [[nodiscard]] Float getPaddingEnd() const noexcept;
 #endif
 
 #pragma mark - Getters
 
-#ifdef ANDROID
+  [[nodiscard]] Float getPaddingStart() const noexcept;
+
+  [[nodiscard]] Float getPaddingEnd() const noexcept;
+
  private:
   Float paddingStart_{0.f};
   Float paddingEnd_{0.f};
-#endif
 };
 
 } // namespace facebook::react

From 05c17f9450cf3afb832834cd6af71e13df917be9 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Fri, 13 Sep 2024 12:36:12 +0200
Subject: [PATCH 19/49] Multiple things (see commit details)

* Add PoC for Fabric fix (not entirely working yet)
* Move header inset updating code to the header config - it didn't make
  much sense for this code to live in screen.
* Moved all the code fix from `viewDidLayoutSubviews` to separate method
* Added few helper methods on HeaderConfig
---
 ios/RNSScreen.h                    |  2 -
 ios/RNSScreen.mm                   | 14 +-----
 ios/RNSScreenStack.mm              | 45 ++++++++++--------
 ios/RNSScreenStackHeaderConfig.h   | 36 +++++++++++++++
 ios/RNSScreenStackHeaderConfig.mm  | 73 ++++++++++++++++++++++++++----
 ios/RNSScreenStackHeaderSubview.mm |  2 +
 6 files changed, 131 insertions(+), 41 deletions(-)

diff --git a/ios/RNSScreen.h b/ios/RNSScreen.h
index 6c0a43678c..a5b98f4cc1 100644
--- a/ios/RNSScreen.h
+++ b/ios/RNSScreen.h
@@ -135,8 +135,6 @@ namespace react = facebook::react;
 /// Looks for header configuration in instance's `reactSubviews` and returns it. If not present returns `nil`.
 - (RNSScreenStackHeaderConfig *_Nullable)findHeaderConfig;
 
-- (void)updateHeaderInsetsInShadowTreeTo:(NSDirectionalEdgeInsets)insets;
-
 @end
 
 @interface UIView (RNSScreen)
diff --git a/ios/RNSScreen.mm b/ios/RNSScreen.mm
index 24f3807d4f..6724a5b9f5 100644
--- a/ios/RNSScreen.mm
+++ b/ios/RNSScreen.mm
@@ -61,6 +61,7 @@ @interface RNSScreenView () <
 @implementation RNSScreenView {
   __weak ReactScrollViewBase *_sheetsScrollView;
   BOOL _didSetSheetAllowedDetentsOnController;
+  NSDirectionalEdgeInsets _lastHeaderInsets;
 #ifdef RCT_NEW_ARCH_ENABLED
   RCTSurfaceTouchHandler *_touchHandler;
   react::RNSScreenShadowNode::ConcreteState::Shared _state;
@@ -71,7 +72,6 @@ @implementation RNSScreenView {
   __weak RCTBridge *_bridge;
   RCTTouchHandler *_touchHandler;
   CGRect _reactFrame;
-  NSDirectionalEdgeInsets _lastHeaderInsets;
 #endif
 }
 
@@ -138,18 +138,6 @@ - (UIViewController *)reactViewController
 }
 #endif
 
-- (void)updateHeaderInsetsInShadowTreeTo:(NSDirectionalEdgeInsets)insets
-{
-#ifdef RCT_NEW_ARCH_ENABLED
-#else
-  if (_lastHeaderInsets.leading != insets.leading || _lastHeaderInsets.trailing != insets.trailing) {
-    [_bridge.uiManager setLocalData:[[RNSHeaderConfigInsetsPayload alloc] initWithInsets:insets]
-                            forView:self.findHeaderConfig];
-    _lastHeaderInsets = insets;
-  }
-#endif // RCT_NEW_ARCH_ENABLED
-}
-
 - (void)updateBounds
 {
 #ifdef RCT_NEW_ARCH_ENABLED
diff --git a/ios/RNSScreenStack.mm b/ios/RNSScreenStack.mm
index 2ebe3c1c17..e5574b0df4 100644
--- a/ios/RNSScreenStack.mm
+++ b/ios/RNSScreenStack.mm
@@ -83,24 +83,7 @@ - (void)viewDidLayoutSubviews
       [screenController calculateAndNotifyHeaderHeightChangeIsModal:NO];
     }
 
-    NSDirectionalEdgeInsets navBarMargins = [self.navigationBar directionalLayoutMargins];
-
-    if (self.navigationBar.subviews.count < 2) {
-      return;
-    }
-
-    NSDirectionalEdgeInsets navBarContentMargins = [self.navigationBar.subviews[1] directionalLayoutMargins];
-    NSDirectionalEdgeInsets titleViewMargins = self.navigationBar.topItem.titleView.directionalLayoutMargins;
-
-    // I think there could be bug if we have one push screen and one modal!
-    BOOL isDisplayingBackButton = self.viewControllers.count > 1;
-
-    [screenController.screenView
-        updateHeaderInsetsInShadowTreeTo:NSDirectionalEdgeInsets{
-                                             .leading = navBarMargins.leading + navBarContentMargins.leading +
-                                                 (isDisplayingBackButton ? 44 : 0),
-                                             .trailing = navBarMargins.trailing + navBarContentMargins.trailing,
-                                         }];
+    [self maybeUpdateHeaderInsetsInShadowTreeForScreen:screenController];
   }
 }
 
@@ -113,6 +96,32 @@ - (UIViewController *)childViewControllerForHomeIndicatorAutoHidden
 {
   return [self topViewController];
 }
+
+- (void)maybeUpdateHeaderInsetsInShadowTreeForScreen:(RNSScreen *)screenController
+{
+  // This might happen e.g. if there is only native title present in navigation bar.
+  if (self.navigationBar.subviews.count < 2) {
+    return;
+  }
+
+  auto headerConfig = screenController.screenView.findHeaderConfig;
+  if (headerConfig == nil || !headerConfig.shouldHeaderBeVisible) {
+    return;
+  }
+
+  NSDirectionalEdgeInsets navBarMargins = [self.navigationBar directionalLayoutMargins];
+  NSDirectionalEdgeInsets navBarContentMargins = [self.navigationBar.subviews[1] directionalLayoutMargins];
+  NSDirectionalEdgeInsets titleViewMargins = self.navigationBar.topItem.titleView.directionalLayoutMargins;
+
+  // I think there could be bug e.g. if we have one push screen and one modal!
+  BOOL isDisplayingBackButton = self.viewControllers.count > 1 && !headerConfig.hasSubviewLeft;
+
+  [headerConfig updateHeaderInsetsInShadowTreeTo:NSDirectionalEdgeInsets{
+                                                     .leading = navBarMargins.leading + navBarContentMargins.leading +
+                                                         (isDisplayingBackButton ? 44 : 0),
+                                                     .trailing = navBarMargins.trailing + navBarContentMargins.trailing,
+                                                 }];
+}
 #endif
 
 @end
diff --git a/ios/RNSScreenStackHeaderConfig.h b/ios/RNSScreenStackHeaderConfig.h
index edfe4bebef..14e6a342fa 100644
--- a/ios/RNSScreenStackHeaderConfig.h
+++ b/ios/RNSScreenStackHeaderConfig.h
@@ -62,6 +62,38 @@
                       animated:(BOOL)animated
                     withConfig:(RNSScreenStackHeaderConfig *)config;
 
+/**
+ * Allows to send information with insets to the corresponding node in shadow tree.
+ * Currently only horizontal insets are send through. Vertical ones are filtered out.
+ */
+- (void)updateHeaderInsetsInShadowTreeTo:(NSDirectionalEdgeInsets)insets;
+
+/**
+ * Returns true iff subview of given `type` is present.
+ *
+ *  **Please note that the subviews are not mounted under the header config in HostTree**
+ * This method should serve only to check whether given subview type has been rendered.
+ */
+- (BOOL)hasSubviewOfType:(RNSScreenStackHeaderSubviewType)type;
+
+/**
+ * Returns true iff subview of type `left` is present.
+ *
+ *  **Please note that the subviews are not mounted under the header config in HostTree**
+ * This method should serve only to check whether given subview type has been rendered.
+ */
+- (BOOL)hasSubviewLeft;
+
+/**
+ * Returns
+ * - `YES` on Paper, when `self.hide == NO`
+ * - `YES` on Fabric, when `self.show == YES`
+ * - `NO` otherwise.
+ *
+ * Convenience method, so that we do not need ifdefs in every callsite.
+ */
+- (BOOL)shouldHeaderBeVisible;
+
 @end
 
 @interface RNSScreenStackHeaderConfigManager : RCTViewManager
@@ -71,6 +103,10 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #else
 
+/**
+ * Used as local data send to shadow view on Paper. This helps us to provide Yoga
+ * with knowledge of native insets in the navigation bar.
+ */
 @interface RNSHeaderConfigInsetsPayload : NSObject
 
 @property (nonatomic) NSDirectionalEdgeInsets insets;
diff --git a/ios/RNSScreenStackHeaderConfig.mm b/ios/RNSScreenStackHeaderConfig.mm
index ec316c926a..d637571112 100644
--- a/ios/RNSScreenStackHeaderConfig.mm
+++ b/ios/RNSScreenStackHeaderConfig.mm
@@ -8,6 +8,7 @@
 #import <react/renderer/components/rnscreens/EventEmitters.h>
 #import <react/renderer/components/rnscreens/Props.h>
 #import <react/renderer/components/rnscreens/RCTComponentViewHelpers.h>
+#import <rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h>
 #import "RCTImageComponentView+RNSScreenStackHeaderConfig.h"
 #else
 #import <React/RCTImageView.h>
@@ -55,9 +56,12 @@ + (BOOL)RNSisBlank:(NSString *)string
 
 @implementation RNSScreenStackHeaderConfig {
   NSMutableArray<RNSScreenStackHeaderSubview *> *_reactSubviews;
+  NSDirectionalEdgeInsets _lastHeaderInsets;
 #ifdef RCT_NEW_ARCH_ENABLED
   BOOL _initialPropsSet;
+  react::RNSScreenStackHeaderConfigShadowNode::ConcreteState::Shared _state;
 #else
+  __weak RCTBridge *_bridge;
 #endif
 }
 
@@ -89,6 +93,16 @@ - (instancetype)init
   }
   return self;
 }
+
+- (instancetype)initWithBridge:(RCTBridge *)bridge
+{
+  if (self = [super init]) {
+    _bridge = bridge;
+    _translucent = YES;
+    [self initProps];
+  }
+  return self;
+}
 #endif
 
 - (void)initProps
@@ -171,6 +185,45 @@ - (void)layoutNavigationControllerView
   [navctr.view setNeedsLayout];
 }
 
+- (void)updateHeaderInsetsInShadowTreeTo:(NSDirectionalEdgeInsets)insets
+{
+  if (_lastHeaderInsets.leading != insets.leading || _lastHeaderInsets.trailing != insets.trailing) {
+#ifdef RCT_NEW_ARCH_ENABLED
+    auto newState = react::RNSScreenStackHeaderConfigState{insets.leading, insets.trailing};
+    _state->updateState(std::move(newState));
+    _lastHeaderInsets = std::move(insets);
+#else
+    [_bridge.uiManager setLocalData:[[RNSHeaderConfigInsetsPayload alloc] initWithInsets:insets] forView:self];
+    _lastHeaderInsets = std::move(insets);
+#endif // RCT_NEW_ARCH_ENABLED
+  }
+}
+
+- (BOOL)hasSubviewOfType:(RNSScreenStackHeaderSubviewType)type
+{
+  for (RNSScreenStackHeaderSubview *subview in _reactSubviews) {
+    if (subview.type == type) {
+      return YES;
+    }
+  }
+
+  return NO;
+}
+
+- (BOOL)hasSubviewLeft
+{
+  return [self hasSubviewOfType:RNSScreenStackHeaderSubviewTypeLeft];
+}
+
+- (BOOL)shouldHeaderBeVisible
+{
+#ifdef RCT_NEW_ARCH_ENABLED
+  return self.show;
+#else
+  return !self.hide;
+#endif // RCT_NEW_ARCH_ENABLED
+}
+
 + (void)setAnimatedConfig:(UIViewController *)vc withConfig:(RNSScreenStackHeaderConfig *)config
 {
   UINavigationBar *navbar = ((UINavigationController *)vc.parentViewController).navigationBar;
@@ -476,11 +529,7 @@ + (void)updateViewController:(UIViewController *)vc
       currentIndex > 0 ? [navctr.viewControllers objectAtIndex:currentIndex - 1].navigationItem : nil;
 
   BOOL wasHidden = navctr.navigationBarHidden;
-#ifdef RCT_NEW_ARCH_ENABLED
-  BOOL shouldHide = config == nil || !config.show;
-#else
-  BOOL shouldHide = config == nil || config.hide;
-#endif
+  BOOL shouldHide = config == nil || !config.shouldHeaderBeVisible;
 
   if (!shouldHide && !config.translucent) {
     // when nav bar is not translucent we chage edgesForExtendedLayout to avoid system laying out
@@ -923,6 +972,12 @@ - (void)updateProps:(react::Props::Shared const &)props oldProps:(react::Props::
   [super updateProps:props oldProps:oldProps];
 }
 
+- (void)updateState:(const facebook::react::State::Shared &)state
+           oldState:(const facebook::react::State::Shared &)oldState
+{
+  _state = std::static_pointer_cast<const react::RNSScreenStackHeaderConfigShadowNode::ConcreteState>(state);
+}
+
 #else
 #pragma mark - Paper specific
 
@@ -961,17 +1016,19 @@ @implementation RNSScreenStackHeaderConfigManager
 
 RCT_EXPORT_MODULE()
 
+#ifdef RCT_NEW_ARCH_ENABLED
+#else
+
 - (UIView *)view
 {
-  return [RNSScreenStackHeaderConfig new];
+  return [[RNSScreenStackHeaderConfig alloc] initWithBridge:self.bridge];
 }
 
-#ifdef RCT_NEW_ARCH_ENABLED
-#else
 - (RCTShadowView *)shadowView
 {
   return [RNSScreenStackHeaderConfigShadowView new];
 }
+
 #endif // RCT_NEW_ARCH_ENABLED
 
 RCT_EXPORT_VIEW_PROPERTY(title, NSString)
diff --git a/ios/RNSScreenStackHeaderSubview.mm b/ios/RNSScreenStackHeaderSubview.mm
index 7057422834..16fa6d6ed3 100644
--- a/ios/RNSScreenStackHeaderSubview.mm
+++ b/ios/RNSScreenStackHeaderSubview.mm
@@ -8,6 +8,8 @@
 
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
+
+#import <rnscreens/RNSScreenStackHeaderSubviewComponentDescriptor.h>
 #endif // RCT_NEW_ARCH_ENABLED
 
 #ifdef RCT_NEW_ARCH_ENABLED

From fb3331ba32161e8f1a4d2a4d0e2d37f692f0ef96 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Fri, 13 Sep 2024 12:44:06 +0200
Subject: [PATCH 20/49] Update Example pods due to new files

---
 Example/ios/Podfile.lock                             | 10 +++++-----
 Example/ios/ScreensExample.xcodeproj/project.pbxproj |  8 ++++++++
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/Example/ios/Podfile.lock b/Example/ios/Podfile.lock
index 2dc578cf86..b252dfeece 100644
--- a/Example/ios/Podfile.lock
+++ b/Example/ios/Podfile.lock
@@ -1543,7 +1543,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (3.32.0):
+  - RNScreens (4.0.0-beta.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1787,12 +1787,12 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost: 4cb898d0bf20404aab1850c656dcea009429d6c1
-  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
+  DoubleConversion: 76ab83afb40bddeeee456813d9c04f67f78771b5
   FBLazyVector: d08b51db67e61e1adaed7aefdb43b43f247ee46a
   fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
-  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
+  glog: 69ef571f3de08433d766d614c73a9838a06bf7eb
   hermes-engine: b205fccb3c7b52031e5bdb458a40f85f806bb7e8
-  RCT-Folly: 02617c592a293bd6d418e0a88ff4ee1f88329b47
+  RCT-Folly: 4464f4d875961fce86008d45f4ecf6cef6de0740
   RCTDeprecation: 8c3d64b4ab77cf28adefa261e04fd205c2715607
   RCTRequired: 70f9b55e176be07e234e2efe43b31de14d7cd5ba
   RCTTypeSafety: 570d25d58d8795b1a146f5dee4965a05b6fdf8ac
@@ -1851,7 +1851,7 @@ SPEC CHECKSUMS:
   ReactCommon: dcc6f8545034e6f3d82f9555b39a2c03c2ccd005
   RNGestureHandler: 044a81d99e5ad7a67b4c23d9f8ea4c6c30fd4bca
   RNReanimated: 7892f7ef3a5b9c941b3145aa3398effac3d7809d
-  RNScreens: ca47818a6197d1b14782f0aa3bb4157a512e96dd
+  RNScreens: 621d17b9b84520ea79865b7bb18b8a8bbc433bb9
   RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: 1e170d028257c3ceb6e652dd62b2698dbc108a4b
diff --git a/Example/ios/ScreensExample.xcodeproj/project.pbxproj b/Example/ios/ScreensExample.xcodeproj/project.pbxproj
index 097475abbe..a94c85ae8a 100644
--- a/Example/ios/ScreensExample.xcodeproj/project.pbxproj
+++ b/Example/ios/ScreensExample.xcodeproj/project.pbxproj
@@ -408,6 +408,7 @@
 			);
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-ScreensExample-ScreensExampleTests/Pods-ScreensExample-ScreensExampleTests-resources.sh",
+				"${PODS_CONFIGURATION_BUILD_DIR}/RCT-Folly/RCT-Folly_privacy.bundle",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Entypo.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf",
@@ -427,9 +428,11 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/React-Core_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-cxxreact/React-cxxreact_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/boost/boost_privacy.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/glog/glog_privacy.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCT-Folly_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AntDesign.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Entypo.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EvilIcons.ttf",
@@ -449,6 +452,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-Core_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-cxxreact_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/boost_privacy.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/glog_privacy.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
@@ -462,6 +466,7 @@
 			);
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-ScreensExample/Pods-ScreensExample-resources.sh",
+				"${PODS_CONFIGURATION_BUILD_DIR}/RCT-Folly/RCT-Folly_privacy.bundle",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/Entypo.ttf",
 				"${PODS_ROOT}/../../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf",
@@ -481,9 +486,11 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/React-Core_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-cxxreact/React-cxxreact_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/boost/boost_privacy.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/glog/glog_privacy.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCT-Folly_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AntDesign.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Entypo.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EvilIcons.ttf",
@@ -503,6 +510,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-Core_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-cxxreact_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/boost_privacy.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/glog_privacy.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;

From b95aa731c6214770e7e0989cf4080f2c8ab23ab5 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Fri, 13 Sep 2024 12:44:59 +0200
Subject: [PATCH 21/49] Update FabricExample pods due to new files

---
 .../ios/FabricExample.xcodeproj/project.pbxproj      | 10 ++++++++--
 FabricExample/ios/Podfile.lock                       | 12 ++++++------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/FabricExample/ios/FabricExample.xcodeproj/project.pbxproj b/FabricExample/ios/FabricExample.xcodeproj/project.pbxproj
index b76468a33d..446fbbf767 100644
--- a/FabricExample/ios/FabricExample.xcodeproj/project.pbxproj
+++ b/FabricExample/ios/FabricExample.xcodeproj/project.pbxproj
@@ -594,7 +594,10 @@
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG";
@@ -667,7 +670,10 @@
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;
diff --git a/FabricExample/ios/Podfile.lock b/FabricExample/ios/Podfile.lock
index ba5262082e..31d639be92 100644
--- a/FabricExample/ios/Podfile.lock
+++ b/FabricExample/ios/Podfile.lock
@@ -1607,7 +1607,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (3.32.0):
+  - RNScreens (4.0.0-beta.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1628,9 +1628,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNScreens/common (= 3.32.0)
+    - RNScreens/common (= 4.0.0-beta.0)
     - Yoga
-  - RNScreens/common (3.32.0):
+  - RNScreens/common (4.0.0-beta.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1877,9 +1877,9 @@ SPEC CHECKSUMS:
   DoubleConversion: 76ab83afb40bddeeee456813d9c04f67f78771b5
   FBLazyVector: d08b51db67e61e1adaed7aefdb43b43f247ee46a
   fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
-  glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
+  glog: 69ef571f3de08433d766d614c73a9838a06bf7eb
   hermes-engine: b205fccb3c7b52031e5bdb458a40f85f806bb7e8
-  RCT-Folly: 045d6ecaa59d826c5736dfba0b2f4083ff8d79df
+  RCT-Folly: 4464f4d875961fce86008d45f4ecf6cef6de0740
   RCTDeprecation: 8c3d64b4ab77cf28adefa261e04fd205c2715607
   RCTRequired: 70f9b55e176be07e234e2efe43b31de14d7cd5ba
   RCTTypeSafety: 570d25d58d8795b1a146f5dee4965a05b6fdf8ac
@@ -1938,7 +1938,7 @@ SPEC CHECKSUMS:
   ReactCommon: dcc6f8545034e6f3d82f9555b39a2c03c2ccd005
   RNGestureHandler: f6a669a7d4ed470acebf8637d347eb52ae07d401
   RNReanimated: bb5b1c59b5fc19a4e83c942cfe4ea49c5d959dd2
-  RNScreens: 83aa5357fbb09aa87130fbea02325b53b7260fd6
+  RNScreens: cecfc1861f155b68584a6aa7bd284ac5ca38eb3a
   RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: 1e170d028257c3ceb6e652dd62b2698dbc108a4b

From c87dec223d803cea6d718f21733ae13cb4290ce0 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Fri, 13 Sep 2024 12:45:21 +0200
Subject: [PATCH 22/49] Update test example

---
 apps/src/tests/TestHeaderTitle.tsx | 96 +++++++++++++++++++++---------
 1 file changed, 69 insertions(+), 27 deletions(-)

diff --git a/apps/src/tests/TestHeaderTitle.tsx b/apps/src/tests/TestHeaderTitle.tsx
index ea2ce74a6e..2dad34a792 100644
--- a/apps/src/tests/TestHeaderTitle.tsx
+++ b/apps/src/tests/TestHeaderTitle.tsx
@@ -3,33 +3,63 @@ import { NavigationContainer } from '@react-navigation/native';
 import { View, Text, StyleSheet, Pressable, Button } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
+
 const Stack = createNativeStackNavigator();
 
 const baseTitle = 'Ab';
+const baseTitle2 = 'Ac';
+
+// Toggle these two for short / long string on first screen
+// const homeScreenTitle = "Screen";
+const homeScreenTitle = baseTitle.repeat(24);
+
+// Toggle these two for short / long string on second screen
+// const secondScreenTitle = "Details";
+const secondScreenTitle = baseTitle2.repeat(24);
 
 const headerOptions = {
   headerLeft: () => {
     return (
-      <View style={{ width: 80, height: 20, backgroundColor: 'goldenrod' }}>
+      <View style={{ width: 40, height: 20, backgroundColor: 'goldenrod' }}>
       </View>
     )
   },
   headerRight: () => (
-    <View style={{}}>
-      <View style={{ width: 80, height: 20, backgroundColor: 'goldenrod', opacity: 0.4 }}>
-      </View>
+    <View style={{ width: 120, height: 20, backgroundColor: 'goldenrod', opacity: 0.4, flexDirection: 'row' }}>
     </View>
   ),
+  // headerRight: () => {
+  //   return (
+  //     <View style={{ flexDirection: 'row' }}>
+  //       <View style={{ width: 60, height: 20, backgroundColor: 'lightblue', opacity: 0.4 }} />
+  //       <View style={{ width: 60, height: 20, backgroundColor: 'lightgreen', opacity: 0.4 }} />
+  //     </View>
+  //   );
+  // },
+  // headerRight: () => (
+  //   <View style={{}}>
+  //     <View style={{ width: 80, height: 20, backgroundColor: 'goldenrod', opacity: 0.4 }}>
+  //     </View>
+  //   </View>
+  // ),
   // headerTitle: baseTitle.repeat(20),
   // headerTitle: () => (
-  //   <Text>{baseTitle.repeat(20)}</Text>
+  //   <Text numberOfLines={1} style={{ flexShrink: 1 }}>{baseTitle.repeat(5)}</Text>
   // ),
+  // headerRight: () => {
+  //   return (
+  //     <View style={{ flexDirection: 'row' }}>
+  //       <View style={{ width: 20, height: 20, backgroundColor: 'lightgreen', opacity: 0.8 }} />
+  //       <View style={{ width: 40, height: 20, backgroundColor: 'lightblue', opacity: 0.8 }} />
+  //     </View>
+  //   );
+  // },
   headerTitle: () => (
-    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center' }}>
-      <Text numberOfLines={1} style={{}}>{baseTitle.repeat(20)}</Text>
+    <View style={{}}>
+      <Text numberOfLines={1} style={{}}>{baseTitle.repeat(24)}</Text>
     </View>
   ),
-  // title: baseTitle.repeat(20),
+  // title: baseTitle.repeat(4),
   headerTitleAlign: 'left',
 }
 
@@ -38,14 +68,19 @@ function App() {
     <NavigationContainer>
       <Stack.Navigator screenOptions={{ statusBarTranslucent: false }}>
         <Stack.Screen
-          name="Screen"
+          name={homeScreenTitle}
           component={Screen}
           options={headerOptions}
         />
         <Stack.Screen
-          name="Details"
+          name={secondScreenTitle}
           component={DetailsScreen}
-          options={headerOptions}
+          options={{
+            ...headerOptions,
+            headerSearchBarOptions: {
+              placeholder: 'hello',
+            }
+          }}
         />
       </Stack.Navigator>
     </NavigationContainer>
@@ -53,29 +88,35 @@ function App() {
 }
 
 function Screen({ navigation }: any) {
+  let headerSubviewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+
+  // Just a reference contents, mimicking the setup with header config & subviews
+
   return (
-    <View style={styles.container}>
-      <View style={{ justifyContent: 'center', alignItems: 'flex-start' }}>
-        <View style={{ backgroundColor: 'goldenrod', flexDirection: 'row', width: 200 }}>
-          <View collapsable={false} style={{ flex: 1 }}>
-            <Text numberOfLines={1} style={{}}>{baseTitle.repeat(20)}</Text>
-          </View>
-          <View collapsable={false} style={{}}>
-            <View style={{ backgroundColor: 'lightgreen', width: 50, height: 20, opacity: 0.6 }} />
-          </View>
-          <View collapsable={false} style={{}}>
-            <View style={{ backgroundColor: 'pink', width: 30, height: 20, opacity: 0.6 }} />
-          </View>
+    <View>
+      <View style={[{ backgroundColor: 'pink', flexDirection: 'row', width: '100%', justifyContent: 'space-between', marginVertical: 10 }]}>
+        <View collapsable={false} style={[headerSubviewStyle]}>
+          <View style={{ backgroundColor: 'lightgreen', width: 50, height: 20, opacity: 0.6 }} />
+        </View>
+        <View style={[{ backgroundColor: 'goldenrod', flexShrink: 1 }, headerSubviewStyle]}>
+          <Text numberOfLines={1} style={{}}>{baseTitle.repeat(5)}</Text>
+        </View>
+        <View collapsable={false} style={{}}>
+          <View style={[{ backgroundColor: 'lightblue', width: 80, height: 20, opacity: 0.6 }, headerSubviewStyle]} />
         </View>
       </View>
-      <Button onPress={() => navigation.navigate("Details")} title="GoDetails" />
+      <Button onPress={() => navigation.navigate(secondScreenTitle)} title='Nav Forward' />
     </View>
   );
 }
 
 // function AppScreensOnly
 
-function DetailsScreen() {
+function DetailsScreen({ navigation }: any) {
   let counter = React.useRef(0);
 
   return (
@@ -97,6 +138,7 @@ function DetailsScreen() {
         ]}>
         <Text>Press me</Text>
       </Pressable>
+      <Button title='GoBack' onPress={() => navigation.goBack()} />
     </View>
   );
 }
@@ -110,8 +152,8 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
-    justifyContent: 'center',
-    gap: 24,
+    paddingVertical: 24,
+    gap: 16,
   },
 });
 

From 32e09849b25a615f9d140764329d4c3a1c0c2698 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Fri, 13 Sep 2024 12:45:45 +0200
Subject: [PATCH 23/49] TOREVERT: build RN from source in Example on Android

---
 Example/android/settings.gradle | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/Example/android/settings.gradle b/Example/android/settings.gradle
index 79c1fd61bc..62f14902df 100644
--- a/Example/android/settings.gradle
+++ b/Example/android/settings.gradle
@@ -1,6 +1,16 @@
 pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
 plugins { id("com.facebook.react.settings") }
-extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
+extensions.configure(com.facebook.react.ReactSettingsExtension) { ex -> ex.autolinkLibrariesFromCommand() }
 rootProject.name = 'ScreensExample'
 include ':app'
 includeBuild('../node_modules/@react-native/gradle-plugin')
+
+
+includeBuild('../node_modules/react-native') {
+    dependencySubstitution {
+        substitute(module("com.facebook.react:react-android")).using(project(":packages:react-native:ReactAndroid"))
+        substitute(module("com.facebook.react:react-native")).using(project(":packages:react-native:ReactAndroid"))
+        substitute(module("com.facebook.react:hermes-android")).using(project(":packages:react-native:ReactAndroid:hermes-engine"))
+        substitute(module("com.facebook.react:hermes-engine")).using(project(":packages:react-native:ReactAndroid:hermes-engine"))
+    }
+}
\ No newline at end of file

From e99bdec15ff09c30334b015686d5a8f66ff76853 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Fri, 13 Sep 2024 12:46:13 +0200
Subject: [PATCH 24/49] TO PARTIAL REVERT! Update react-navigation (see
 details)

in this commit react-navigation is on v6 branch.
You need to change it back to v7 and apply changes to the v7 branch.
This is the reference PR to v6:

https://github.com/react-navigation/react-navigation/pull/12135
---
 react-navigation | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react-navigation b/react-navigation
index fe3ebf3e0d..8ff527e5fe 160000
--- a/react-navigation
+++ b/react-navigation
@@ -1 +1 @@
-Subproject commit fe3ebf3e0d570d1966f29d04eac53b0196af422e
+Subproject commit 8ff527e5feafd4475e5dd45bf6ac92bf3506eac1

From 12d685d259e2a6a401cae0e37682c32e3d1cd7d1 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Fri, 13 Sep 2024 18:08:57 +0200
Subject: [PATCH 25/49] Detect barbutton view width (at least on iOS 17)
 instead of hardcoded value

---
 ios/RNSScreenStack.mm                   | 14 +++++---
 ios/RNSScreenStackHeaderConfig.h        |  4 +++
 ios/utils/UINavigationBar+RNSUtility.h  | 13 ++++++++
 ios/utils/UINavigationBar+RNSUtility.mm | 44 +++++++++++++++++++++++++
 ios/utils/UIView+RNSUtility.mm          |  1 -
 5 files changed, 71 insertions(+), 5 deletions(-)
 create mode 100644 ios/utils/UINavigationBar+RNSUtility.h
 create mode 100644 ios/utils/UINavigationBar+RNSUtility.mm

diff --git a/ios/RNSScreenStack.mm b/ios/RNSScreenStack.mm
index e5574b0df4..fa06063291 100644
--- a/ios/RNSScreenStack.mm
+++ b/ios/RNSScreenStack.mm
@@ -25,6 +25,7 @@
 #import "RNSScreenStackAnimator.h"
 #import "RNSScreenStackHeaderConfig.h"
 #import "RNSScreenWindowTraits.h"
+#import "utils/UINavigationBar+RNSUtility.h"
 
 #import "UIView+RNSUtility.h"
 
@@ -110,15 +111,20 @@ - (void)maybeUpdateHeaderInsetsInShadowTreeForScreen:(RNSScreen *)screenControll
   }
 
   NSDirectionalEdgeInsets navBarMargins = [self.navigationBar directionalLayoutMargins];
-  NSDirectionalEdgeInsets navBarContentMargins = [self.navigationBar.subviews[1] directionalLayoutMargins];
-  NSDirectionalEdgeInsets titleViewMargins = self.navigationBar.topItem.titleView.directionalLayoutMargins;
+  NSDirectionalEdgeInsets navBarContentMargins =
+      [self.navigationBar.rnscreens_findContentView directionalLayoutMargins];
 
   // I think there could be bug e.g. if we have one push screen and one modal!
-  BOOL isDisplayingBackButton = self.viewControllers.count > 1 && !headerConfig.hasSubviewLeft;
+  BOOL isDisplayingBackButton = self.navigationBar.backItem != nil && !headerConfig.hasSubviewLeft &&
+      !headerConfig.backButtonInCustomView && !headerConfig.hideBackButton;
+
+  // 44.0 is just "closed eyes default". It is so on device I've tested with, nothing more.
+  UIView *barButtonView = self.navigationBar.rnscreens_findBackButtonWrapperView;
+  CGFloat platformBackButtonWidth = barButtonView != nil ? barButtonView.frame.size.width : 44.0f;
 
   [headerConfig updateHeaderInsetsInShadowTreeTo:NSDirectionalEdgeInsets{
                                                      .leading = navBarMargins.leading + navBarContentMargins.leading +
-                                                         (isDisplayingBackButton ? 44 : 0),
+                                                         (isDisplayingBackButton ? platformBackButtonWidth : 0),
                                                      .trailing = navBarMargins.trailing + navBarContentMargins.trailing,
                                                  }];
 }
diff --git a/ios/RNSScreenStackHeaderConfig.h b/ios/RNSScreenStackHeaderConfig.h
index 14e6a342fa..ad402924f9 100644
--- a/ios/RNSScreenStackHeaderConfig.h
+++ b/ios/RNSScreenStackHeaderConfig.h
@@ -115,6 +115,10 @@
 
 @end
 
+/**
+ * Custom shadow view for header config. This is used on Paper to provide Yoga
+ * with knowledge of native header insets (horizontal padding).
+ */
 @interface RNSScreenStackHeaderConfigShadowView : RCTShadowView
 
 @end
diff --git a/ios/utils/UINavigationBar+RNSUtility.h b/ios/utils/UINavigationBar+RNSUtility.h
new file mode 100644
index 0000000000..3547351729
--- /dev/null
+++ b/ios/utils/UINavigationBar+RNSUtility.h
@@ -0,0 +1,13 @@
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface UINavigationBar (RNSUtility)
+
+- (nullable UIView *)rnscreens_findContentView;
+
+- (nullable UIView *)rnscreens_findBackButtonWrapperView;
+
+@end
+
+NS_ASSUME_NONNULL_END
diff --git a/ios/utils/UINavigationBar+RNSUtility.mm b/ios/utils/UINavigationBar+RNSUtility.mm
new file mode 100644
index 0000000000..f3a64efac2
--- /dev/null
+++ b/ios/utils/UINavigationBar+RNSUtility.mm
@@ -0,0 +1,44 @@
+#import "UINavigationBar+RNSUtility.h"
+
+@implementation UINavigationBar (RNSUtility)
+
+- (nullable UIView *)rnscreens_findContentView
+{
+  // Class names taken from iOS 17.5, tested on iPhone 15 Pro
+  static Class ContentViewClass = NSClassFromString(@"_UINavigationBarContentView");
+
+  // Fast path
+  if (self.subviews.count > 1 && [self.subviews[1] isKindOfClass:ContentViewClass]) {
+    return self.subviews[1];
+  }
+
+  for (UIView *subview in self.subviews) {
+    if ([subview isKindOfClass:ContentViewClass]) {
+      return subview;
+    }
+  }
+
+  return nil;
+}
+
+- (nullable UIView *)rnscreens_findBackButtonWrapperView
+{
+  // Class names taken from iOS 17.5, tested on iPhone 15 Pro
+  static Class BarButtonViewClass = NSClassFromString(@"_UIButtonBarButton");
+
+  UIView *contentView = self.rnscreens_findContentView;
+
+  if (contentView == nil) {
+    return nil;
+  }
+
+  for (UIView *subview in contentView.subviews) {
+    if ([subview isKindOfClass:BarButtonViewClass]) {
+      return subview;
+    }
+  }
+
+  return nil;
+}
+
+@end
diff --git a/ios/utils/UIView+RNSUtility.mm b/ios/utils/UIView+RNSUtility.mm
index 9c648956f3..bbc8852de8 100644
--- a/ios/utils/UIView+RNSUtility.mm
+++ b/ios/utils/UIView+RNSUtility.mm
@@ -35,7 +35,6 @@ - (nullable RNS_TOUCH_HANDLER_ARCH_TYPE *)rnscreens_findTouchHandlerInAncestorCh
   }
 
 #else
-
   // On Paper we can access touchHandler hosted by `RCTRootContentView` which should be above ScreenStack
   // in view hierarchy.
   while (parent != nil && ![parent respondsToSelector:@selector(touchHandler)]) {

From 04313b65e5987bbaa18d068ebbf21dc135a877f0 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Fri, 13 Sep 2024 18:14:15 +0200
Subject: [PATCH 26/49] Cleanup iOS code a bit

---
 ios/RNSScreenStack.mm | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ios/RNSScreenStack.mm b/ios/RNSScreenStack.mm
index fa06063291..546e5c6f84 100644
--- a/ios/RNSScreenStack.mm
+++ b/ios/RNSScreenStack.mm
@@ -119,7 +119,7 @@ - (void)maybeUpdateHeaderInsetsInShadowTreeForScreen:(RNSScreen *)screenControll
       !headerConfig.backButtonInCustomView && !headerConfig.hideBackButton;
 
   // 44.0 is just "closed eyes default". It is so on device I've tested with, nothing more.
-  UIView *barButtonView = self.navigationBar.rnscreens_findBackButtonWrapperView;
+  UIView *barButtonView = isDisplayingBackButton ? self.navigationBar.rnscreens_findBackButtonWrapperView : nil;
   CGFloat platformBackButtonWidth = barButtonView != nil ? barButtonView.frame.size.width : 44.0f;
 
   [headerConfig updateHeaderInsetsInShadowTreeTo:NSDirectionalEdgeInsets{

From 92157dbd59820d13ddd829cf27c5516e9593030e Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 16 Sep 2024 08:35:36 +0200
Subject: [PATCH 27/49] Add docs for the UINavigationBar+RNSUtility category
 methods

---
 ios/utils/UINavigationBar+RNSUtility.h | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/ios/utils/UINavigationBar+RNSUtility.h b/ios/utils/UINavigationBar+RNSUtility.h
index 3547351729..2cc0e34285 100644
--- a/ios/utils/UINavigationBar+RNSUtility.h
+++ b/ios/utils/UINavigationBar+RNSUtility.h
@@ -4,8 +4,31 @@ NS_ASSUME_NONNULL_BEGIN
 
 @interface UINavigationBar (RNSUtility)
 
+/**
+ * Aims to find main content view of the `UINavigationBar`.
+ * This method relies on internal iOS implementation details (see the implementation)
+ * and might need patches specific to future iOS versions, in case the view hierarchy inside
+ * the navigation bar changes.
+ *
+ * Tested to work reliably on iOS 17.5, 15.5.
+ *
+ * @returns `_UINavigationBarContentView` view mounted directly under the navigation bar itself
+ */
 - (nullable UIView *)rnscreens_findContentView;
 
+/**
+ * Aims to find the back button wrapper view of the `UINavigationBar`. This is the view that contains
+ * the back button itself alongside all the margin / padding used to position the back button by the system.
+ *
+ * This method relies on internal iOS implementation details (see the implementation)
+ * and might need patches specific to future iOS versions, in case the view hierarchy inside
+ * the navigation bar changes.
+ *
+ * Tested to work reliably on iOS 17, 15.
+ *
+ * @returns `_UIButtonBarButton` view, if present and mounted in anticipated place;
+ *                      if the back button is not present, this method returns `nil`.
+ */
 - (nullable UIView *)rnscreens_findBackButtonWrapperView;
 
 @end

From 700d079f23412420a0f60211c8573d970d53eb17 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 16 Sep 2024 10:11:13 +0200
Subject: [PATCH 28/49] Reset state properly before moving component to recycle
 pool

---
 .../rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h    | 1 +
 ios/RNSScreenStackHeaderConfig.mm                                | 1 +
 2 files changed, 2 insertions(+)

diff --git a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h
index 3284f7136f..3cf734c8fd 100644
--- a/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h
+++ b/common/cpp/react/renderer/components/rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h
@@ -36,6 +36,7 @@ class RNSScreenStackHeaderConfigComponentDescriptor final
 
     layoutableShadowNode.setPadding(
         {stateData.getPaddingStart(), 0, stateData.getPaddingEnd(), 0});
+
     ConcreteComponentDescriptor::adopt(shadowNode);
   }
 };
diff --git a/ios/RNSScreenStackHeaderConfig.mm b/ios/RNSScreenStackHeaderConfig.mm
index d637571112..7ff837e652 100644
--- a/ios/RNSScreenStackHeaderConfig.mm
+++ b/ios/RNSScreenStackHeaderConfig.mm
@@ -882,6 +882,7 @@ - (void)prepareForRecycle
 {
   [super prepareForRecycle];
   _initialPropsSet = NO;
+  _lastHeaderInsets = NSDirectionalEdgeInsets{};
 }
 
 - (NSNumber *)getFontSizePropValue:(int)value

From bf544c79bad81562abc94d4d47f219c44ccb2dd2 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 16 Sep 2024 10:11:48 +0200
Subject: [PATCH 29/49] Update example

---
 apps/src/tests/TestHeaderTitle.tsx | 49 +++++++++++++++++-------------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/apps/src/tests/TestHeaderTitle.tsx b/apps/src/tests/TestHeaderTitle.tsx
index 2dad34a792..853deb17e1 100644
--- a/apps/src/tests/TestHeaderTitle.tsx
+++ b/apps/src/tests/TestHeaderTitle.tsx
@@ -17,17 +17,19 @@ const homeScreenTitle = baseTitle.repeat(24);
 // const secondScreenTitle = "Details";
 const secondScreenTitle = baseTitle2.repeat(24);
 
+const searchBarScreenTitle = "SearchBarScreen";
+
 const headerOptions = {
-  headerLeft: () => {
-    return (
-      <View style={{ width: 40, height: 20, backgroundColor: 'goldenrod' }}>
-      </View>
-    )
-  },
-  headerRight: () => (
-    <View style={{ width: 120, height: 20, backgroundColor: 'goldenrod', opacity: 0.4, flexDirection: 'row' }}>
-    </View>
-  ),
+  // headerLeft: () => {
+  //   return (
+  //     <View style={{ width: 40, height: 20, backgroundColor: 'goldenrod' }}>
+  //     </View>
+  //   )
+  // },
+  // headerRight: () => (
+  //   <View style={{ width: 120, height: 20, backgroundColor: 'goldenrod', opacity: 0.4, flexDirection: 'row' }}>
+  //   </View>
+  // ),
   // headerRight: () => {
   //   return (
   //     <View style={{ flexDirection: 'row' }}>
@@ -75,10 +77,15 @@ function App() {
         <Stack.Screen
           name={secondScreenTitle}
           component={DetailsScreen}
+          options={headerOptions}
+        />
+        <Stack.Screen
+          name={searchBarScreenTitle}
+          component={DetailsScreen}
           options={{
             ...headerOptions,
             headerSearchBarOptions: {
-              placeholder: 'hello',
+              placeholder: 'placeholder',
             }
           }}
         />
@@ -88,34 +95,28 @@ function App() {
 }
 
 function Screen({ navigation }: any) {
-  let headerSubviewStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  };
 
   // Just a reference contents, mimicking the setup with header config & subviews
 
   return (
     <View>
       <View style={[{ backgroundColor: 'pink', flexDirection: 'row', width: '100%', justifyContent: 'space-between', marginVertical: 10 }]}>
-        <View collapsable={false} style={[headerSubviewStyle]}>
+        <View collapsable={false} style={[styles.headerSubviewStyle]}>
           <View style={{ backgroundColor: 'lightgreen', width: 50, height: 20, opacity: 0.6 }} />
         </View>
-        <View style={[{ backgroundColor: 'goldenrod', flexShrink: 1 }, headerSubviewStyle]}>
+        <View style={[{ backgroundColor: 'goldenrod', flexShrink: 1 }, styles.headerSubviewStyle]}>
           <Text numberOfLines={1} style={{}}>{baseTitle.repeat(5)}</Text>
         </View>
         <View collapsable={false} style={{}}>
-          <View style={[{ backgroundColor: 'lightblue', width: 80, height: 20, opacity: 0.6 }, headerSubviewStyle]} />
+          <View style={[{ backgroundColor: 'lightblue', width: 80, height: 20, opacity: 0.6 }, styles.headerSubviewStyle]} />
         </View>
       </View>
       <Button onPress={() => navigation.navigate(secondScreenTitle)} title='Nav Forward' />
+      <Button onPress={() => navigation.navigate(searchBarScreenTitle)} title={searchBarScreenTitle} />
     </View>
   );
 }
 
-// function AppScreensOnly
-
 function DetailsScreen({ navigation }: any) {
   let counter = React.useRef(0);
 
@@ -155,6 +156,12 @@ const styles = StyleSheet.create({
     paddingVertical: 24,
     gap: 16,
   },
+  headerSubviewStyle: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }
 });
 
 export default App;
+

From c54be5d59afa8fd4ebbe734bc7d80e2cb3287af1 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Fri, 4 Oct 2024 15:45:26 +0200
Subject: [PATCH 30/49] chore: update example

---
 apps/src/tests/TestHeaderTitle.tsx | 33 ++++++++++++++++--------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/apps/src/tests/TestHeaderTitle.tsx b/apps/src/tests/TestHeaderTitle.tsx
index 853deb17e1..9827e78d96 100644
--- a/apps/src/tests/TestHeaderTitle.tsx
+++ b/apps/src/tests/TestHeaderTitle.tsx
@@ -20,12 +20,12 @@ const secondScreenTitle = baseTitle2.repeat(24);
 const searchBarScreenTitle = "SearchBarScreen";
 
 const headerOptions = {
-  // headerLeft: () => {
-  //   return (
-  //     <View style={{ width: 40, height: 20, backgroundColor: 'goldenrod' }}>
-  //     </View>
-  //   )
-  // },
+  headerLeft: () => {
+    return (
+      <View style={{ width: 40, height: 20, backgroundColor: 'goldenrod' }}>
+      </View>
+    )
+  },
   // headerRight: () => (
   //   <View style={{ width: 120, height: 20, backgroundColor: 'goldenrod', opacity: 0.4, flexDirection: 'row' }}>
   //   </View>
@@ -48,14 +48,14 @@ const headerOptions = {
   // headerTitle: () => (
   //   <Text numberOfLines={1} style={{ flexShrink: 1 }}>{baseTitle.repeat(5)}</Text>
   // ),
-  // headerRight: () => {
-  //   return (
-  //     <View style={{ flexDirection: 'row' }}>
-  //       <View style={{ width: 20, height: 20, backgroundColor: 'lightgreen', opacity: 0.8 }} />
-  //       <View style={{ width: 40, height: 20, backgroundColor: 'lightblue', opacity: 0.8 }} />
-  //     </View>
-  //   );
-  // },
+  headerRight: () => {
+    return (
+      <View style={{ flexDirection: 'row' }}>
+        <View style={{ width: 20, height: 20, backgroundColor: 'lightgreen', opacity: 0.8 }} />
+        <View style={{ width: 60, height: 20, backgroundColor: 'lightblue', opacity: 0.8 }} />
+      </View>
+    );
+  },
   headerTitle: () => (
     <View style={{}}>
       <Text numberOfLines={1} style={{}}>{baseTitle.repeat(24)}</Text>
@@ -77,7 +77,10 @@ function App() {
         <Stack.Screen
           name={secondScreenTitle}
           component={DetailsScreen}
-          options={headerOptions}
+          options={{
+            ...headerOptions,
+            headerBackVisible: false,
+          }}
         />
         <Stack.Screen
           name={searchBarScreenTitle}

From a31ed539b9cc64e61d278fa6a28973e396b338b9 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 7 Oct 2024 11:36:43 +0200
Subject: [PATCH 31/49] fix: fix condition for `isDisplayingBackButton`

---
 ios/RNSScreenStack.mm                  | 3 +--
 ios/utils/UINavigationBar+RNSUtility.h | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ios/RNSScreenStack.mm b/ios/RNSScreenStack.mm
index acf97cd047..7bb4cfa3dc 100644
--- a/ios/RNSScreenStack.mm
+++ b/ios/RNSScreenStack.mm
@@ -115,8 +115,7 @@ - (void)maybeUpdateHeaderInsetsInShadowTreeForScreen:(RNSScreen *)screenControll
       [self.navigationBar.rnscreens_findContentView directionalLayoutMargins];
 
   // I think there could be bug e.g. if we have one push screen and one modal!
-  BOOL isDisplayingBackButton = self.navigationBar.backItem != nil && !headerConfig.hasSubviewLeft &&
-      !headerConfig.backButtonInCustomView && !headerConfig.hideBackButton;
+  BOOL isDisplayingBackButton = self.navigationBar.backItem != nil && !headerConfig.hideBackButton;
 
   // 44.0 is just "closed eyes default". It is so on device I've tested with, nothing more.
   UIView *barButtonView = isDisplayingBackButton ? self.navigationBar.rnscreens_findBackButtonWrapperView : nil;
diff --git a/ios/utils/UINavigationBar+RNSUtility.h b/ios/utils/UINavigationBar+RNSUtility.h
index 2cc0e34285..6fabf21428 100644
--- a/ios/utils/UINavigationBar+RNSUtility.h
+++ b/ios/utils/UINavigationBar+RNSUtility.h
@@ -6,6 +6,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 /**
  * Aims to find main content view of the `UINavigationBar`.
+ *
  * This method relies on internal iOS implementation details (see the implementation)
  * and might need patches specific to future iOS versions, in case the view hierarchy inside
  * the navigation bar changes.

From 6e9fd4a9b6ff13782f6761fd8c3b1a4d50047a9d Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 7 Oct 2024 12:31:46 +0200
Subject: [PATCH 32/49] fix: fix condition for `isDisplayingBackButton`

---
 ios/RNSScreenStack.mm             | 3 +--
 ios/RNSScreenStackHeaderConfig.h  | 8 +++++++-
 ios/RNSScreenStackHeaderConfig.mm | 6 ++++++
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/ios/RNSScreenStack.mm b/ios/RNSScreenStack.mm
index 7bb4cfa3dc..82dc6fd555 100644
--- a/ios/RNSScreenStack.mm
+++ b/ios/RNSScreenStack.mm
@@ -114,8 +114,7 @@ - (void)maybeUpdateHeaderInsetsInShadowTreeForScreen:(RNSScreen *)screenControll
   NSDirectionalEdgeInsets navBarContentMargins =
       [self.navigationBar.rnscreens_findContentView directionalLayoutMargins];
 
-  // I think there could be bug e.g. if we have one push screen and one modal!
-  BOOL isDisplayingBackButton = self.navigationBar.backItem != nil && !headerConfig.hideBackButton;
+  BOOL isDisplayingBackButton = [headerConfig shouldBackButtonBeVisibleInNavigationBar:self.navigationBar];
 
   // 44.0 is just "closed eyes default". It is so on device I've tested with, nothing more.
   UIView *barButtonView = isDisplayingBackButton ? self.navigationBar.rnscreens_findBackButtonWrapperView : nil;
diff --git a/ios/RNSScreenStackHeaderConfig.h b/ios/RNSScreenStackHeaderConfig.h
index ad402924f9..f0dad8d9ea 100644
--- a/ios/RNSScreenStackHeaderConfig.h
+++ b/ios/RNSScreenStackHeaderConfig.h
@@ -77,7 +77,7 @@
 - (BOOL)hasSubviewOfType:(RNSScreenStackHeaderSubviewType)type;
 
 /**
- * Returns true iff subview of type `left` is present.
+ * Returns `true` iff subview of type `left` is present.
  *
  *  **Please note that the subviews are not mounted under the header config in HostTree**
  * This method should serve only to check whether given subview type has been rendered.
@@ -94,6 +94,12 @@
  */
 - (BOOL)shouldHeaderBeVisible;
 
+/**
+ * @returns`true` iff the applying this header config instance to a view controller will
+ * result in visible back button if feasible.
+ */
+- (BOOL)shouldBackButtonBeVisibleInNavigationBar:(nullable UINavigationBar *)navBar;
+
 @end
 
 @interface RNSScreenStackHeaderConfigManager : RCTViewManager
diff --git a/ios/RNSScreenStackHeaderConfig.mm b/ios/RNSScreenStackHeaderConfig.mm
index 2ef4f0958f..b5cbc81c0d 100644
--- a/ios/RNSScreenStackHeaderConfig.mm
+++ b/ios/RNSScreenStackHeaderConfig.mm
@@ -224,6 +224,12 @@ - (BOOL)shouldHeaderBeVisible
 #endif // RCT_NEW_ARCH_ENABLED
 }
 
+- (BOOL)shouldBackButtonBeVisibleInNavigationBar:(nullable UINavigationBar *)navBar
+{
+  return navBar.backItem != nil && !self.hideBackButton &&
+      !(self.backButtonInCustomView == false && self.hasSubviewLeft);
+}
+
 + (void)setAnimatedConfig:(UIViewController *)vc withConfig:(RNSScreenStackHeaderConfig *)config
 {
   UINavigationBar *navbar = ((UINavigationController *)vc.parentViewController).navigationBar;

From 78fc482c607c877761443eca6e6ec8acb3daf974 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 7 Oct 2024 13:09:19 +0200
Subject: [PATCH 33/49] refactor: start moving styles for header components
 from react-navigation to screens

---
 src/components/ScreenStackHeaderConfig.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/ScreenStackHeaderConfig.tsx b/src/components/ScreenStackHeaderConfig.tsx
index 46d64d1eb8..a3e7d73ee2 100644
--- a/src/components/ScreenStackHeaderConfig.tsx
+++ b/src/components/ScreenStackHeaderConfig.tsx
@@ -14,10 +14,18 @@ import ScreenStackHeaderSubviewNativeComponent from '../fabric/ScreenStackHeader
 
 export const ScreenStackHeaderConfig: React.ComponentType<ScreenStackHeaderConfigProps> =
   ScreenStackHeaderConfigNativeComponent as any;
+
 export const ScreenStackHeaderSubview: React.ComponentType<
   React.PropsWithChildren<ViewProps & { type?: HeaderSubviewTypes }>
 > = ScreenStackHeaderSubviewNativeComponent as any;
 
+// export function ScreenStackHeaderConfig(props: ScreenStackHeaderConfigProps): React.JSX.Element
+// {
+//   return (
+//     <ScreenStackHeaderConfigNativeComponent {...props} />
+//   )
+// }
+
 export const ScreenStackHeaderBackButtonImage = (
   props: ImageProps,
 ): JSX.Element => (

From 3b55907da7a633c2966ae56dd13042cd284dbe94 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 7 Oct 2024 13:52:23 +0200
Subject: [PATCH 34/49] refactor: do not force consumer to set styles on header
 config

---
 src/components/ScreenStackHeaderConfig.tsx | 25 +++++++++++++++-------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/ScreenStackHeaderConfig.tsx b/src/components/ScreenStackHeaderConfig.tsx
index a3e7d73ee2..72fb26f574 100644
--- a/src/components/ScreenStackHeaderConfig.tsx
+++ b/src/components/ScreenStackHeaderConfig.tsx
@@ -12,19 +12,23 @@ import { Image, ImageProps, StyleSheet, ViewProps } from 'react-native';
 import ScreenStackHeaderConfigNativeComponent from '../fabric/ScreenStackHeaderConfigNativeComponent';
 import ScreenStackHeaderSubviewNativeComponent from '../fabric/ScreenStackHeaderSubviewNativeComponent';
 
-export const ScreenStackHeaderConfig: React.ComponentType<ScreenStackHeaderConfigProps> =
-  ScreenStackHeaderConfigNativeComponent as any;
+// const ScreenStackHeaderConfig: React.ComponentType<ScreenStackHeaderConfigProps> =
+//   ScreenStackHeaderConfigNativeComponent as any;
 
 export const ScreenStackHeaderSubview: React.ComponentType<
   React.PropsWithChildren<ViewProps & { type?: HeaderSubviewTypes }>
 > = ScreenStackHeaderSubviewNativeComponent as any;
 
-// export function ScreenStackHeaderConfig(props: ScreenStackHeaderConfigProps): React.JSX.Element
-// {
-//   return (
-//     <ScreenStackHeaderConfigNativeComponent {...props} />
-//   )
-// }
+export function ScreenStackHeaderConfig(
+  props: ScreenStackHeaderConfigProps,
+): React.JSX.Element {
+  return (
+    <ScreenStackHeaderConfigNativeComponent
+      {...props}
+      style={styles.headerConfig}
+    />
+  );
+}
 
 export const ScreenStackHeaderBackButtonImage = (
   props: ImageProps,
@@ -92,4 +96,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  headerConfig: {
+    flexDirection: 'row',
+    width: '100%',
+    justifyContent: 'space-between',
+  },
 });

From 667fa2dd60f475306d4ca6fa59043950b2f3f583 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 7 Oct 2024 13:52:56 +0200
Subject: [PATCH 35/49] refactor: do not force consumer to set styles on header
 subview center

---
 src/components/ScreenStackHeaderConfig.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/ScreenStackHeaderConfig.tsx b/src/components/ScreenStackHeaderConfig.tsx
index 72fb26f574..5890ba9467 100644
--- a/src/components/ScreenStackHeaderConfig.tsx
+++ b/src/components/ScreenStackHeaderConfig.tsx
@@ -12,9 +12,6 @@ import { Image, ImageProps, StyleSheet, ViewProps } from 'react-native';
 import ScreenStackHeaderConfigNativeComponent from '../fabric/ScreenStackHeaderConfigNativeComponent';
 import ScreenStackHeaderSubviewNativeComponent from '../fabric/ScreenStackHeaderSubviewNativeComponent';
 
-// const ScreenStackHeaderConfig: React.ComponentType<ScreenStackHeaderConfigProps> =
-//   ScreenStackHeaderConfigNativeComponent as any;
-
 export const ScreenStackHeaderSubview: React.ComponentType<
   React.PropsWithChildren<ViewProps & { type?: HeaderSubviewTypes }>
 > = ScreenStackHeaderSubviewNativeComponent as any;
@@ -75,7 +72,7 @@ export const ScreenStackHeaderCenterView = (
     <ScreenStackHeaderSubview
       {...rest}
       type="center"
-      style={[styles.headerSubview, style]}
+      style={[styles.headerSubviewCenter, style]}
     />
   );
 };
@@ -96,6 +93,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  headerSubviewCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 1,
+  },
   headerConfig: {
     flexDirection: 'row',
     width: '100%',

From 9a5e5ac04d8df954957f4ba00e4b6a5f9ea84048 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 7 Oct 2024 14:56:54 +0200
Subject: [PATCH 36/49] chore: revert building RN in Example from source

---
 Example/android/settings.gradle | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/Example/android/settings.gradle b/Example/android/settings.gradle
index 62f14902df..7320dfe94a 100644
--- a/Example/android/settings.gradle
+++ b/Example/android/settings.gradle
@@ -5,12 +5,3 @@ rootProject.name = 'ScreensExample'
 include ':app'
 includeBuild('../node_modules/@react-native/gradle-plugin')
 
-
-includeBuild('../node_modules/react-native') {
-    dependencySubstitution {
-        substitute(module("com.facebook.react:react-android")).using(project(":packages:react-native:ReactAndroid"))
-        substitute(module("com.facebook.react:react-native")).using(project(":packages:react-native:ReactAndroid"))
-        substitute(module("com.facebook.react:hermes-android")).using(project(":packages:react-native:ReactAndroid:hermes-engine"))
-        substitute(module("com.facebook.react:hermes-engine")).using(project(":packages:react-native:ReactAndroid:hermes-engine"))
-    }
-}
\ No newline at end of file

From 3233ed1bba57e62a7726d12323d29c787da340f2 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 7 Oct 2024 16:32:26 +0200
Subject: [PATCH 37/49] chore: revert changes in app.tsx

---
 apps/App.tsx                       | 8 ++++----
 apps/src/tests/TestHeaderTitle.tsx | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/App.tsx b/apps/App.tsx
index e19111891c..855aee0148 100644
--- a/apps/App.tsx
+++ b/apps/App.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { enableFreeze } from 'react-native-screens';
-// import Example from './Example';
-import * as Test from './src/tests';
+import Example from './Example';
+// import * as Test from './src/tests';
 
 enableFreeze(true);
 
 export default function App() {
-  // return <Example />;
-  return <Test.TestHeaderTitle />;
+  return <Example />;
+  // return <Test.TestHeaderTitle />;
 }
diff --git a/apps/src/tests/TestHeaderTitle.tsx b/apps/src/tests/TestHeaderTitle.tsx
index 9827e78d96..06fa450644 100644
--- a/apps/src/tests/TestHeaderTitle.tsx
+++ b/apps/src/tests/TestHeaderTitle.tsx
@@ -79,7 +79,7 @@ function App() {
           component={DetailsScreen}
           options={{
             ...headerOptions,
-            headerBackVisible: false,
+            headerBackVisible: true,
           }}
         />
         <Stack.Screen

From 0d22970f0995eb198f931408919c85e93c9b5f6d Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 7 Oct 2024 16:35:07 +0200
Subject: [PATCH 38/49] chore: update pods in examples

---
 Example/ios/Podfile.lock       | 4 ++--
 FabricExample/ios/Podfile.lock | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/Example/ios/Podfile.lock b/Example/ios/Podfile.lock
index b252dfeece..877b527ae9 100644
--- a/Example/ios/Podfile.lock
+++ b/Example/ios/Podfile.lock
@@ -1543,7 +1543,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (4.0.0-beta.0):
+  - RNScreens (4.0.0-beta.5):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1851,7 +1851,7 @@ SPEC CHECKSUMS:
   ReactCommon: dcc6f8545034e6f3d82f9555b39a2c03c2ccd005
   RNGestureHandler: 044a81d99e5ad7a67b4c23d9f8ea4c6c30fd4bca
   RNReanimated: 7892f7ef3a5b9c941b3145aa3398effac3d7809d
-  RNScreens: 621d17b9b84520ea79865b7bb18b8a8bbc433bb9
+  RNScreens: 201abaf5f7fe97ccc761d32ef1a53b2fc7f70b32
   RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: 1e170d028257c3ceb6e652dd62b2698dbc108a4b
diff --git a/FabricExample/ios/Podfile.lock b/FabricExample/ios/Podfile.lock
index 31d639be92..ff45d03ff8 100644
--- a/FabricExample/ios/Podfile.lock
+++ b/FabricExample/ios/Podfile.lock
@@ -1607,7 +1607,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (4.0.0-beta.0):
+  - RNScreens (4.0.0-beta.5):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1628,9 +1628,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNScreens/common (= 4.0.0-beta.0)
+    - RNScreens/common (= 4.0.0-beta.5)
     - Yoga
-  - RNScreens/common (4.0.0-beta.0):
+  - RNScreens/common (4.0.0-beta.5):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1938,7 +1938,7 @@ SPEC CHECKSUMS:
   ReactCommon: dcc6f8545034e6f3d82f9555b39a2c03c2ccd005
   RNGestureHandler: f6a669a7d4ed470acebf8637d347eb52ae07d401
   RNReanimated: bb5b1c59b5fc19a4e83c942cfe4ea49c5d959dd2
-  RNScreens: cecfc1861f155b68584a6aa7bd284ac5ca38eb3a
+  RNScreens: eb3b3d35da3333bc272b9e2d1b9afaa34d26d107
   RNVectorIcons: 31cebfcf94e8cf8686eb5303ae0357da64d7a5a4
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: 1e170d028257c3ceb6e652dd62b2698dbc108a4b

From dc2fec295c413e232f50dd1c0caaaec8d6f8e485 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 7 Oct 2024 16:40:48 +0200
Subject: [PATCH 39/49] refactor: improve code in FabricEnabledConfigViewGroup

---
 ... => FabricEnabledHeaderConfigViewGroup.kt} | 25 +++++++++++--------
 .../rnscreens/ScreenStackHeaderConfig.kt      |  2 +-
 2 files changed, 15 insertions(+), 12 deletions(-)
 rename android/src/fabric/java/com/swmansion/rnscreens/{FabricEnabledConfigViewGroup.kt => FabricEnabledHeaderConfigViewGroup.kt} (65%)

diff --git a/android/src/fabric/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt b/android/src/fabric/java/com/swmansion/rnscreens/FabricEnabledHeaderConfigViewGroup.kt
similarity index 65%
rename from android/src/fabric/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt
rename to android/src/fabric/java/com/swmansion/rnscreens/FabricEnabledHeaderConfigViewGroup.kt
index f71dfc1774..cf1a2aa387 100644
--- a/android/src/fabric/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt
+++ b/android/src/fabric/java/com/swmansion/rnscreens/FabricEnabledHeaderConfigViewGroup.kt
@@ -9,7 +9,7 @@ import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.StateWrapper
 import kotlin.math.abs
 
-abstract class FabricEnabledConfigViewGroup(
+abstract class FabricEnabledHeaderConfigViewGroup(
     context: Context?,
 ) : ViewGroup(context) {
     private var mStateWrapper: StateWrapper? = null
@@ -33,26 +33,29 @@ abstract class FabricEnabledConfigViewGroup(
         paddingStart: Int,
         paddingEnd: Int,
     ) {
-        val paddingLeftInDIP: Float = PixelUtil.toDIPFromPixel(paddingStart.toFloat())
-        val paddingRightInDIP: Float = PixelUtil.toDIPFromPixel(paddingEnd.toFloat())
+        val paddingStartDip: Float = PixelUtil.toDIPFromPixel(paddingStart.toFloat())
+        val paddingEndDip: Float = PixelUtil.toDIPFromPixel(paddingEnd.toFloat())
+
         // 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(lastPaddingStart - paddingStart) < delta &&
-            abs(lastPaddingEnd - paddingEnd) < delta
+        if (abs(lastPaddingStart - paddingStart) < DELTA &&
+            abs(lastPaddingEnd - paddingEnd) < DELTA
         ) {
             return
         }
 
-        lastPaddingStart = paddingLeftInDIP
-        lastPaddingEnd = paddingRightInDIP
+        lastPaddingStart = paddingStartDip
+        lastPaddingEnd = paddingEndDip
 
         val map: WritableMap =
             WritableNativeMap().apply {
-                putDouble("paddingStart", paddingLeftInDIP.toDouble())
-                putDouble("paddingEnd", paddingRightInDIP.toDouble())
+                putDouble("paddingStart", paddingStartDip.toDouble())
+                putDouble("paddingEnd", paddingEndDip.toDouble())
             }
         mStateWrapper?.updateState(map)
     }
+
+    companion object {
+        private const val DELTA = 0.9f
+    }
 }
diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt
index 01beee0048..def872e9e0 100644
--- a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt
@@ -24,7 +24,7 @@ import com.swmansion.rnscreens.events.HeaderDetachedEvent
 
 class ScreenStackHeaderConfig(
     context: Context,
-) : FabricEnabledConfigViewGroup(context) {
+) : FabricEnabledHeaderConfigViewGroup(context) {
     private val configSubviews = ArrayList<ScreenStackHeaderSubview>(3)
     val toolbar: CustomToolbar
     var isHeaderHidden = false // named this way to avoid conflict with platform's isHidden

From 01df1bc7208f1cb2d2e3cb7dca54d2b9e1bd49a2 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 7 Oct 2024 16:42:39 +0200
Subject: [PATCH 40/49] fix: add `FabricEnabledHeaderConfigViewGroup` to
 blacklist for architecture-consistecy checks

---
 scripts/codegen-utils.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scripts/codegen-utils.js b/scripts/codegen-utils.js
index 2e4a83d213..427d166505 100644
--- a/scripts/codegen-utils.js
+++ b/scripts/codegen-utils.js
@@ -27,6 +27,7 @@ const SOURCE_FOLDERS = [
 const BLACKLISTED_FILES = new Set([
   'FabricEnabledViewGroup.kt',
   'NativeProxy.kt',
+  'FabricEnabledHeaderConfigViewGroup',
 ]);
 
 

From bcbef5287c5d3ac525e64ada75c3d76e7e0fcf89 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 7 Oct 2024 16:47:09 +0200
Subject: [PATCH 41/49] chore: add comment on shadow node creation

---
 .../swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt
index 49181266c8..194bec2e98 100644
--- a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt
@@ -33,6 +33,7 @@ class ScreenStackHeaderConfigViewManager :
 
     override fun createViewInstance(reactContext: ThemedReactContext) = ScreenStackHeaderConfig(reactContext)
 
+    // This works only on Paper. On Fabric the shadow node is implemented in C++ layer.
     override fun createShadowNodeInstance(context: ReactApplicationContext): LayoutShadowNode = ScreenStackHeaderConfigShadowNode(context)
 
     override fun addView(
@@ -51,7 +52,7 @@ class ScreenStackHeaderConfigViewManager :
     override fun updateState(
         view: ScreenStackHeaderConfig,
         props: ReactStylesDiffMap?,
-        stateWrapper: StateWrapper?
+        stateWrapper: StateWrapper?,
     ): Any? {
         if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
             view.setStateWrapper(stateWrapper)

From 863102e9c0c4c4b5b55a9953b4e96c8eeb660485 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 7 Oct 2024 16:50:04 +0200
Subject: [PATCH 42/49] chore: add comment on PaddingBundle

---
 .../java/com/swmansion/rnscreens/utils/PaddingBundle.kt    | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/android/src/main/java/com/swmansion/rnscreens/utils/PaddingBundle.kt b/android/src/main/java/com/swmansion/rnscreens/utils/PaddingBundle.kt
index 9654cbed71..7fb209e400 100644
--- a/android/src/main/java/com/swmansion/rnscreens/utils/PaddingBundle.kt
+++ b/android/src/main/java/com/swmansion/rnscreens/utils/PaddingBundle.kt
@@ -1,3 +1,8 @@
 package com.swmansion.rnscreens.utils
 
-data class PaddingBundle(val paddingStart: Float, val paddingEnd: Float)
+// Used only on Paper together with `setLocalData` mechanism to pass
+// the information on header paddings to shadow node.
+data class PaddingBundle(
+    val paddingStart: Float,
+    val paddingEnd: Float,
+)

From 082075b61e12caa83729019138b4439258d7b487 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 7 Oct 2024 17:07:04 +0200
Subject: [PATCH 43/49] refactor: rename FabricEnabledConfigViewGroup ->
 FabricEnabledHeaderConfigViewGroup

---
 ... => FabricEnabledHeaderConfigViewGroup.kt} | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)
 rename android/src/paper/java/com/swmansion/rnscreens/{FabricEnabledConfigViewGroup.kt => FabricEnabledHeaderConfigViewGroup.kt} (58%)

diff --git a/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt b/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledHeaderConfigViewGroup.kt
similarity index 58%
rename from android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt
rename to android/src/paper/java/com/swmansion/rnscreens/FabricEnabledHeaderConfigViewGroup.kt
index 854a48c440..f1abaf546a 100644
--- a/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledConfigViewGroup.kt
+++ b/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledHeaderConfigViewGroup.kt
@@ -3,15 +3,16 @@ package com.swmansion.rnscreens
 import android.content.Context
 import android.view.ViewGroup
 import com.facebook.react.bridge.ReactContext
-import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.uimanager.UIManagerModule
 import com.swmansion.rnscreens.utils.PaddingBundle
+import kotlin.math.abs
 
-abstract class FabricEnabledConfigViewGroup(
+abstract class FabricEnabledHeaderConfigViewGroup(
     context: Context,
 ) : ViewGroup(context) {
-    private var mStateWrapper: StateWrapper? = null
+    private var lastPaddingStart = 0
+    private var lastPaddingEnd = 0
 
     fun setStateWrapper(wrapper: StateWrapper?) = Unit
 
@@ -19,11 +20,20 @@ abstract class FabricEnabledConfigViewGroup(
         paddingStart: Int,
         paddingEnd: Int,
     ) {
-        val paddingStartInDip = PixelUtil.toDIPFromPixel(paddingStart.toFloat())
-        val paddingEndInDip = PixelUtil.toDIPFromPixel(paddingEnd.toFloat())
+        // Note that on Paper we do not convert these props from px to dip. This is done internally by RN.
+        if (abs(lastPaddingStart - paddingStart) < DELTA && abs(lastPaddingEnd - paddingEnd) < DELTA) {
+            return
+        }
+
+        lastPaddingStart = paddingStart
+        lastPaddingEnd = paddingEnd
 
         val reactContext = context as? ReactContext
         val uiManagerModule = reactContext?.getNativeModule(UIManagerModule::class.java)
         uiManagerModule?.setViewLocalData(this.id, PaddingBundle(paddingStart.toFloat(), paddingEnd.toFloat()))
     }
+
+    companion object {
+        private const val DELTA = 0.9
+    }
 }

From 700906e69a02b9e4a0f727b822f2cc4afd8fb94c Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 7 Oct 2024 17:08:41 +0200
Subject: [PATCH 44/49] chore: restore contents of App.tsx

---
 apps/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/App.tsx b/apps/App.tsx
index 855aee0148..23a9af9c45 100644
--- a/apps/App.tsx
+++ b/apps/App.tsx
@@ -7,5 +7,5 @@ enableFreeze(true);
 
 export default function App() {
   return <Example />;
-  // return <Test.TestHeaderTitle />;
+  // return <Test.Test42 />;
 }

From 90c9e2c0c312ef3572b6faaada8a452a6d816178 Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 7 Oct 2024 17:08:53 +0200
Subject: [PATCH 45/49] chore: remove redundant whitespace

---
 .../java/com/swmansion/rnscreens/FabricEnabledViewGroup.kt      | 2 --
 1 file changed, 2 deletions(-)

diff --git a/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledViewGroup.kt b/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledViewGroup.kt
index a1be0fc548..d575094dc8 100644
--- a/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledViewGroup.kt
+++ b/android/src/paper/java/com/swmansion/rnscreens/FabricEnabledViewGroup.kt
@@ -17,5 +17,3 @@ abstract class FabricEnabledViewGroup(
         // do nothing
     }
 }
-
-

From a75b68e3f0f40f84127817a0a74557538e952f9a Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 7 Oct 2024 17:09:34 +0200
Subject: [PATCH 46/49] chore: remove TestHeaderRight

---
 apps/src/tests/TestHeaderRight.tsx | 69 ------------------------------
 apps/src/tests/index.ts            |  1 -
 2 files changed, 70 deletions(-)
 delete mode 100644 apps/src/tests/TestHeaderRight.tsx

diff --git a/apps/src/tests/TestHeaderRight.tsx b/apps/src/tests/TestHeaderRight.tsx
deleted file mode 100644
index f445157711..0000000000
--- a/apps/src/tests/TestHeaderRight.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, {useLayoutEffect} from 'react';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from '@react-navigation/native-stack';
-import {useNavigation} from '@react-navigation/native';
-import {Button, Text, TextInput, View} from 'react-native';
-import {NativeStackNavigationProp} from '@react-navigation/native-stack';
-import { HeaderBackButton, HeaderButton } from '@react-navigation/elements';
-type RootStackNavigatorParamsList = {
-  Home: undefined;
-  Details: undefined;
-};
-const Stack = createNativeStackNavigator<RootStackNavigatorParamsList>();
-const HomeScreen = () => {
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackNavigatorParamsList>>();
-  const onHandlePress = () => {
-    navigation.navigate('Details');
-  };
-  return (
-    <View>
-      <Text>HomeScreen</Text>
-      <View>
-        <Button title="Go to Details" onPress={onHandlePress} />
-      </View>
-    </View>
-  );
-};
-const DetailsScreen = () => {
-  const [text, setText] = React.useState('');
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackNavigatorParamsList>>();
-  useLayoutEffect(() => {
-    navigation.setOptions({
-      headerTitle:  'Detail Screen',
-      headerRight: () => {
-        if(text.length === 0) {
-          return null;
-        }
-        return <HeaderButton ><Text>X</Text></HeaderButton> ;
-      }
-    });
-  }, [navigation, text]);
-  const onHandlePress = () => {
-    navigation.goBack();
-  };
-  return (
-    <View>
-      <Text>RegisterScreen</Text>
-      <View>
-      <TextInput  style={{ backgroundColor: 'grey', height: 40, borderColor: 'black' }} placeholder='Enter text' value={text} onChangeText={(text) => {
-          setText(text);
-        }}/>
-        <Button title="Go to Home" onPress={onHandlePress} />
-        <Button title="Go to Details" onPress={onHandlePress} />       
-      </View>
-    </View>
-  );
-};
-function App() {
-  return (
-    <NavigationContainer>
-      <Stack.Navigator>
-        <Stack.Screen name="Home" component={HomeScreen} />
-        <Stack.Screen name="Details" component={DetailsScreen} />
-      </Stack.Navigator>
-    </NavigationContainer>
-  );
-}
-export default App;
diff --git a/apps/src/tests/index.ts b/apps/src/tests/index.ts
index 6d5c7cb0a2..8904f43445 100644
--- a/apps/src/tests/index.ts
+++ b/apps/src/tests/index.ts
@@ -116,5 +116,4 @@ export { default as Test2332 } from './Test2332';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestHeader } from './TestHeader';
 export { default as TestHeaderTitle } from './TestHeaderTitle';
-export { default as TestHeaderRight } from './TestHeaderRight';
 export { default as TestModalNavigation } from './TestModalNavigation';

From b2ae3308c77874082edc6df51abd6dda4c14c14f Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 7 Oct 2024 17:13:36 +0200
Subject: [PATCH 47/49] chore: iOS cleanup part 1

---
 ios/RNSScreen.mm                       | 1 -
 ios/utils/UINavigationBar+RNSUtility.h | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/ios/RNSScreen.mm b/ios/RNSScreen.mm
index 79cafc7297..9b1cc543a0 100644
--- a/ios/RNSScreen.mm
+++ b/ios/RNSScreen.mm
@@ -61,7 +61,6 @@ @interface RNSScreenView () <
 @implementation RNSScreenView {
   __weak ReactScrollViewBase *_sheetsScrollView;
   BOOL _didSetSheetAllowedDetentsOnController;
-  NSDirectionalEdgeInsets _lastHeaderInsets;
 #ifdef RCT_NEW_ARCH_ENABLED
   RCTSurfaceTouchHandler *_touchHandler;
   react::RNSScreenShadowNode::ConcreteState::Shared _state;
diff --git a/ios/utils/UINavigationBar+RNSUtility.h b/ios/utils/UINavigationBar+RNSUtility.h
index 6fabf21428..24af95fc29 100644
--- a/ios/utils/UINavigationBar+RNSUtility.h
+++ b/ios/utils/UINavigationBar+RNSUtility.h
@@ -11,7 +11,7 @@ NS_ASSUME_NONNULL_BEGIN
  * and might need patches specific to future iOS versions, in case the view hierarchy inside
  * the navigation bar changes.
  *
- * Tested to work reliably on iOS 17.5, 15.5.
+ * Tested to work reliably on iOS 18.0, 17.5, 15.5.
  *
  * @returns `_UINavigationBarContentView` view mounted directly under the navigation bar itself
  */
@@ -25,7 +25,7 @@ NS_ASSUME_NONNULL_BEGIN
  * and might need patches specific to future iOS versions, in case the view hierarchy inside
  * the navigation bar changes.
  *
- * Tested to work reliably on iOS 17, 15.
+ * Tested to work reliably on iOS 18.0, 17.5, 15.5.
  *
  * @returns `_UIButtonBarButton` view, if present and mounted in anticipated place;
  *                      if the back button is not present, this method returns `nil`.

From 218de30a41e9f3dcbe0a19de3e891796d23d2f1d Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 7 Oct 2024 17:17:09 +0200
Subject: [PATCH 48/49] fix: fix consistency check

---
 scripts/codegen-utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/codegen-utils.js b/scripts/codegen-utils.js
index 427d166505..a542f3198e 100644
--- a/scripts/codegen-utils.js
+++ b/scripts/codegen-utils.js
@@ -27,7 +27,7 @@ const SOURCE_FOLDERS = [
 const BLACKLISTED_FILES = new Set([
   'FabricEnabledViewGroup.kt',
   'NativeProxy.kt',
-  'FabricEnabledHeaderConfigViewGroup',
+  'FabricEnabledHeaderConfigViewGroup.kt',
 ]);
 
 

From e1e68e17d33e930d0b64c2113e2397d6c025f90f Mon Sep 17 00:00:00 2001
From: Kacper Kafara <kacperkafara@gmail.com>
Date: Mon, 7 Oct 2024 17:19:18 +0200
Subject: [PATCH 49/49] chore: bump react-navigation to main (with requried
 changes)

---
 react-navigation | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react-navigation b/react-navigation
index 8ff527e5fe..6b6b846f49 160000
--- a/react-navigation
+++ b/react-navigation
@@ -1 +1 @@
-Subproject commit 8ff527e5feafd4475e5dd45bf6ac92bf3506eac1
+Subproject commit 6b6b846f4984ac4834bab6bd8474b390313c741e