title: React Native: How to hide bottom bar before login and show it once the user is logged in?
body: <p>I want to show the bottom bar after the user is logged in in the app. Currently it is showing when app starts.</p>
  
  <p>Here is my code for bottom bar:</p>
  
  <pre><code>import { createAppContainer } from 'react-navigation';
  import { createStackNavigator } from 'react-navigation-stack';
  import { createBottomTabNavigator } from 'react-navigation-tabs';
  import React from 'react';
  
  const TabNavigator = createBottomTabNavigator(
    {
      HOME: { screen: HomeStack },
      SEARCH: { screen: SearchStack },
      ADDMORE: { screen: AddMoreStack },
      USER: { screen: UserStack },
      ME: { screen: ProfileStack },
    },
    {
      defaultNavigationOptions: ({ navigation }) =&gt; ({
        tabBarIcon: ({ focused, tintColor }) =&gt; {
          const { routeName } = navigation.state;
          let iconName;
          if (routeName === 'HOME') {
            iconName = require('./Images/tab_home.png');
            iconNameFocused = require('./Images/tab_home_selected.png');
          } else if (routeName === 'SEARCH') {
            iconName = require('./Images/tab_search.png');
            iconNameFocused = require('./Images/tab_search_selected.png');
          } else if (routeName === 'ADDMORE') {
            iconName = require('./Images/tab_add_more.png');
            iconNameFocused = require('./Images/tab_add_more_selected.png');
          } else if (routeName === 'USER') {
            iconName = require('./Images/tab_Users.png');
            iconNameFocused = require('./Images/tab_Users_selected.png');
          } else if (routeName === 'ME') {
            iconName = require('./Images/tab_me.png');
            iconNameFocused = require('./Images/tab_me_selected.png');
          }
          if(focused)
          return ( &lt;Image style={{width: 20, height: 20, tintColor }} source={iconNameFocused} /&gt; );
          else
          return ( &lt;Image style={{width: 20, height: 20, tintColor }} source={iconName} /&gt; );
        },
      }),
      tabBarPosition: 'bottom',
      tabBarOptions: {
        activeTintColor: '#ca375e',
        inactiveTintColor: '#c7c7c7',
      },
      animationEnabled: false,
      swipeEnabled: false,
    }
  );
  
  const App = createAppContainer(TabNavigator);
  
  export default App;
  </code></pre>
  
  <p><strong>How can I hide it in initial pages and show it once the user is logged in?</strong></p>