fix(iOS): remove FormSheet scroll view KVO observer synchronously on invalidate

apps/src/tests/issue-tests/Test4090.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  type NativeStackNavigationProp,
+} from '@react-navigation/native-stack';
+import { Button, ScrollView, Text, View } from 'react-native';
+import { Colors } from '@apps/shared/styling';
+
+type StackParamList = {
+  Home: undefined;
+  FormSheet: undefined;
+  Purple: undefined;
+};
+
+const Stack = createNativeStackNavigator<StackParamList>();
+
+type StackNavigationProp = NativeStackNavigationProp<StackParamList>;
+
+const SCROLL_ROW_COUNT = 40;
+
+function FullHeightScrollView({
+  title,
+  backgroundColor,
+}: {
+  title: string;
+  backgroundColor: string;
+}) {
+  return (
+    <ScrollView
+      style={{ flex: 1, backgroundColor }}
+      contentContainerStyle={{
+        flexGrow: 1,
+        paddingBottom: 32,
+        paddingTop: 100,
+      }}>
+      <Text style={{ fontSize: 18, fontWeight: '600', padding: 16 }}>
+        {title}
+      </Text>
+      {[...Array(SCROLL_ROW_COUNT).keys()].map(index => (
+        <Text key={index} style={{ paddingHorizontal: 16, paddingVertical: 8 }}>
+          Scroll row {index}
+        </Text>
+      ))}
+    </ScrollView>
+  );
+}
+
+function Home({ navigation }: { navigation: StackNavigationProp }) {
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: Colors.White,
+      }}>
+      <Text style={{ marginBottom: 16 }}>Regular stack screen</Text>
+      <Button
+        title="Open FormSheet"
+        onPress={() => navigation.navigate('FormSheet')}
+        testID="home-open-form-sheet"
+      />
+    </View>
+  );
+}
+
+function FormSheetScreen({ navigation }: { navigation: StackNavigationProp }) {
+  return (
+    <View style={{ flex: 1, backgroundColor: Colors.GreenLight100 }}>
+      <FullHeightScrollView
+        title="FormSheet (ScrollView)"
+        backgroundColor={Colors.GreenLight100}
+      />
+      <View style={{ padding: 16, gap: 8 }}>
+        <Button
+          title="Open Purple"
+          onPress={() => {
+            navigation.goBack();
+            navigation.navigate('Purple');
+          }}
+          testID="form-sheet-open-purple"
+        />
+      </View>
+    </View>
+  );
+}
+
+function PurpleScreen() {
+  return (
+    <View style={{ flex: 1, backgroundColor: Colors.PurpleLight100 }}>
+      <FullHeightScrollView
+        title="Purple (ScrollView)"
+        backgroundColor={Colors.PurpleLight100}
+      />
+    </View>
+  );
+}
+
+export default function Test4090() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Home"
+          component={Home}
+          options={{
+            title: 'Home',
+            headerShown: true,
+          }}
+        />
+        <Stack.Screen
+          name="FormSheet"
+          component={FormSheetScreen}
+          options={{
+            headerShown: false,
+            presentation: 'formSheet',
+            sheetAllowedDetents: [0.5],
+          }}
+        />
+        <Stack.Screen
+          name="Purple"
+          component={PurpleScreen}
+          options={{
+            title: 'Purple',
+            headerShown: true,
+            headerTransparent: true,
+          }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}

apps/src/tests/issue-tests/index.ts

@@ -214,3 +214,4 @@ export { default as TestScreenStack } from './TestScreenStack';
 export { default as TestSplit } from './TestSplit';
 export { default as TestSafeAreaViewIOS } from './TestSafeAreaViewIOS';
 export { default as TestStackNesting } from './TestStackNesting';
+export { default as Test4090 } from './Test4090';

ios/RNSScreen.mm

@@ -770,13 +770,19 @@ - (BOOL)isTransparentModal
 
 - (void)invalidateImpl
 {
+  // Since the scroll view might get immediately recycled we remove ourselves
+  // immediately.
+  if (_sheetsScrollView != nil) {
+    [_sheetsScrollView removeObserver:self forKeyPath:@"bounds" context:nil];
+    _sheetsScrollView = nil;
+  }
+
   // We want to run after container updates are performed (transitions etc.)
   __weak auto weakSelf = self;
 
   dispatch_async(dispatch_get_main_queue(), ^{
     auto strongSelf = weakSelf;
     if (strongSelf) {
-      [strongSelf->_sheetsScrollView removeObserver:strongSelf forKeyPath:@"bounds" context:nil];
       strongSelf->_controller = nil;
     }
   });