title: Is it possible to define a global (header + footer) wrapper on react-native using react-navigation and nativebase
body: <p>I am very new to React-Native, React navigation and nativebase. Roughly, I am trying to find a way to set the same header and footer on each screen of my application. The header contains the title + a login icon. The footer contains the navigation. What is the proper way to have a global header and a global footer to the application ? </p>
  
  <p>I have tried defining a wrapper component (MainStructure) and add {this.props.children} in the content  but I get an error on this.props.navigation whenever I click the footer. For this error, I have tried adding navigation props manually to MainStructure it did not work. I have tried adding HOC withNavigation, no result neither.  </p>
  
  <p>I have tried defining a header component and a footer component and adding them everywhere in the component, but that's ugly + it does not work for some reason I don't get. </p>
  
  <p>Finally, I have tried defining header in navigationOptions and defaultNavigationOptions it did not work neither.</p>
  
  <p>this is the App code </p>
  
  <pre><code>const AppNavigator=createSwitchNavigator(
      {
          Home:Home,
          Search: Search,
          Account:Account,
          Login:Login
      },
      {
          initialRouteName:"Home",
      }
  );
  const AppContainer= createAppContainer(AppNavigator);
  
  class App extends Component{
  
  
    render() {
      return (
          &lt;MainStructure&gt;
              &lt;AppContainer/&gt;
          &lt;/MainStructure&gt;
      );
    }
  }
  
  export default App;
  
  AppRegistry.registerComponent('Kioozi', ()=&gt; App);
  </code></pre>
  
  <p>Here is the MainStructure code </p>
  
  <pre><code>class MainStructure extends React.Component {
      constructor(props){
          super(props);
          Text.defaultProps.uppercase=false
      }
      render() {
  
          return (
              &lt;StyleProvider style={getTheme(variables)}&gt;
                  &lt;Container&gt;
                      &lt;Header&gt;
                          &lt;Left/&gt;
                          &lt;Body&gt;
                              &lt;Title&gt;{I18n.t('homepage.title')}&lt;/Title&gt;
                          &lt;/Body&gt;
                          &lt;Right&gt;
                              &lt;Button transparent onPress={()=&gt; this.props.navigation.navigate('Login')}&gt;
                                  &lt;Icon name={'login'} type={"Entypo"}/&gt;
                              &lt;/Button&gt;
                          &lt;/Right&gt;
                      &lt;/Header&gt;
                      &lt;Content padder&gt;
                          {this.props.children}
                      &lt;/Content&gt;
                      &lt;Footer&gt;
                          &lt;FooterTab&gt;
                              &lt;Button badge vertical onPress={()=&gt; this.props.navigation.navigate('Home')}&gt;
                                  &lt;Badge&gt;&lt;Text&gt;2&lt;/Text&gt;&lt;/Badge&gt;
                                  &lt;Icon name={"home"} type={"Entypo"}/&gt;
                                  &lt;Text&gt;{I18n.t('footer.home')}&lt;/Text&gt;
                              &lt;/Button&gt;
                              &lt;Button badge vertical onPress={()=&gt; this.props.navigation.navigate('Search')}&gt;
                                  &lt;Badge&gt;&lt;Text&gt;2&lt;/Text&gt;&lt;/Badge&gt;
                                  &lt;Icon name={"magnify"} type={"MaterialCommunityIcons"}/&gt;
                                  &lt;Text&gt;{I18n.t('footer.search')}&lt;/Text&gt;
                              &lt;/Button&gt;
                              &lt;Button badge vertical onPress={()=&gt; this.props.navigation.navigate('Account')}&gt;
                                  &lt;Badge&gt;&lt;Text&gt;2&lt;/Text&gt;&lt;/Badge&gt;
                                  &lt;Icon name={"account-outline"} type={"MaterialCommunityIcons"}/&gt;
                                  &lt;Text&gt;{I18n.t('footer.myAccount')}&lt;/Text&gt;
                              &lt;/Button&gt;
                          &lt;/FooterTab&gt;
                      &lt;/Footer&gt;
                  &lt;/Container&gt;
              &lt;/StyleProvider&gt;
          );
      }
  }
  
  export default MainStructure;
  
  </code></pre>
  
  <p>I used createSwitchNavigator as I want to use the bottomTab from nativebase and not from react-navigation.
  Expected Result : whenever I press a tab, I get the related screen with the header and footer.</p>