React Navigation width is not 100% fit to screen on ios simulator

Question

When I tried just to render the HomeScreen component not using Stack.Screen I was able to get 100% width but when I tried to use code bellow, 100% width screen is not working

const HomeScreen = () => {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'red'}}>
            <Text>Home Screen</Text>
        </View>
    );
}

const MainContainer = () => {

    return (
        <NavigationContainer >
            <Stack.Navigator>
                <Stack.Screen
                    name="Home"
                    component={HomeScreen}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );

Answer 1

Can you try with display: flex and remove flex:1

Answer 2

Not only that, the width is zero if you set headerShown: false .

Just remove the outer View of the NavigationContainer . It works for me.

Answer 3

Were you running the remote debugger when you were having this issue? I had the same problem and it resolved when I turned it off.

It seems like it might be a slow load issue and the stylesheets aren't being applied before rendering, so the screen is taking the width of the header text (I may be completely wrong about this though). When I removed the style prop from my View component, saved it, then put it back and saved again it temporarily resolved the issue until I reloaded Expo.