fix(Android): formSheet flex 1 support

apps/src/tests/Test2462.tsx

@@ -0,0 +1,152 @@
+import * as React from 'react';
+import { View, Button, Text, StyleSheet, ScrollView } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationOptions,
+  NativeStackNavigationProp,
+} from '@react-navigation/native-stack';
+
+type StackParamList = {
+  Home: undefined;
+  'Sheet One': undefined;
+  'Sheet Two': undefined;
+  'Sheet Three': undefined;
+};
+
+function HomeScreen({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<StackParamList>;
+}) {
+  return (
+    <View style={styles.container}>
+      <Button
+        onPress={() => navigation.navigate('Sheet One')}
+        title="Open First Sheet"
+      />
+      <Button
+        onPress={() => navigation.navigate('Sheet Two')}
+        title="Open Second Sheet"
+      />
+      <Button
+        onPress={() => navigation.navigate('Sheet Three')}
+        title="Open Third Sheet"
+      />
+    </View>
+  );
+}
+
+function Screen({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<StackParamList>;
+}) {
+  return (
+    <View style={styles.sheetContainer}>
+      <Text style={styles.text}>I'm inside a view</Text>
+      <Button onPress={navigation.goBack} title="Dismiss" />
+    </View>
+  );
+}
+
+function Screen2({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<StackParamList>;
+}) {
+  return (
+    <View style={{ ...styles.sheetContainer, flex: 1 }}>
+      <Text style={styles.text}>I'm inside a view with "flex: 1"</Text>
+      <Button onPress={navigation.goBack} title="Dismiss" />
+    </View>
+  );
+}
+
+function Screen3({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<StackParamList>;
+}) {
+  return (
+    <ScrollView
+      contentContainerStyle={styles.sheetContainer}
+      nestedScrollEnabled>
+      {Array(30)
+        .fill(0)
+        .map((_, index) => (
+          <Text style={styles.text} key={index}>
+            I'm inside a scrollview
+          </Text>
+        ))}
+      <Button onPress={navigation.goBack} title="Dismiss" />
+      <ScrollView>
+        {Array(30)
+          .fill(0)
+          .map((_, index) => (
+            <Text style={styles.text} key={'nested' + index}>
+              I'm inside a nested scrollview
+            </Text>
+          ))}
+      </ScrollView>
+    </ScrollView>
+  );
+}
+
+const RootStack = createNativeStackNavigator<StackParamList>();
+
+const commonSheetOptions = {
+  presentation: 'formSheet',
+  sheetAllowedDetents: [0.5, 1],
+  unstable_screenStyle: { backgroundColor: 'linen' },
+  sheetCornerRadius: 25,
+} as NativeStackNavigationOptions;
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <RootStack.Navigator>
+        <RootStack.Screen
+          name="Home"
+          component={HomeScreen}
+          options={{ headerShown: false }}
+        />
+        <RootStack.Screen
+          name="Sheet One"
+          component={Screen}
+          options={commonSheetOptions}
+        />
+        <RootStack.Screen
+          name="Sheet Two"
+          component={Screen2}
+          options={commonSheetOptions}
+        />
+        <RootStack.Screen
+          name="Sheet Three"
+          component={Screen3}
+          options={commonSheetOptions}
+        />
+      </RootStack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    fontWeight: 'bold',
+    fontSize: 20,
+    padding: 5,
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 10,
+  },
+  sheetContainer: {
+    backgroundColor: 'antiquewhite',
+    padding: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

apps/src/tests/index.ts

@@ -116,6 +116,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 Test2462 } from './Test2462';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestHeader } from './TestHeader';
 export { default as TestPreload } from './TestPreload';

src/components/ScreenStackItem.tsx

@@ -22,14 +22,17 @@ type Props = Omit<
   contentStyle?: StyleProp<ViewStyle>;
 };
 
-function ScreenStackItem({
-  children,
-  headerConfig,
-  activityState,
-  stackPresentation,
-  contentStyle,
-  ...rest
-}: Props, ref: React.ForwardedRef<View>) {
+function ScreenStackItem(
+  {
+    children,
+    headerConfig,
+    activityState,
+    stackPresentation,
+    contentStyle,
+    ...rest
+  }: Props,
+  ref: React.ForwardedRef<View>,
+) {
   const isHeaderInModal =
     Platform.OS === 'android'
       ? false
@@ -42,7 +45,7 @@ function ScreenStackItem({
       Platform.OS !== 'android' &&
         stackPresentation !== 'push' &&
         headerHiddenPreviousRef.current !== headerConfig?.hidden,
-      `Dynamically changing header's visibility in modals will result in remounting the screen and losing all local state.`
+      `Dynamically changing header's visibility in modals will result in remounting the screen and losing all local state.`,
     );
 
     headerHiddenPreviousRef.current = headerConfig?.hidden;
@@ -53,14 +56,14 @@ function ScreenStackItem({
       <DebugContainer
         style={[
           stackPresentation === 'formSheet'
-            ? Platform.OS === 'ios'
-              ? styles.absolute
-              : null
+            ? {
+                ...styles.sheet,
+                maxHeight: Platform.OS === 'android' ? '100%' : undefined,
+              }
             : styles.container,
           contentStyle,
         ]}
-        stackPresentation={stackPresentation ?? 'push'}
-      >
+        stackPresentation={stackPresentation ?? 'push'}>
         {children}
       </DebugContainer>
       {/**
@@ -74,7 +77,13 @@ function ScreenStackItem({
        * See https://github.com/software-mansion/react-native-screens/pull/1825
        * for detailed explanation.
        */}
-      <ScreenStackHeaderConfig {...headerConfig} />
+      <ScreenStackHeaderConfig
+        {...headerConfig}
+        hidden={
+          headerConfig?.hidden ||
+          (stackPresentation === 'formSheet' && Platform.OS === 'android')
+        }
+      />
     </>
   );
 
@@ -86,17 +95,15 @@ function ScreenStackItem({
       activityState={activityState}
       stackPresentation={stackPresentation}
       hasLargeHeader={headerConfig?.largeTitle ?? false}
-      {...rest}
-    >
+      {...rest}>
       {isHeaderInModal ? (
         <ScreenStack style={styles.container}>
           <Screen
             enabled
             isNativeStack
             activityState={activityState}
             hasLargeHeader={headerConfig?.largeTitle ?? false}
-            style={StyleSheet.absoluteFill}
-          >
+            style={StyleSheet.absoluteFill}>
             {content}
           </Screen>
         </ScreenStack>
@@ -113,7 +120,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  absolute: {
+  sheet: {
     position: 'absolute',
     top: 0,
     start: 0,