React Native: Show image in full screen in nested components

Question

I have component hierarchy as

<Component1>
  <Component2>
    <Component3>
      <Image
       ....
      >
    </Component3>
  </Component2>
<Component1>

Component1 and Component2 have some height.

Now how do I show the image, nested in 3 components each with some height, in full screen irrespective of the height of its parent components?

If I give image as flex:1, It will just adjust itself in Component3's flexbox whereas I want to show the image in full screen.

Currently my Image style is:

image: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },

and resize mode is set to 'cover'

Its container (Component3) style:

container: {
        alignItems: 'center',
        justifyContent: 'center',
    },