title: React Native: How can I use Top & Bottom Tabbar in main screen
body: <p>I'm learning to react native and I want to implement top and bottom tabbar on the main screen. I've implemented it but my screen is divided in half of the height. Top tabbar will only show on the home screen.
  What I've tried, mentioned below: </p>
  
  <p>// Home.js</p>
  
  <pre><code>import React, { PropTypes, Component } from 'react';
  import { BottomNavigation, Text } from 'react-native-paper';
  
  import Previousmatches from './Tabbarfiles/Previousmatches';
  import Upcomingmatches from './Tabbarfiles/Upcomingmatches';
  import Yourscore from './Tabbarfiles/Yourscore';
  import { StyleSheet, Platform, StatusBar, View,Dimensions } from 'react-native';
  
  import { Container, Header, Left, Body, Right, Button, Icon,
  Tab, Tabs, ScrollableTab , Title , Footer, TabHeading, FooterTab, Content} from 'native-base';
  
  import { TabViewAnimated, TabViewPage, TabView} from 'react-native-tab-view';
  
  export default class Home extends Component {
  
  state = {
  index: 0,
  routes: [
    { key: 'music', title: 'Home', icon: 'queue-music' },
    { key: 'albums', title: 'Points Table', icon: 'album' },
    { key: 'recents', title: 'Create Scorecard', icon: 'history' },
  ],
  };
  
  _handleIndexChange = index =&gt; this.setState({ index });
  
   _renderScene = BottomNavigation.SceneMap({
  music: Previousmatches,
  albums: Upcomingmatches,
  recents: Yourscore,
  });
  
  render() {
  return (
  &lt;Container style={styles.container}&gt;
      &lt;Header hasTabs style={styles.header}&gt;
      &lt;Left&gt;
        &lt;Button transparent onPress={() =&gt; this.props.navigation.navigate("DrawerOpen")}&gt;
  
          &lt;Icon name='menu' /&gt;
          &lt;/Button&gt;
       &lt;/Left&gt;
         &lt;Body&gt;
          &lt;Title&gt;PALMS&lt;/Title&gt;
        &lt;/Body&gt;
         &lt;Right /&gt;
  &lt;/Header&gt; 
  
      &lt;Tabs locked tabContainerStyle={{height: 45}}&gt;
      &lt;Tab heading={ &lt;TabHeading&gt;&lt;Text style={styles.tabTextStyle}&gt;PREVIOUS MATCHES&lt;/Text&gt;&lt;/TabHeading&gt;}&gt;
  
          &lt;Previousmatches /&gt;
        &lt;/Tab&gt;
        &lt;Tab heading={ &lt;TabHeading&gt;&lt;Text style={styles.tabTextStyle}&gt;UPCOMING MATCHES&lt;/Text&gt;&lt;/TabHeading&gt;}&gt;
  
          &lt;Upcomingmatches /&gt;
        &lt;/Tab&gt;
  
      &lt;Tab heading={ &lt;TabHeading&gt;&lt;Text style={styles.tabTextStyle}&gt;YOUR SCORE&lt;/Text&gt;&lt;/TabHeading&gt;}&gt;
  
      &lt;Yourscore /&gt;
    &lt;/Tab&gt;
  &lt;/Tabs&gt; 
  
  
  &lt;BottomNavigation style={{height: '100%'}} navigationState={this.state} onIndexChange={this._handleIndexChange}
      renderScene={this._renderScene} /&gt; 
  
  &lt;/Container&gt;
  );
  }
  
  };
  
   const styles = StyleSheet.create({
  textStyle : {
    fontSize: 9
  },
  container: {
    flex: 1,
    height: '100%',
    ...Platform.select({
        android: {
           // marginTop: StatusBar.currentHeight,
  
        }
    })
   },
    header:{
  ...Platform.select({
    android: {
      height: 40
    }
    }),
    backgroundColor: 'rgba(81, 133, 237, 1.0)'
  
  },
  tabBarStyle : {
  height: 50
   },
   tabTextStyle : {
  fontSize: 10,
  alignContent: 'center',
  color:'white'
  // justifyContent: 'center'
  
  },
  })
  </code></pre>
  
  <p>What I'm doing wrong? How can achieve this scenario?
  Thanks in advance.</p>
  
  <p><a href="https://i.stack.imgur.com/GaMIz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GaMIz.png" alt="How my screen is looking:"></a></p>