How to show component above bottom navigation in react native?

Question

I am using createBottomTabNavigator in my react native application. Application was running smoothly but my View is hiding behind Bottom Tab Navigator. I want to show all my view above createBottomTabNavigator. How can I show my all screens above bottom tab when tab changed?

Below is my Home.js code.

import Dashboard from './Dashboard';
import Leave from './Leave';
import Hour_Rec from './Hour_Rec';
import Rest_Holiday from './Rest_Holiday';
import Report from './Report';

const Home = createBottomTabNavigator({

    Dashboard: {
        screen: Dashboard,
        navigationOptions: {
            title: "Dashboard",
            tabBarIcon: ({ tintColor }) => (
                <Icon
                    name="gamepad-variant"
                    size={17}
                    color={tintColor} />
            )
        }
    },
    Leave: {
        screen: Leave,
        navigationOptions: {
            tabBarLabel: "Leave",
            tabBarIcon: ({ tintColor }) => (
                <Icon
                    name="movie"
                    size={17}
                    color={tintColor} />
            )
        }
    },
    Hour_Rec: {
        screen: Hour_Rec,
        navigationOptions: {
            tabBarLabel: "HR",
            tabBarIcon: ({ tintColor }) => (
                <Icon
                    name="music-note"
                    size={17}
                    color={tintColor} />
            )
        }
    },
    Rest_Holiday: {
        screen: Rest_Holiday,
        navigationOptions: {
            tabBarLabel: "RH",
            tabBarIcon: ({ tintColor }) => (
                <Icon
                    name="gamepad-variant"
                    size={17}
                    color={tintColor} />
            )
        }
    },
    Report: {
        screen: Report,
        navigationOptions: {
            tabBarLabel: "Report",
            tabBarIcon: ({ tintColor }) => (
                <Icon
                    name="music-note"
                    size={17}
                    color={tintColor} />
            )
        }
    }
});

//Issue: the tab navigator needs to be wrapped inside a stack navigator
export default createStackNavigator({ Home }, { headerMode: "none" });

below is my Dashboard.js code

var { height } = Dimensions.get('window');
var box_count = 3;
var box_height = height / box_count;

class Dashboard extends PureComponent {

  static navigationOptions = {
    title: 'Chat',
    headerStyle: { backgroundColor: 'red' },
    headerTitleStyle: { color: 'green' },
  }

  render() {
    return (
      <View style={styles.container}>
            <View style={[styles.box, styles.box1]}>
              <Text style={{ fontSize: 40 }}>Active Leave</Text>
            </View>
            <View style={[styles.box, styles.box2]}>
              <Text style={{ fontSize: 40 }}>Upcoming Leave</Text>
            </View>
            <View style={[styles.box, styles.box3]}>
              <Text style={{ fontSize: 40 }}>Absent status</Text>
            </View>
        </View>
    );
  }
}

const styles = StyleSheet.create({

  box: {
    height: box_height,
    borderRadius:10,
    alignItems: 'center', 
    justifyContent: "center",
  },
  box1: {
    backgroundColor: '#2196F3'
  },
  box2: {
    backgroundColor: '#8BC34A'
  },
  box3: {
    backgroundColor: '#e3aa1a'
  }
});

export default Dashboard;

Answer 1

@Moin Khan this issue raise because you are using total screen height and divide your button height based on it. Total screen height var { height } = Dimensions.get('window'); also include Bottom Tab Navigator height.Instead of using screen height use flex which helps you to divide your content area into equal parts.

just change your styles like this:

const styles = StyleSheet.create({
  container: {
    height: "100%"
  },
  box: {
    borderRadius: 10,
    alignItems: "center",
    justifyContent: "center"
  },
  box1: {
    flex: 1,
    backgroundColor: "#2196F3"
  },
  box2: {
    flex: 1,
    backgroundColor: "#8BC34A"
  },
  box3: {
    flex: 1,
    backgroundColor: "#e3aa1a"
  }
});

or else if you use custom BottomTabNavigator or able to get default height of BottomTabNavigator just minus that much of height from your box_height.

like if your bottomTabBar height is 30 then var box_height = (height - 30) / box_count;