fix(iOS, Stack): Deduplicate contentStyle on Screen and ScreenContentWrapper (#3228)

## Description

This PR addresses an issue with the support for LiquidGlass FormSheets
on iOS, as detailed in this blog post
https://nilcoalescing.com/blog/LiquidGlassSheetsWithNavigationStackAndForm/.

Previously, the implementation of the `contentStyle` option led to the
background color overlapping. Specifically, with the low opacity styles
were duplicated for `Screen` and `ScreenContentWrapper`, which caused
visual issues in the content area.

To resolve this, I’ve separated the handling of `contentStyle`
properties on iOS, which requires applying background color at the level
of `Screen` component due to the safe area insets:

- The `backgroundColor` is now applied **only** at the RNSScreen level
to achieve the desired LiquidGlass translucent effect without
interfering with content rendering.
- The remaining `contentStyle` properties are applied under the
`ScreenContentWrapper`, which is semantically more appropriate.

This results in a more accurate and visually correct rendering of
translucent backgrounds on iOS FormSheets using LiquidGlass.

## Changes

- Separated `contentStyle` to props that should be applied on the
`Screen` and `ScreenContentWrapper` level.

## Screenshots / GIFs

Here you can add screenshots / GIFs documenting your change.

You can add before / after section if you're changing some behavior.

### Before


https://github.com/user-attachments/assets/7b65fa0f-e478-44d0-a6b6-eb8f60f8461a

### After


https://github.com/user-attachments/assets/c6ec1d34-1459-435b-ac16-886ef9d4a6c8

## Test code and steps to reproduce

Added a new example to `TestFormSheet`

## Checklist

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

I'm leaving some follow-up issues and ideas that came during the
implementation of this PR.

More important:
-
software-mansion/react-native-screens-labs#452
- it makes more sense to apply some other styles on the `Screen` level
due to the safe area on iOS - like borders or filters - we should
revisit it and define how the props should be split between `Screen` and
`ScreenContentWrapper`
-
software-mansion/react-native-screens-labs#441
- setting fixed size based on the maximum detent would have 2
significant benefits: we'd have the same model for both Android and iOS
and we'd resolve the problem of flickering content on resize without
synchronous updates - it has a potential, tested along with this PR, but
we're suffering from the lack of API on iOS 15 or lower - APIs for
resolving detens is available from iOS 16, what is currently a blocker
for us, because we cannot predict the target height for `large` detent,
using system detents

Less important:
-
software-mansion/react-native-screens-labs#457
- bug related to the safe area combined with maximum detent on android
-
software-mansion/react-native-screens-labs#458
- bug related to positioning the content with `flex-end` on android

Author: t0maboro

apps/src/tests/TestFormSheet.tsx

@@ -3,6 +3,7 @@ import { NativeStackNavigationProp, createNativeStackNavigator } from '@react-na
 import React from 'react';
 import { Button, FlatList, ScrollView, Text, TextInput, View } from 'react-native';
 import PressableWithFeedback from '../shared/PressableWithFeedback';
+import { Spacer } from '../shared';
 
 type ItemData = {
   id: number,
@@ -16,6 +17,7 @@ type RouteParamList = {
   SecondFormSheet: undefined;
   FormSheetWithFlatList: undefined;
   FormSheetWithScrollView: undefined;
+  GlossyFormSheet: undefined;
 };
 
 type RouteProps<RouteName extends keyof RouteParamList> = {
@@ -36,6 +38,7 @@ function Home({ navigation }: RouteProps<'Home'>) {
       <Button title="Open Second" onPress={() => navigation.navigate('Second')} />
       <Button title="Open sheet with FlatList" onPress={() => navigation.navigate('FormSheetWithFlatList')} />
       <Button title="Open sheet with ScrollView" onPress={() => navigation.navigate('FormSheetWithScrollView')} />
+      <Button title="Open glossy form sheet" onPress={() => navigation.navigate('GlossyFormSheet')} />
       <PressableWithFeedback>
         <View style={{ alignItems: 'center', height: 40, justifyContent: 'center' }}>
           <Text>Pressable</Text>
@@ -151,6 +154,28 @@ function FormSheetWithScrollView() {
   );
 }
 
+function GlossyFormSheet({ navigation }: RouteProps<'GlossyFormSheet'>) {
+  return (
+    // When using `fitToContents` you can't use flex: 1. It is you who must provide
+    // the content size - you can't rely on parent size here.
+    <View>
+      <Spacer space={50} />
+      <PressableWithFeedback>
+        <View
+          style={{
+            alignItems: 'center',
+            height: 40,
+            justifyContent: 'center',
+          }}>
+          <Text>Pressable</Text>
+        </View>
+      </PressableWithFeedback>
+      <Spacer space={50} />
+      <Button title="Go back" onPress={() => navigation.goBack()} />
+    </View>
+  );
+}
+
 // @ts-ignore // uncomment the usage down below if needed
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function FormSheetFooter() {
@@ -212,6 +237,15 @@ export default function App() {
             backgroundColor: 'lightblue',
           },
         }} />
+        <Stack.Screen name='GlossyFormSheet' component={GlossyFormSheet} options={{
+          presentation: 'formSheet',
+          sheetAllowedDetents: [0.3, 0.5, 0.8],
+          //sheetAllowedDetents: 'fitToContents',
+          headerShown: false,
+          contentStyle: {
+            backgroundColor: '#ff00ff40',
+          },
+        }} />
       </Stack.Navigator>
     </NavigationContainer>
   );

src/components/DebugContainer.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { Platform, type ViewProps } from 'react-native';
+import { Platform, StyleProp, ViewStyle, type ViewProps } from 'react-native';
 // @ts-expect-error importing private component
 
 import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
 import ScreenContentWrapper from './ScreenContentWrapper';
 import { StackPresentationTypes } from '../types';
 
 type ContainerProps = ViewProps & {
+  contentStyle?: StyleProp<ViewStyle>;
   stackPresentation: StackPresentationTypes;
   children: React.ReactNode;
 };
@@ -16,28 +17,32 @@ type ContainerProps = ViewProps & {
  * See https://github.com/software-mansion/react-native-screens/pull/1825
  * for detailed explanation.
  */
-let DebugContainer: React.ComponentType<ContainerProps> = props => {
-  return <ScreenContentWrapper {...props} />;
+let DebugContainer: React.FC<ContainerProps> = ({
+  contentStyle,
+  style,
+  ...rest
+}) => {
+  return <ScreenContentWrapper style={[style, contentStyle]} {...rest} />;
 };
 
 if (process.env.NODE_ENV !== 'production') {
   DebugContainer = (props: ContainerProps) => {
-    const { stackPresentation, ...rest } = props;
+    const { contentStyle, stackPresentation, style, ...rest } = props;
+
+    const content = (
+      <ScreenContentWrapper style={[style, contentStyle]} {...rest} />
+    );
 
     if (
       Platform.OS === 'ios' &&
       stackPresentation !== 'push' &&
       stackPresentation !== 'formSheet'
     ) {
       // This is necessary for LogBox
-      return (
-        <AppContainer>
-          <ScreenContentWrapper {...rest} />
-        </AppContainer>
-      );
+      return <AppContainer>{content}</AppContainer>;
     }
 
-    return <ScreenContentWrapper {...rest} />;
+    return content;
   };
 
   DebugContainer.displayName = 'DebugContainer';

src/components/ScreenStackItem.tsx

@@ -9,7 +9,11 @@ import {
 import warnOnce from 'warn-once';
 
 import DebugContainer from './DebugContainer';
-import { ScreenProps, ScreenStackHeaderConfigProps } from '../types';
+import {
+  ScreenProps,
+  ScreenStackHeaderConfigProps,
+  StackPresentationTypes,
+} from '../types';
 import { ScreenStackHeaderConfig } from './ScreenStackHeaderConfig';
 import Screen from './Screen';
 import ScreenStack from './ScreenStack';
@@ -65,19 +69,31 @@ function ScreenStackItem(
     headerHiddenPreviousRef.current = headerConfig?.hidden;
   }, [headerConfig?.hidden, stackPresentation]);
 
+  const debugContainerStyle = getPositioningStyle(
+    sheetAllowedDetents,
+    stackPresentation,
+  );
+
+  // For iOS, we need to extract background color and apply it to Screen
+  // due to the safe area inset at the bottom of ScreenContentWrapper
+  let internalScreenStyle;
+
+  if (
+    stackPresentation === 'formSheet' &&
+    Platform.OS === 'ios' &&
+    contentStyle
+  ) {
+    const { screenStyles, contentWrapperStyles } =
+      extractScreenStyles(contentStyle);
+    internalScreenStyle = screenStyles;
+    contentStyle = contentWrapperStyles;
+  }
+
   const content = (
     <>
       <DebugContainer
-        style={[
-          stackPresentation === 'formSheet'
-            ? Platform.OS === 'ios'
-              ? styles.absolute
-              : sheetAllowedDetents === 'fitToContents'
-              ? null
-              : styles.container
-            : styles.container,
-          contentStyle,
-        ]}
+        contentStyle={contentStyle}
+        style={debugContainerStyle}
         stackPresentation={stackPresentation ?? 'push'}>
         {children}
       </DebugContainer>
@@ -100,18 +116,6 @@ function ScreenStackItem(
     </>
   );
 
-  // We take backgroundColor from contentStyle and apply it on Screen.
-  // This allows to workaround one issue with truncated
-  // content with formSheet presentation.
-  let internalScreenStyle;
-
-  if (stackPresentation === 'formSheet' && contentStyle) {
-    const flattenContentStyles = StyleSheet.flatten(contentStyle);
-    internalScreenStyle = {
-      backgroundColor: flattenContentStyles?.backgroundColor,
-    };
-  }
-
   return (
     <Screen
       ref={node => {
@@ -164,6 +168,56 @@ function ScreenStackItem(
 
 export default React.forwardRef(ScreenStackItem);
 
+function getPositioningStyle(
+  allowedDetents: ScreenProps['sheetAllowedDetents'],
+  presentation?: StackPresentationTypes,
+) {
+  const isIOS = Platform.OS === 'ios';
+
+  if (presentation !== 'formSheet') {
+    return styles.container;
+  }
+
+  if (isIOS) {
+    if (allowedDetents === 'fitToContents') {
+      return styles.absolute;
+    } else {
+      return styles.container;
+    }
+  }
+
+  // Other platforms, tested reliably only on Android
+  if (allowedDetents === 'fitToContents') {
+    return {};
+  }
+
+  return styles.container;
+}
+
+type SplitStyleResult = {
+  screenStyles: {
+    backgroundColor?: ViewStyle['backgroundColor'];
+  };
+  contentWrapperStyles: StyleProp<ViewStyle>;
+};
+
+// TODO: figure out whether other styles, like borders, filters, etc.
+// shouldn't be applied on the Screen level on iOS due to the inset.
+function extractScreenStyles(style: StyleProp<ViewStyle>): SplitStyleResult {
+  const flatStyle = StyleSheet.flatten(style);
+
+  const { backgroundColor, ...contentWrapperStyles } = flatStyle as ViewStyle;
+
+  const screenStyles = {
+    backgroundColor,
+  };
+
+  return {
+    screenStyles,
+    contentWrapperStyles,
+  };
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,