CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-stack
Hannibal
Hannibal

Reputation: 49

How to make screen from tabBarNavigator invisible on TabBar?

I use react-navigation version 3.x. How to make screen from tabBarNavigator invisible on TabBar?

I need to remove main screen from tabBar(it should be invisible) but TabBar must be on main screen.

My screen structure is next:

const AppStackNavigator = createStackNavigator({
    loginFlow: { 
      screen: createStackNavigator({
        intro: { screen: Intro },
        login: { screen: Login },
        registration: { screen: Registration }
      })
    },
    mainFlow: {
      screen: createStackNavigator({

        // settings: { screen: SettingsScreen },
        someTab: { 
          screen: createBottomTabNavigator({
            main: { screen: Home },
            Tab1: { screen: Tab1 },
            Tab2: { screen: Tab2 },
            Tab3: { screen: Tab3 },
            Tab4: { screen: ChatMain }
          })
        }
      })
    }
  });

Upvotes: 1

Views: 101

Answers (2)

Hannibal
Hannibal

Reputation: 49

Actually I just used my own TabBar component. just need to use tabBarComponent properties.

Upvotes: 0

J. Hesters
J. Hesters

Reputation: 14814

Your question is worded weirdly, but I'll give you answers to both of my interpretations:

If you want so remove a screen from your tab bar, simply comment it out:

// main: { screen: Home },

If you want to have the main screen in the same stack as the rest of your tab bar, but not want it to show within the tab bar, you could nest it inside a switchNavigator:

mainFlow: {
  screen: createStackNavigator({
    // settings: { screen: SettingsScreen },
    someSwitch: createSwitchNavigator({
      main: { screen: Home },
      someTab: { 
        screen: createBottomTabNavigator({
          Tab1: { screen: Tab1 },
          Tab2: { screen: Tab2 },
          Tab3: { screen: Tab3 },
          Tab4: { screen: ChatMain }
        })
      }
    })
  })
}

Upvotes: 1

Related Questions