Missing header while using presentation: 'formSheet' on Android

[Giulio987]

Description

I noticed that the header is missing when using presentation: 'formSheet' on Android. Additionally, if you try the snack below, you'll see that the header on the main stack is pushed down the first time the `formSheet is opened.

Steps to reproduce

1. Create a Screen with the presentation formsheet
2. Open the screen

Snack or a link to a repository

https://snack.expo.dev/@giuliom99/native-stack-example

Screens version

~4.4.0

React Native version

0.76.6

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Paper (Old Architecture)

Build type

None

Device

Android emulator

Device model

No response

Acknowledgements

Yes

[kkafar]

Hello,

I noticed that the header is missing when using presentation: 'formSheet' on Android.

formSheet on Android does not currently support header / nested stack.

you'll see that the header on the main stack is pushed down the first time the `formSheet is opened.

That's interesting. We'll look into this. Thanks for the report.

[kkafar]

Hey, @Giulio987 I do not confirm that the header changes its height. I ran the reproducer & it seems to be working fine

Screen.Recording.2025-02-07.at.20.06.01.mov

If you have capacity to provide me with a recording of this bug happening / work with me on reproducing the issue on latest versions of deps, please ping me. I'll close the ticket till then.

[Giulio987]

Hi @kkafar sorry for the delay. Here is the recording of the simulator inside the Expo Snack, but the same behavior occurs in the default Android simulator:

Registrazione.schermo.2025-02-18.alle.09.34.38.mov

[kkafar]

I'll test this once again, thanks!

[kligarski]

Hi, @Giulio987. I tried the example on the latest version of react-native-screens and I wasn’t able to reproduce the issue both on Paper and Fabric. I confirm that the issue is present when using Snack.

issue_2657.mp4

Example I used:

import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';

type StackParamList = {
  Home: undefined;
  test: undefined;
};

function HomeScreen({ navigation }: NativeStackScreenProps<StackParamList>) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Press me"
        onPress={() => {
          navigation.navigate('test');
        }}
      />
    </View>
  );
}

function FormSheetScreen({ }: NativeStackScreenProps<StackParamList>) {
  return <View><Text>Hello!</Text></View>;
}

const Stack = createNativeStackNavigator();

function RootStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen
        name={'test'}
        component={FormSheetScreen}
        options={{
          presentation: 'formSheet',
          sheetAllowedDetents: [0.9],
        }}
      />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  );
}

Here are dependencies I used:

“react-native-screens”: “4.10.0-beta.1”,
"react-native": "0.78.0-rc.5",
"react-native-reanimated": "^4.0.0-nightly-20250218-e5a0cdf69",
"react-native-safe-area-context": "5.1.0",
"@react-navigation/native”: 7.0.14",
"@react-navigation/native-stack”: ”7.2.0”,

Please try using latest versions of the libraries and if the issue is still present, I'd be grateful if you could provide steps to reproduce the issue.

[ljukas]

All my version are higher than yours @kligarski and I can reproduce this problem in my codebase. Any formSheet will never show header on Android, using custom dev-build, (except react-native which is 0.76.7)

[kligarski]

Hi, @ljukas. Unfortunately, formSheet on Android does not currently support header / nested stack. In my comment, I was referring to the second problem mentioned in the issue description - header changing height after opening formSheet (#2657 (comment)). If this is the issue you’re experiencing, then we’d apprecieate if you could provide reproduction.

[ljukas]

Oh alright, I see. Thanks for the info. I do not know which repo hosts the documentation, but might be good to add that to the "gotcha" for android here: https://reactnavigation.org/docs/native-stack-navigator/