CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-bottom-tab
Solid_Metal
Solid_Metal

Reputation: 143

How to hide TabNavigator dynamically on React Native

So i have an app with react native navigator, what I plan for my app is to show a Tutorial when the user first launches the app, I use react-copilot for it, it works really great, but the problem is, React copilot takes time to initiate, and it launches BEFORE the react-navigator.

The problem is that the user can click the navigator thus breaking the tutorial or even crashing the system because the tutorial did not initiate properly.

I plan to make the navigator to be disabled dynamically when the tutorial not yet started. Here's the snippet of the code from the navigationOptions on the appNavigation

TabMenu.navigationOptions = ({ navigation, screenProps }) => {
  const childOptions = getActiveChildNavigationOptions(navigation, screenProps);
  return {
    title: childOptions.title,
    tabBarVisible: childOptions.tabBarVisible,
    header: null
  };
};

and here's the static value on the component

static navigationOptions = {
    tabBarVisible: false
    }

It works, but the problem is when the tutorial ends and I set the static value to true, the tabBar doesn't appear. Is there any way around this?

Thank you in advance

EDIT : i need to clarify that what i need is to make the tabbar appear and dissapear within the same page after certain activity (in this case tutorial) finished without the need to reload/navigate to the same page

Upvotes: 3

Views: 2004

Answers (2)

Ashwin Mothilal
Ashwin Mothilal

Reputation: 2532

It's like Gabriel answer 

static navigationOptions = ({ navigation, screenProps }) => {
    const { tabBarVisible = true } = navigation.state.params
      ? navigation.state.params
      : {};
  return {
    tabBarVisible: tabBarVisible
  };
};

Place the navigation options inside any Tab Item and update the tabBarVisible property like this.

this.props.navigation.setParams({
   tabBarVisible: false
});

Upvotes: 1

Gabcvit
Gabcvit

Reputation: 1488

I would try putting all the tutorial from react-copilot into a different page which is not inside the bottom navigation bar or maybe even in a Modal (which by default cover the whole application). After the react-copilot instructions are done you are free to navigate to the bottom navigation bar or dismiss the Modal.

NEW SUGGESTION AFTER COMMENT:

I think you could change some values in the navigationOptions by doing the following:

static navigationOptions = ({ navigation }) => {
        return {
            headerTitle: navigation.getParam('title', ''),
        }
    };

and then in a function inside the component calling the following:

this.props.navigation.setParams({ "title": 'brand new name') })

This works for me on an app where I had to change the header title of a page after a button was clicked. But I'm not sure if that would work with the attribute tabBarVisible. Would you mind giving it a try?

Upvotes: 0

Related Questions