I built this app in expo and it works well in expo go but when I run the code in development build i get white space above the bottom notch.

const Stack = createNativeStackNavigator();

const Root = () => {
  const isDarkMode = useSelector((state: RootState) => state.theme.isDarkMode);

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: isDarkMode ? colors.black : colors.white,
      }}
    >
      <NavigationContainer
        theme={
          isDarkMode
            ? DarkTheme
            : {
                ...DefaultTheme,
                colors: { ...DefaultTheme.colors, background: "white" },
              }
        }
      >
        <StatusBar
          style={isDarkMode ? "light" : "dark"}
          backgroundColor={isDarkMode ? "black" : "white"}
        />
        <Stack.Navigator
          screenOptions={{
            navigationBarColor: isDarkMode ? colors.black : colors.white,
            headerShown: false,
          }}
        >
          <Stack.Screen name="x" component={X} />
        </Stack.Navigator>
      </NavigationContainer>
    </View>
  );
};

function X() {
  return <View style={{ flex: 1, backgroundColor: "red" }} />;
}

The first image has some space above the bottom notch that is equal to the bottom notch and I want to remove it and make it look like the second image.