SafeAreaView with ImageBackground

Question

I'm currently trying out the SafeAreaView to support iPhone X rendering capabilities. Thing is, I'm including an image using the ImageBackground component from react-native.

Is there a way to render the image as the background of the status bar as well?

Current code:

<SafeAreaView style={{flex: 1}}>
  <StyleProvider style={getTheme(variables)}>
    <Container>
      <ImageBackground source={landingpageBg} style={styles.imageContainer}>
        <View
          style={{
            flex: 1,
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: "transparent"
          }}
        >
          <H3 style={styles.text}>Hello World</H3>
          <View style={{ marginTop: 8 }} />
          <Button
            style={styles.buttonColor}
            onPress={() => this.pressButton()}
          >
            <Text>Let's Go!</Text>
          </Button>
        </View>
      </ImageBackground>
    </Container>
  </StyleProvider>
</SafeAreaView>

How it currently looks like

Answer 1

On react native 0.57, I've made it work this way:

<ImageBackground
  source={landingpageBg}
  style={{height: null,
          width: windowSize.width,
          resizeMode: "cover",
          overflow: "hidden",
          flex: 1}}>
  <SafeAreaView style={{opacity: 0}} />
  <View style={{flex: 1}}>
    ...your stuff
  </View>
  <SafeAreaView style={{opacity: 0}} />
</ImageBackground>

The key is that the SafeAreaView can be used as header/footer without wrapping everything in it. I don't know what your Container or StyleProvider classes do, but I expect that the Container could be put instead of the View I made.

Finally, I don't know if this solution will work as React Native is updated. But then I'll work out something else :)