From af3048964d59e83d0ad4d99e4f4dd07611ec8bad Mon Sep 17 00:00:00 2001
From: Maksymilian Galas <maksymilian.galas@swmansion.com>
Date: Fri, 4 Oct 2024 12:15:20 +0200
Subject: [PATCH] fix(iOS): full screen modal crash on paper (#2336)

## Description

Full screen modal was crashing sometimes on Paper.
Fixes #2317.

## Test code and steps to reproduce

Added `Test2317` to tests.

## Checklist

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

---------

Co-authored-by: Kacper Kafara <kacperkafara@gmail.com>
---
 apps/src/tests/Test2317.tsx       | 85 +++++++++++++++++++++++++++++++
 apps/src/tests/index.ts           |  1 +
 ios/RNSScreenStackHeaderConfig.mm |  8 +++
 3 files changed, 94 insertions(+)
 create mode 100644 apps/src/tests/Test2317.tsx

diff --git a/apps/src/tests/Test2317.tsx b/apps/src/tests/Test2317.tsx
new file mode 100644
index 0000000000..799e46519f
--- /dev/null
+++ b/apps/src/tests/Test2317.tsx
@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';
+import { DarkTheme, DefaultTheme } from '@react-navigation/native';
+import { Button, StyleSheet, Text, useColorScheme } from 'react-native';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { Colors } from 'react-native/Libraries/NewAppScreen';
+
+const Stack = createNativeStackNavigator();
+
+const App = (): React.JSX.Element => {
+  const isDarkMode = useColorScheme();
+
+  return (
+    <SafeAreaProvider>
+      <NavigationContainer theme={isDarkMode ? DarkTheme : DefaultTheme}>
+        <Stack.Navigator>
+          <Stack.Screen
+            name="main"
+            component={MainScreen}
+            options={{ headerShown: false }}
+          />
+          <Stack.Screen
+            name="modal"
+            component={FullScreenModal}
+            options={({}) => ({
+              presentation: 'fullScreenModal',
+              headerTitle: () => (
+                <Text style={{ color: isDarkMode ? Colors.light : Colors.dark }}>
+                  Header Title
+                </Text>
+              )
+            })}
+          />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </SafeAreaProvider>
+  );
+};
+
+const FullScreenModal = ({ navigation }: NativeStackScreenProps<{}>) => {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  return (
+    <SafeAreaView
+      style={[
+        styles.container,
+        { backgroundColor: isDarkMode ? Colors.darker : Colors }
+      ]}
+    >
+      <Text style={{ color: Colors.light }}>FullScreenModal</Text>
+      <Button title="Go back" onPress={navigation.goBack} />
+    </SafeAreaView>
+  );
+};
+
+const MainScreen = ({
+  navigation
+}: NativeStackScreenProps<Record<string, object | undefined>>) => {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  return (
+    <SafeAreaView
+      style={[
+        styles.container,
+        { backgroundColor: isDarkMode ? Colors.darker : Colors.lighter }
+      ]}
+    >
+      <Text style={{ color: isDarkMode ? Colors.light : Colors.dark }}>
+        Main Screen
+      </Text>
+      <Button title="Press" onPress={() => navigation.navigate('modal')} />
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});
+
+export default App;
diff --git a/apps/src/tests/index.ts b/apps/src/tests/index.ts
index eea1285008..94199a0fe4 100644
--- a/apps/src/tests/index.ts
+++ b/apps/src/tests/index.ts
@@ -111,6 +111,7 @@ export { default as Test2235 } from './Test2235';
 export { default as Test2252 } from './Test2252';
 export { default as Test2271 } from './Test2271';
 export { default as Test2282 } from './Test2282';
+export { default as Test2317 } from './Test2317';
 export { default as Test2332 } from './Test2332';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestHeader } from './TestHeader';
diff --git a/ios/RNSScreenStackHeaderConfig.mm b/ios/RNSScreenStackHeaderConfig.mm
index 04abae0cfb..a6dbb1a041 100644
--- a/ios/RNSScreenStackHeaderConfig.mm
+++ b/ios/RNSScreenStackHeaderConfig.mm
@@ -471,6 +471,14 @@ + (void)updateViewController:(UIViewController *)vc
   UINavigationItem *navitem = vc.navigationItem;
   UINavigationController *navctr = (UINavigationController *)vc.parentViewController;
 
+  // When modal is shown the underlying RNSScreen isn't attached to any navigation controller.
+  // During the modal dismissal transition this update method is called on this RNSScreen resulting in nil navctr.
+  // After the transition is completed it will be called again and will configure the navigation controller correctly.
+  // Also see: https://github.com/software-mansion/react-native-screens/pull/2336
+  if (navctr == nil) {
+    return;
+  }
+
   NSUInteger currentIndex = [navctr.viewControllers indexOfObject:vc];
   UINavigationItem *prevItem =
       currentIndex > 0 ? [navctr.viewControllers objectAtIndex:currentIndex - 1].navigationItem : nil;