View does not extend beyond SafeAreaView in app/index.tsx.

[Denis Ardyshev]

Which package manager are you using? (Yarn is recommended)

yarn

Summary

"expo": "~49.0.5",
"expo-router": "2.0.0",

mac os simulator
iphone 13 ios 15.0

Minimal reproducible example

import { StatusBar } from 'expo-status-bar';
import LoginScreen from './login';
import { View } from 'react-native';

export default function EntryPoint() {
    return (
        <View style={{ backgroundColor: 'green', flex: 1 }}>
            <StatusBar hidden />
            <LoginScreen />
        </View>
    );
}

The green color is only present within the SafeAreaView.
How can I change the background color outside the SafeAreaView?

Thanks

[Oren Nurkeldi]

@addnsk can you send an image or video?

[Roman Alifanov]

Any updates on this? It's easy to reproduce this.

[Roman Alifanov]

[Roman Alifanov]

Here's a way to make it fill the screen, but is that actually expected?

<View style={[StyleSheet.absoluteFill]}>

[Mark Lawlor]

This is expected. Expo Router renders a default SafeAreaView to ensure the navigators render correctly. You can either override it with your own or modify your view styles to render outside the bounds.

[apetta]

For anyone else dealing with this, you can get the root view to fill the screen by using useSafeAreaInsets from react-native-safe-area-context

Something like:

  const insets = useSafeAreaInsets();
  return (
    <View
      style={{
        marginBottom: -insets.bottom,
        marginTop: -insets.top,
      }}
    />
  );

[Madhav Gharmalkar]

@marklawlor you suggested that we could override it with our own, how would we do that?