Bottom tab bar navigation covering and hiding background image. Image gets cut by the bar – React native

The app is developed with react-native and expo.

I have this simple layout and structure:
A navigator js file with bottom-tab-bar navigation, that directs to pages, and is imported to App.js

The problem is that the tab navigator is covering the background image,
like this:
Image is cut at the bottom

The full image is this:
Full Image

And I want it to stick to the bottom, but not "behind" the bottom navigation bar, but just on top of it,
so you could see the bottom of the image.

I tried shifting the image up a bit, to be above the bar, with "bottom: 50", or "marginBottom: 50" for example, but it gets cut!
Like this:

Image is cut

I tried many things,
changing position, height, width, flex,
putting the background image component in a container and chinging both styles and positioning,
playing with some options of the tab bar navigator,
but nothing worked.

Here are the codes:

App.js:

import 'react-native-gesture-handler';
import * as React from 'react';
import { StatusBar } from 'expo-status-bar';
import MainContainer_Test from './screens/MainContainer_Test';

function App() {

  return( 
    <MainContainer_Test/>
  )
}
export default App;

MainContainer_Test.js:

import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from "@react-navigation/native";

const Tab = createBottomTabNavigator();

import Settings from './Settings1';
import TestPage1 from './TestPage1';

export default function MainContainer_Test() {
  return (
    <NavigationContainer>
        <Tab.Navigator>
        <Tab.Screen name="Settings" component={Settings} />
        <Tab.Screen name="Test Page" component={TestPage1} />
        </Tab.Navigator>
    </NavigationContainer>
  );
}

Test_Page.js:

import * as React from 'react';
import { View, Text, Button, TouchableOpacity, ImageBackground, StyleSheet, } from 'react-native';


export default function TestPage1() {

    return (
        <View style={styles.body}>
            <ImageBackground
            source={{uri: 'imageuri/image.png'}}
            style={styles.IMG}>
                <View>
                    <Text>
                        Hey
                    </Text>
                </View>
            </ImageBackground>
        </View>
    );

};

const styles = StyleSheet.create({

    body: {
        position: 'absolute',
        height: '100%',
        width: '100%',
    },

    IMG: {
        height: '100%',
        width: '100%',
        bottom: 100,

    },

}) 

Looked for a solution and couldn’t find one.
Thanks.