BUG: Full screen content on React Navigation for web

[elie222]

I'd like to get the View fill the screen when using React Navigation on web.

Is there an easy way to do this? I can change the CSS to height: 100% for a certain inner component, but I haven't found a way to easily access it through the react-navigation API.

Reproduction:

expo init
# select TS blank
yarn web
# add View style backgroundColor: "red", 

Sample code:

import React from "react";
import { View, Text } from "react-native";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";

class HomeScreen extends React.Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "red",
        }}
      >
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  }
});

export default createAppContainer(AppNavigator);

I want to do something like this:

In practice I get something like this:

[nickjanssen]

As a workaround, you can use react-navigation@3.9. Note that you'll have to change imports react-navigation-stack and react-navigation-tabs to import from the main package react-navigation. Demo: https://snack.expo.io/@laska/react-navigation-web-with-3_9

[elie222]

That did it, thanks! Definitely a bug in the latest version of the package.

[zachschultz]

Any updates on this bug? I've run into this issue as well

[mitschabaude]

I was able to solve this in version 1.10.3 by passing a cardStyle to the StackNavigator. In the example above, use

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  }
}, {
  cardStyle: { flex: 1 }
});

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[nandorojo]

I was able to solve this in version 1.10.3 by passing a cardStyle to the StackNavigator. In the example above, use

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  }
}, {
  cardStyle: { flex: 1 }
});

For me, it looks like this with stack v2.

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  }
 }, {
  defaultNavigationOptions: { 
    cardStyle: { flex: 1 } 
  }
});

[KEMBL]

for those who came here with the same problem in react-navigation v5. It is not possible to pass params to createStackNavigator anymore, what you can do is to wrap NavigationContainer into View like that

`<View style={{height: Dimensions.get('window').height}}>

... ` and screen height will fit the window.

[isaachkwu]

for those who came here with the same problem in react-navigation v5. It is not possible to pass params to createStackNavigator anymore, what you can do is to wrap NavigationContainer into View like that

<View style={{height: Dimensions.get('window').height}}> <NavigationContainer> ... and screen height will fit the window.

Nice workaround! I used the dimensions lib for the height value, but the height didn't change if my browser change its size. I used 100vh instead and it works perfectly.

`

.......` and the styles are... `const styles = StyleSheet.create({ navContainer: { ...Platform.select({ native: { flex: 1, }, web: { height: '100vh', }, }), },` Hope this could help some of you guys!

[Adushar]

Just remove the outer <View> or <SafeAreaView> of the <NavigationContainer>. It works for me

[github-actions[bot]]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.