react-native-router-flux: How to create tabBarComponent that not push up the scene?

Question

How to create tabBarComponent that not push the scene up ?

My goal, in the end, is to create tabBarComponent with a rounded radius, but I get in the rounded area white color background, and I need to see the scene view

<Scene drawer={true} key="main" drawerWidth={Dimensions.get('window').width * 0.85} drawerBackgroundColor="transparent" drawerPosition={drawerPosition} contentComponent={Menu} hideNavBar > <Tabs key="tabBar" tabBarComponent={BottomNavigation}> <Scene key={MAIN} component={Main} title="Take & Go" hideNavBar /> </Tabs> </Scene>

import React, { useState } from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import _ from 'lodash';

const Main = ({ }) => {
    return (
        <View style={{backgroundColor:'yellow', flex:1}}>

        </View>
    );
};
const styles = StyleSheet.create({

});

export default Main;



import React, { useState } from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import _ from 'lodash';


const BottomNavigation = ({ navigation }) => {

    return (
        <View style={[styles.bottomNavigationContainer]}>
        </View>
    );
};
const styles = StyleSheet.create({
    bottomNavigationContainer: {
        height: 79,
        backgroundColor: 'green',
        flexDirection: 'row',
        justifyContent: 'space-around',
        paddingTop: 12,
        borderRadius: 20,
    }
});

export default BottomNavigation;

Answer 1

Try using absolute positioning for your tabbr component

const styles = StyleSheet.create({
  bottomNavigationContainer: {
    height: 79,
    backgroundColor: 'green',
    flexDirection: 'row',
    justifyContent: 'space-around',
    paddingTop: 12,
    borderRadius: 20,
    // add this
    position: 'absolute',
    width: Dimensions.get('window').width,
    bottom: 0,
  }
});

Then add some adding bottom padding to your scenes.

mainContainer : {
  paddingBottom : 79, // tabbar height
}