Status-bar / SafeArea issue with Expo React Native

Question

I was using SafeAreaView for my screens and it behaved normally:

• Safe areas' background color is the same as the rest of my screen

• The content is simply padded within the safe area insets, just like it is supposed to be.

Then I added expo-router for my navigation:

• At first, it was fine

• But then when I started playing with headers -> 'headerShown: true/false', and now ever since:

  • SafeAreaView started adding additional layer of insets (double padding) on top of the safe areas

    safeareaview with additional (double) padding

• Then I removed SafeAreaView and now it is automatically within the safe area insets

  • I am assuming safe areas are integrated in expo-router

• BUT, I cannot customize the safe areas now

  • they are always white and I cannot get rid of them or change the color of the background to merge well with my content (rest of my screen)

  • I am using expo-status-bar but it does help to style it anyhow, just toggle if status bar info is hidden or not

  • safeareaview removed, status bar persists

The problem is both on IOS and Android. I want to underline this fact, it is both on IOS and Android.

PLEASE HELP, been struggling for a while now

Answer 1

Old post, but commenting my solution was same as above, set my _layout.js to this below:

import { StyleSheet } from "react-native";
import { Stack } from "expo-router";
import { SafeAreaProvider } from "react-native-safe-area-context";

export default function RootLayout() {
  return (
    <SafeAreaProvider style={styles.container}>
      <Stack screenOptions={{ headerShown: false }}>
        <Stack.Screen name="index" />
      </Stack>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#171717",
  },
});

Answer 2

I had the same issue here. I solved it by setting the header as null in the screenOptions of my root layout file (_layout) instead of setting headerShown as false.

Before, it was like this: <Stack screenOptions={{ headerShown: false }} /> and had double padding. Now, it is like this: <Stack screenOptions={{ header: () => null }} /> and the additional padding is gone.

My root layout file

import { Stack } from "expo-router";
import { StyleSheet } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

export default function RootLayout() {
    return (
        <SafeAreaView style={styles.container}>
            <Stack screenOptions={{ header: () => null }} />
        </SafeAreaView>

    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    }
})

My root index file

import { Redirect } from 'expo-router';

export default function Page() {
    return <Redirect href={"/(drawer)/home"} />;
}