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

You can change the tabBarVisible dynamically using params. I have done it. — Ashwin Mothilal, Apr 15 '20 at 06:26
@AshwinMothilal do you have example of it ?, please post it as answer, — Solid_Metal, Apr 15 '20 at 07:43

score 1 · Answer 1 · answered Apr 16 '20 at 14:00

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

Gabcvit · Accepted Answer · 2020-04-10T08:43:41.820

0

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?

edited Apr 10 '20 at 08:43

answered Apr 10 '20 at 08:08

Gabcvit

1,468
1
15
32

1

thanks for the answer !, i actually also already try using modal, the app (which i continue working on) using react native modalbox : https://www.npmjs.com/package/react-native-modalbox, and i already try to put it into render function as to intent it to launch immediately, and still the modal will appear after the tabbar, to be completely honest your other page solution is also one i come up for a while, but its wont be good for UX sense – Solid_Metal Apr 10 '20 at 08:22
I just updated my question with a few snippets that you could adapt to your code. Could you give them a try by replacing headerTitle with tabBarVisible? – Gabcvit Apr 10 '20 at 08:44
sorry for late response, just trying it out, unfortunately it didnt work :( – Solid_Metal Apr 10 '20 at 19:47
1

sorry just want to say that your way indeed actually work !!, the problem with how the react navigation itself on my app constructed, so i need to do a bit modified version of it, thanks ! – Solid_Metal Jul 08 '20 at 02:49
Hi @Solid_Metal, glad to know the solution worked! :) Thanks for your feedback! – Gabcvit Jul 09 '20 at 05:13

How to hide TabNavigator dynamically on React Native

2 Answers2

Linked