This very basic app with a single stack navigator doesn't behave as expected for web. On iOS/Android the header stays in place and the screen scrolls under the header. For web the header doesn't stay fixed on top. See this snack https://snack.expo.io/@tositsa/nested-stacks-fixed-header-issue-2
I think this might be a bug in react-native-navigation or react-native-web, but I'd love to see if there is a workaround somehow.
I ran into a similar problem when trying to render a custom header component with React Navigation 5 on Expo React Native for Web. I was able to resolve the problem by setting the positioning to 'fixed' just for the web like this. This should work for using custom header components, but I'm not sure if you could apply the same solution for the default header component.
In the stack/screen configuration
// ...
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
header: () => <MyCustomHeader />
}}
/>
In the Custom Header Component to be rendered by RN5
// ...
const MyCustomHeader = ({ title }) => {
return (
<View style={styles.headerContainer}>
<Text>{title}</Text>
</View>
);
}
const styles = {
headerContainer: {
...Platform.select({
web: {
position: "fixed"
}
}),
height: 60,
width: '100%',
}
}
Found a better solution in the end (the way RNN designed it):
cardStyle: { flex: 1 } in screenOptions
does the trick as well.