How do I get the background image to be behind status bar instead of under on iPhone in React Native?

Question

I want to make the background image take up the entire screen including under the status bar. I am able to make the status bar items (clock, battery, etc.) light color, but the background picture always renders below the status bar rather than behind it.

To easily show the issue, I added here a purple background for the status bar area which again shows under the status bar.

screenshot of current display

Here's the code I've tried. I've tried both SafeAreaView and StatusBar.

import React from "react";
import {
  View,
  Text,
  ImageBackground,
  StyleSheet,
  Dimensions,
  StatusBar,
} from "react-native";

import beachImage from "@/assets/meditation-images/beach.webp";

import GeneralStatusBarColor from "@/components/GeneralStatusBarColor";

import { SafeAreaView } from "react-native-safe-area-context";

const { width, height } = Dimensions.get("window");

const App = () => {
  return (
    <View style={styles.container}>
      <SafeAreaView
        edges={["right", "bottom", "left"]}
        className=" flex-1 items-center justify-center"
      >
       <StatusBar backgroundColor={"transparent"} translucent={true}  />

        <GeneralStatusBarColor
          backgroundColor="#772ea2"
          barStyle="light-content"
        />

        <ImageBackground source={beachImage} style={styles.bgImage}>
          <Text style={styles.text}>Hello World</Text>
        </ImageBackground>
      </SafeAreaView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  bgImage: {
    width: width,
    height: height,
    resizeMode: "cover",
    justifyContent: "center",
  },
  text: {
    color: "white",
    fontSize: 30,
    fontWeight: "bold",
    textAlign: "center",
  },
});

export default App;