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

Question

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.

score 0 · Answer 1 · answered Feb 22 '23 at 05:47

No need to of position absolute in this conatiner just flex property works for you. if there you can also use 
resizeMode = 'cover'

            <View style={{flex:1}}>
                <ImageBackground
                source={{uri: 'https://w0.peakpx.com/wallpaper/960/845/HD- 
                   wallpaper-nature-landscape-landscape-nature-thumbnail.jpg'}}
                style={{flex:1}}
              resizeMode="cover"
                >
                    <View>
                        <Text>
                            Hey
                        </Text>
                    </View>
                </ImageBackground>
            </View>

I wish it would, but unfortunately this doesn't work... I get the same behavior. — DanielG, Feb 22 '23 at 08:14

score 0 · Answer 2 · edited Mar 03 '23 at 18:39

The method suggested by ravin kumar (with flexes and resizeModes) unfortunately didn't work.

I've found another solution, it's not the best practice I guess, but it's the only one I've found that achieved my goal. It can be found here: Solution

It's basically just giving the tab bar a style with position: 'absolute', which makes it "float" above the background.

In this manner it doesn't cut the background image, and then it's possible to move the background image up to be above the bottom bar, and it works.

[...]
<Tab.Navigator
    initialRouteName={home}
    screenOptions={({route}) => ({
    tabBarActiveTintColor: "white",
    tabBarInactiveTintColor: "gray",
    // Bottom Tabs
    tabBarStyle: [{
        backgroundColor: 'black',
        height: barHeight,
        display: "flex",
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0 
    }]
>
[...]

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

2 Answers2