How to hide TabNavigator dynamically on React Native

Question

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

Answer 1

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
});