React Native - Making background image avoid keyboard

I have a "fullscreen" background image that is used for a page:

container = {
    flex: 1,
    width: null,
    height: null
}

<View ...>
    ...
    <Image ... styles={container}>
        ...
        <TextInput ... />
        ...
    </Image>
</View>

However, as you may notice, tapping on the text input will open up the keyboard and the height of view changes. Since the image is set to cover, it also adjusts as the dimension of the view changes. I want the height of the parent view and the <Image> to not be affected by the keyboard, and only the content of the <Image> should be pushed up by the keyboard.

I'm aware there is a <KeyboardAvoidingView> available but I am not sure how to use it or does it even handle this situation.

Any ideas would be great. Thanks.