How to fix the Status bar area in React Native? I am using expo and just upgraded from SDK 48 to 49

Question

I just came back to finish a React-Native project I started a little bit ago using Expo (SDK 48). After I upgraded to SDK 49, the status bar area and bottom of the view have become solid white. Before the upgrade, they matched the background color (like I want it to). The linked image shows the areas I'm referring to. Screenshot of first page

I have windows and am using WSL and VS Code and have been using Expo Go to test the app on my iPhone. The current Expo Go app doesn't support SDK 48 anymore, so I upgraded to SDK 49 (so I can still use expo publish until they sunset it).

I have spent a lot of time going over the React Native documentation and I don't know what wrong with it. Do I have a code problem or does this seem more like an Expo go problem?

The status bar area wasn't an issue before the SDK upgrade. I tried the backgroundColor property under status bar, but that only works for android. I have changed the translucent property to true, but it had no effect.

I would like the solid white areas to match the blue background color.

Thanks.

The code for the first page

import { StyleSheet, Text, View, SafeAreaView, StatusBar, Platform } from "react-native";
import { Link } from "expo-router";

export default function Page() {
  return (
    <SafeAreaView style={styles.container}>
      <View
    style={{
      height: Platform.OS === 'ios' ? 20 : StatusBar.currentHeight,
    }}>
    <StatusBar
      barStyle="light-content"
      hidden={false}
          translucent={false}
    />
       </View>
      <View style={styles.main}>
        <Text style={styles.title}>Transit Sim</Text>
        <Text style={styles.subtitle}>Simulate your ticket</Text>
        
        <View style={styles.linkView}>
          <Link href="/home" style={styles.link}>Start</Link>
        </View>        
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    backgroundColor: "#244A9F",
  },
  main: {
    flex: 1,
    justifyContent: "center",
    maxWidth: 960,
    marginHorizontal: "auto",
  },
  title: {
    fontSize: 64,
    fontWeight: "bold",
    color: "white",
  },
  subtitle: {
    fontSize: 36,
    color: "#38434D",
    color: "white",
  },
  linkView: {
    height: "auto",
    width: 80,
    marginTop: 15,
    borderWidth: 2,
    borderRadius: 10,
    borderColor: "black",
    paddingTop: 2,
    paddingLeft: 5,
    paddingRight: 5,
    paddingBottom: 2,
    backgroundColor: "#fff",
    flex: 0,
    alignItems: "center",
  },
  link: {
    fontSize: 25,
  }
});

** Edit

Here is a link to a snack for the code above. The ios simulator in the snack has the status bar shown like I'd expect it to. Seems like this is an expo go or configuration issue on my end? https://snack.expo.dev/@derek4987/first-page?platform=ios

Answer 1

I only was able to hide it using hidden property.

Answer 2

Try adding a wrapping <View> around the <SafeAreaView>, and give the background color to that.

Answer 3

import {useIsFocused} from '@react-navigation/native';

  const insets = useSafeAreaInsets();

 <View
        style={{
                // Paddings to handle safe area
                paddingTop: insets.top,
                paddingBottom: insets.bottom,
                paddingLeft: insets.left,
                paddingRight: insets.right,
              },
        ]}
      />