title: How to show component above bottom navigation in react native?
body: <p>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?</p>
  
  <p><a href="https://i.stack.imgur.com/Iq8h8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Iq8h8.png" alt="enter image description here"></a> </p>
  
  <p>Below is my Home.js code.</p>
  
  <pre><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 }) =&gt; (
                  &lt;Icon
                      name="gamepad-variant"
                      size={17}
                      color={tintColor} /&gt;
              )
          }
      },
      Leave: {
          screen: Leave,
          navigationOptions: {
              tabBarLabel: "Leave",
              tabBarIcon: ({ tintColor }) =&gt; (
                  &lt;Icon
                      name="movie"
                      size={17}
                      color={tintColor} /&gt;
              )
          }
      },
      Hour_Rec: {
          screen: Hour_Rec,
          navigationOptions: {
              tabBarLabel: "HR",
              tabBarIcon: ({ tintColor }) =&gt; (
                  &lt;Icon
                      name="music-note"
                      size={17}
                      color={tintColor} /&gt;
              )
          }
      },
      Rest_Holiday: {
          screen: Rest_Holiday,
          navigationOptions: {
              tabBarLabel: "RH",
              tabBarIcon: ({ tintColor }) =&gt; (
                  &lt;Icon
                      name="gamepad-variant"
                      size={17}
                      color={tintColor} /&gt;
              )
          }
      },
      Report: {
          screen: Report,
          navigationOptions: {
              tabBarLabel: "Report",
              tabBarIcon: ({ tintColor }) =&gt; (
                  &lt;Icon
                      name="music-note"
                      size={17}
                      color={tintColor} /&gt;
              )
          }
      }
  });
  
  //Issue: the tab navigator needs to be wrapped inside a stack navigator
  export default createStackNavigator({ Home }, { headerMode: "none" });
  </code></pre>
  
  <p>below is my Dashboard.js code</p>
  
  <pre><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 (
        &lt;View style={styles.container}&gt;
              &lt;View style={[styles.box, styles.box1]}&gt;
                &lt;Text style={{ fontSize: 40 }}&gt;Active Leave&lt;/Text&gt;
              &lt;/View&gt;
              &lt;View style={[styles.box, styles.box2]}&gt;
                &lt;Text style={{ fontSize: 40 }}&gt;Upcoming Leave&lt;/Text&gt;
              &lt;/View&gt;
              &lt;View style={[styles.box, styles.box3]}&gt;
                &lt;Text style={{ fontSize: 40 }}&gt;Absent status&lt;/Text&gt;
              &lt;/View&gt;
          &lt;/View&gt;
      );
    }
  }
  
  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;
  </code></pre>