fix(iOS): forward scrollEdgeEffects to inner screen in modals (#3816) (#3825)

## Description

When a modal has a header (`isHeaderInModal`), the content is wrapped in
a nested `ScreenStack`/`Screen`. The `scrollEdgeEffects` prop was only
set on the outer modal screen, which doesn't contain the scroll view.
This forwards the prop to the inner screen where the scroll view
actually lives.

Also adds `scrollEdgeEffect` props to `ModalScreenNativeComponent`
codegen spec for the `headerShown: false` case, where the modal screen
directly contains the scroll view.

Closes #3816.

## Changes

- Destructured `scrollEdgeEffects` in `ScreenStackItem.tsx` and
forwarded it to the inner `<Screen>` when `isHeaderInModal` is true. The
outer modal screen receives `undefined` since it has no scroll view.
- Added `bottomScrollEdgeEffect`, `leftScrollEdgeEffect`,
`rightScrollEdgeEffect`, and `topScrollEdgeEffect` props to
`ModalScreenNativeComponent.ts` codegen spec.

## Test plan

Test with `Test3816` in the apps example project.

1. Open the app and navigate to `Test3816`
2. Tap "Open formSheet modal"
3. Verify that scroll edge effects on the modal's scroll view match the
configured values (`hidden` for all edges)
4. Compare with a modal using `headerShown: false` to verify that case
also works

## Checklist

- [x] Included code example that can be used to test this change.
- [x] Updated / created local changelog entries in relevant test files.
- [ ] For visual changes, included screenshots / GIFs / recordings
documenting the change.
- [x] For API changes, updated relevant public types.
- [ ] Ensured that CI passes

---------

Co-authored-by: Krzysztof Ligarski <63918941+kligarski@users.noreply.github.com>

Author: maxencehenneron

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

@@ -0,0 +1,73 @@
+/**
+ * Changelog:
+ *
+ * #3816 - scrollEdgeEffects not applied on modal screens. The prop was set on the outer modal
+ *         screen which doesn't contain the scroll view. Fix forwards it to the inner screen.
+ */
+
+import React from 'react';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  NativeStackNavigationProp,
+  createNativeStackNavigator,
+} from '@react-navigation/native-stack';
+import { Button, ScrollView } from 'react-native';
+import LongText from '../../shared/LongText';
+
+type RouteParamList = {
+  Home: undefined;
+  Modal: undefined;
+};
+
+type NavigationProp<ParamList extends ParamListBase> = {
+  navigation: NativeStackNavigationProp<ParamList>;
+};
+
+type StackNavigationProp = NavigationProp<RouteParamList>;
+
+const Stack = createNativeStackNavigator<RouteParamList>();
+
+function Home({ navigation }: StackNavigationProp) {
+  return (
+    <ScrollView contentInsetAdjustmentBehavior="automatic">
+      <Button
+        title="Open formSheet modal"
+        onPress={() => navigation.navigate('Modal')}
+      />
+      <LongText />
+    </ScrollView>
+  );
+}
+
+function Modal({ navigation }: StackNavigationProp) {
+  return (
+    <ScrollView contentInsetAdjustmentBehavior="automatic">
+      <Button title="Go back" onPress={() => navigation.goBack()} />
+      <LongText />
+    </ScrollView>
+  );
+}
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={Home} />
+        <Stack.Screen
+          name="Modal"
+          component={Modal}
+          options={{
+            presentation: 'modal',
+            headerTransparent: true,
+            scrollEdgeEffects: {
+              bottom: 'hidden',
+              left: 'hidden',
+              right: 'hidden',
+              top: 'hidden',
+            },
+          }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}

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

@@ -183,6 +183,7 @@ export { default as Test3611 } from './Test3611';
 export { default as Test3617 } from './Test3617';
 export { default as Test3760 } from './Test3760';
 export { default as Test3770 } from './Test3770';
+export { default as Test3816 } from './Test3816';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 // The following test was meant to demo the "go back" gesture using Reanimated
 // but the associated PR in react-navigation is currently put on hold

src/components/ScreenStackItem.tsx

@@ -45,6 +45,7 @@ function ScreenStackItem(
     style,
     screenId,
     onHeaderHeightChange,
+    scrollEdgeEffects,
     // eslint-disable-next-line camelcase
     unstable_sheetFooter,
     ...rest
@@ -79,8 +80,8 @@ function ScreenStackItem(
   }, [headerConfigHiddenWithDefault, stackPresentationWithDefault]);
 
   const hasEdgeEffects =
-    rest?.scrollEdgeEffects === undefined ||
-    Object.values(rest.scrollEdgeEffects).some(
+    scrollEdgeEffects === undefined ||
+    Object.values(scrollEdgeEffects).some(
       propValue => propValue !== 'hidden',
     );
   const hasBlurEffect =
@@ -177,6 +178,7 @@ function ScreenStackItem(
       hasLargeHeader={headerConfig?.largeTitle ?? false}
       sheetAllowedDetents={sheetAllowedDetents}
       style={[style, internalScreenStyle]}
+      scrollEdgeEffects={isHeaderInModal ? undefined : scrollEdgeEffects}
       onHeaderHeightChange={isHeaderInModal ? undefined : onHeaderHeightChange}
       {...rest}>
       {isHeaderInModal ? (
@@ -187,6 +189,7 @@ function ScreenStackItem(
             activityState={activityState}
             shouldFreeze={shouldFreeze}
             hasLargeHeader={headerConfig?.largeTitle ?? false}
+            scrollEdgeEffects={scrollEdgeEffects}
             style={StyleSheet.absoluteFill}
             onHeaderHeightChange={onHeaderHeightChange}>
             {content}

src/fabric/ModalScreenNativeComponent.ts

@@ -59,6 +59,8 @@ type SwipeDirection = 'vertical' | 'horizontal';
 
 type ReplaceAnimation = 'pop' | 'push';
 
+type ScrollEdgeEffect = 'automatic' | 'hard' | 'soft' | 'hidden';
+
 type OptionalBoolean = 'undefined' | 'false' | 'true';
 
 export interface NativeProps extends ViewProps {
@@ -107,6 +109,10 @@ export interface NativeProps extends ViewProps {
   navigationBarTranslucent?: boolean;
   navigationBarHidden?: boolean;
   nativeBackButtonDismissalEnabled?: boolean;
+  bottomScrollEdgeEffect?: CT.WithDefault<ScrollEdgeEffect, 'automatic'>;
+  leftScrollEdgeEffect?: CT.WithDefault<ScrollEdgeEffect, 'automatic'>;
+  rightScrollEdgeEffect?: CT.WithDefault<ScrollEdgeEffect, 'automatic'>;
+  topScrollEdgeEffect?: CT.WithDefault<ScrollEdgeEffect, 'automatic'>;
   synchronousShadowStateUpdatesEnabled?: CT.WithDefault<boolean, false>;
 }