fix(iOS,Paper): incorrect size of scrollview viewport with formSheet presentation

apps/src/tests/Test2424.tsx

@@ -0,0 +1,75 @@
+import { NavigationContainer } from "@react-navigation/native";
+import { NativeStackNavigationProp, createNativeStackNavigator } from "@react-navigation/native-stack";
+import React from "react";
+import { Button, ScrollView, Text, View } from "react-native";
+
+
+type RouteParamList = {
+  Home: undefined;
+  Sheet: undefined;
+  ReproSheet: undefined;
+}
+
+const Stack = createNativeStackNavigator<RouteParamList>();
+
+function Home({ navigation }: { navigation: NativeStackNavigationProp<RouteParamList> }): React.JSX.Element {
+  return (
+    <View style={{ flex: 1, backgroundColor: 'lightgreen' }}>
+      <Button title="Open Sheet" onPress={() => navigation.navigate('Sheet')} />
+      <Button title="Open reproduction sheet" onPress={() => navigation.navigate('ReproSheet')} />
+    </View>
+
+  )
+}
+
+function Sheet(): React.JSX.Element {
+  return (
+    <View style={{backgroundColor: 'crimson', flex: 1 }} collapsable={false} >
+      <ScrollView style={{ flex: 1 }}>
+        {Array.from({ length: 90 }).map((_, index) => (<Text key={index}>I'm a long scrollview</Text>))}
+        <View style={{ width: '100%', height: 50, backgroundColor: 'seagreen' }} />
+      </ScrollView>
+    </View>
+  )
+}
+
+function SheetFromReproduction(): React.JSX.Element {
+  return (
+    <View style={{ flex: 1 }} >
+      <ScrollView style={{ flex: 1 }}>
+        <Text>Modal Screen</Text>
+        <View style={{ height: 2000, backgroundColor: 'red' }}>
+          {Array.from({ length: 100 }).map((_, index) => (
+            <Text key={index}>I'm a long scrollview</Text>
+          ))}
+        </View>
+      </ScrollView>
+    </View>
+  )
+}
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={Home} />
+        <Stack.Screen name='Sheet' component={Sheet} options={{
+          presentation: 'formSheet',
+          headerShown: true,
+          sheetAllowedDetents: [0.5, 0.9],
+          unstable_screenStyle: {
+            backgroundColor: 'crimson'
+          }
+        }} />
+        <Stack.Screen name='ReproSheet' component={SheetFromReproduction} options={{
+          presentation: 'formSheet',
+          headerShown: true,
+          sheetAllowedDetents: [0.9],
+          unstable_screenStyle: {
+            backgroundColor: 'crimson'
+          }
+        }} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}

apps/src/tests/index.ts

@@ -115,6 +115,7 @@ export { default as Test2320 } from './Test2320';
 export { default as Test2332 } from './Test2332';
 export { default as Test2379 } from './Test2379';
 export { default as Test2395 } from './Test2395';
+export { default as Test2424 } from './Test2424';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestHeader } from './TestHeader';
 export { default as TestPreload } from './TestPreload';

ios/RNSScreen.mm

@@ -59,7 +59,10 @@
 @end
 
 @implementation RNSScreenView {
-  __weak ReactScrollViewBase *_sheetsScrollView;
+  /// First ScrollView found from screen with formSheet presentation together with nearest screen above in view
+  /// hierarchy
+  std::pair<__weak ReactScrollViewBase *, __weak RNSScreenView *> _sheetScrollViewBundle;
+  //  __weak ReactScrollViewBase *_sheetsScrollView;
   BOOL _didSetSheetAllowedDetentsOnController;
 #ifdef RCT_NEW_ARCH_ENABLED
   RCTSurfaceTouchHandler *_touchHandler;
@@ -119,10 +122,10 @@
   _hasOrientationSet = NO;
   _hasHomeIndicatorHiddenSet = NO;
   _activityState = RNSActivityStateUndefined;
+  _sheetScrollViewBundle = std::make_pair(nil, nil);
 #if !TARGET_OS_TV
   _sheetExpandsWhenScrolledToEdge = YES;
 #endif // !TARGET_OS_TV
-  _sheetsScrollView = nil;
   _didSetSheetAllowedDetentsOnController = NO;
 #ifdef RCT_NEW_ARCH_ENABLED
   _markedForUnmountInCurrentTransaction = NO;
@@ -141,6 +144,12 @@
 }
 #endif
 
+- (void)setFrame:(CGRect)frame
+{
+  NSLog(@"Screen at %p updates frame from %@ to %@", self, NSStringFromCGRect(self.frame), NSStringFromCGRect(frame));
+  [super setFrame:frame];
+}
+
 - (void)updateBounds
 {
 #ifdef RCT_NEW_ARCH_ENABLED
@@ -159,10 +168,13 @@
   [_bridge.uiManager setSize:self.bounds.size forView:self];
 #endif // RCT_NEW_ARCH_ENABLED
 
-  if (_stackPresentation != RNSScreenStackPresentationFormSheet) {
-    return;
+  if (_stackPresentation == RNSScreenStackPresentationFormSheet) {
+    [self updateFrameOfNestedScrollView];
   }
+}
 
+- (void)updateFrameOfNestedScrollView
+{
   // In case of formSheet stack presentation, to mitigate view flickering
   // (see PR with description of this problem: https://github.com/software-mansion/react-native-screens/pull/1870)
   // we do not set `bottom: 0` in JS for wrapper of the screen content, causing React to not set
@@ -177,17 +189,35 @@
   // TODO: Consider adding a prop to control whether we want to look for a scroll view here.
   // It might be necessary in case someone doesn't want its scroll view to span over whole
   // height of the sheet.
-  ReactScrollViewBase *scrollView = [self findDirectLineDescendantReactScrollView];
-  if (_sheetsScrollView != scrollView) {
-    [_sheetsScrollView removeObserver:self forKeyPath:@"bounds" context:nil];
-    _sheetsScrollView = scrollView;
+  const auto [scrollView, screenViewAncestor] = [self findDirectLineDescendandReactScrollView];
+
+  if (_sheetScrollViewBundle.first != scrollView) {
+    [_sheetScrollViewBundle.first removeObserver:self forKeyPath:@"bounds" context:nil];
+    _sheetScrollViewBundle.first = scrollView;
 
     // We pass 0 as options, as we are not interested in receiving updated bounds value,
     // we are going to overwrite it anyway.
     [scrollView addObserver:self forKeyPath:@"bounds" options:0 context:nil];
   }
+
+  if (_sheetScrollViewBundle.second != screenViewAncestor) {
+    [_sheetScrollViewBundle.second removeObserver:self forKeyPath:@"frame" context:nil];
+    _sheetScrollViewBundle.second = nil;
+  }
+
   if (scrollView != nil) {
-    [scrollView setFrame:self.frame];
+    if (CGRectEqualToRect(screenViewAncestor.frame, CGRectZero)) {
+      [screenViewAncestor addObserver:self forKeyPath:@"frame" options:0 context:nil];
+      _sheetScrollViewBundle.second = screenViewAncestor;
+    } else {
+      CGRect newFrame = CGRectMake(
+          scrollView.frame.origin.x,
+          scrollView.frame.origin.y,
+          screenViewAncestor.frame.size.width,
+          screenViewAncestor.frame.size.height);
+      NSLog(@"[1] Set scrollview frame to %@", NSStringFromCGRect(screenViewAncestor.frame));
+      [scrollView setFrame:newFrame];
+    }
   }
 }
 
@@ -196,9 +226,28 @@
                         change:(NSDictionary<NSKeyValueChangeKey, id> *)change
                        context:(void *)context
 {
-  UIView *scrollview = (UIView *)object;
-  if (!CGRectEqualToRect(scrollview.frame, self.frame)) {
-    [scrollview setFrame:self.frame];
+  if ([object isKindOfClass:ReactScrollViewBase.class]) {
+    UIView *scrollview = (UIView *)object;
+    NSLog(@"[2] Set scrollview frame to %@", NSStringFromCGRect(self.frame));
+    if (_sheetScrollViewBundle.second != nil) {
+      [scrollview setFrame:_sheetScrollViewBundle.second.frame];
+    } else {
+      [scrollview setFrame:self.frame];
+    }
+    //    if (!CGRectEqualToRect(scrollview.frame, self.frame)) {
+    //    }
+  } else if ([object isKindOfClass:RNSScreenView.class]) {
+    RNSScreenView *screenViewScrollViewAncestor = (RNSScreenView *)object;
+    if (!CGRectEqualToRect(_sheetScrollViewBundle.first.frame, screenViewScrollViewAncestor.frame)) {
+      ReactScrollViewBase *scrollView = _sheetScrollViewBundle.first;
+      CGRect newFrame = CGRectMake(
+          scrollView.frame.origin.x,
+          scrollView.frame.origin.y,
+          screenViewScrollViewAncestor.frame.size.width,
+          screenViewScrollViewAncestor.frame.size.height);
+      NSLog(@"[3] Set scrollview frame to %@", NSStringFromCGRect(newFrame));
+      [_sheetScrollViewBundle.first setFrame:newFrame];
+    }
   }
 }
 
@@ -723,16 +772,35 @@
 }
 
 /// Looks for RCTScrollView in direct line - goes through the subviews at index 0 down the view hierarchy.
-- (nullable ReactScrollViewBase *)findDirectLineDescendantReactScrollView
+- (std::pair<ReactScrollViewBase *_Nullable, RNSScreenView *_Nonnull>)findDirectLineDescendandReactScrollView
 {
   UIView *firstSubview = self;
+  RNSScreenView *screenViewAncestor = self;
+
+#ifdef RCT_NEW_ARCH_ENABLED
   while (firstSubview.subviews.count > 0) {
     firstSubview = firstSubview.subviews[0];
     if ([firstSubview isKindOfClass:ReactScrollViewBase.class]) {
       return (ReactScrollViewBase *)firstSubview;
     }
   }
-  return nil;
+#else
+  while (firstSubview.reactSubviews.count > 0) {
+    firstSubview = firstSubview.reactSubviews[0];
+    NSLog(@"Looking at subview %@", firstSubview);
+
+    if ([firstSubview isKindOfClass:ReactScrollViewBase.class]) {
+      return std::make_pair(firstSubview, screenViewAncestor);
+    } else if ([firstSubview isKindOfClass:RNSScreenView.class]) {
+      screenViewAncestor = (RNSScreenView *)firstSubview;
+      NSLog(
+          @"Update screenViewAncestor to view with tag: %ld and frame %@",
+          screenViewAncestor.tag,
+          NSStringFromCGRect(screenViewAncestor.frame));
+    }
+  }
+#endif
+  return std::make_pair(nil, screenViewAncestor);
 }
 
 - (BOOL)isModal
@@ -766,7 +834,15 @@
 - (void)invalidate
 {
   _controller = nil;
-  [_sheetsScrollView removeObserver:self forKeyPath:@"bounds" context:nil];
+  [self cleanupSheetScrollViewObservers];
+}
+
+- (void)cleanupSheetScrollViewObservers
+{
+  [_sheetScrollViewBundle.first removeObserver:self forKeyPath:@"bounds" context:nil];
+  [_sheetScrollViewBundle.second removeObserver:self forKeyPath:@"frame" context:nil];
+  _sheetScrollViewBundle.first = nil;
+  _sheetScrollViewBundle.second = nil;
 }
 
 #if !TARGET_OS_TV && !TARGET_OS_VISION