CODEWITHSUNDEEP
react-nativereact-navigation
AlbertMunichMar
AlbertMunichMar

Reputation: 1866

Hide tabs in React Native (createBottomTabNavigator)

I am following the documentation of createBottomTabNavigator in React Native, in order to hide the bottom tabs. I have to add the navigationOptions and pass tabBarVisible: false.

Not sure what I am missing:

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import AuthScreen from './screens/AuthScreen'
import WelcomeScreen from './screens/WelcomeScreen'
import MapScreen from './screens/MapScreen'
import DeckScreen from './screens/DeckScreen'
import SettingsScreen from './screens/SettingsScreen'
import ReviewScreen from './screens/ReviewScreen'
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation'

import { Provider } from 'react-redux'
import store from './store'

const TabNavigator = createBottomTabNavigator(
  {
    Welcome: WelcomeScreen,
    Auth: AuthScreen,
    Main: {
      screen: createBottomTabNavigator({
        map: MapScreen,
        deck: DeckScreen,
        review: {
          screen: createStackNavigator({
            review: ReviewScreen,
            settings: SettingsScreen
          })
        }
      })
    }
  }, {
    navigationOptions: {
      tabBarVisible: false,
      lazy: true
    }
  }
)

const AppContainer = createAppContainer(TabNavigator);

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppContainer />
      </Provider>
    )
  }
}

Upvotes: 1

Views: 3299

Answers (1)

Danny Buonocore
Danny Buonocore

Reputation: 3777

Place tabBarVisible in defaultNavigationOptions, not navigationOptions:

const TabNavigator = createBottomTabNavigator(
  {
    Welcome: WelcomeScreen,
    Auth: AuthScreen,
    Main: {
      screen: createBottomTabNavigator({
        map: MapScreen,
        deck: DeckScreen,
        review: {
          screen: createStackNavigator({
            review: ReviewScreen,
            settings: SettingsScreen
          })
        }
      })
    }
  }, {
    defaultNavigationOptions: {
      tabBarVisible: false
    },
    navigationOptions: {
      lazy: true
    }
  }
)

Upvotes: 1

Related Questions