-2

I am trying To implement dynamic tab bar in react native. Is it possible to implement dynamic tab bar in react native. If it possible ? please give me instruction to implement it.And All of the tab option come from API.

Sabuj Sarker
  • 39
  • 8
  • 1
    You need to show some effort of what you've tried. Have a look at https://stackoverflow.com/help/how-to-ask. Once you have tried something you can ask more specific questions. – Morne Dec 08 '19 at 07:06
  • this not how you ask a question. You should work on your code and put what have you done so far, here. Read the Help Center topics to learn more about what questions you can ask and what type of questions you have to avoid. [Help Center](https://stackoverflow.com/help), [What types of questions should I avoid asking?](https://stackoverflow.com/help/dont-ask), [What topics can I ask about here?](https://stackoverflow.com/help/on-topic). Community will definitely be glad to help you for right questions. – Armin Taghavizad Dec 08 '19 at 07:43

1 Answers1

1

You can construct tabs dynamically. There are many options. I would advice using redux in combination with react-navigation. But keep in mind that they cannot be 100% dynamic. You have to have predefined screens or stacks. In code it will look like this:

// Let us assume that you fetched the data from your API and mapped them into this kind of options
let options = {
  Home: {
    screen: HomeStack,
  },
};

let authOptions = {
  Auth: {
    screen: AuthStack,
  },
};

let DynamicTabs = ({routes, tabOptions=defaultTabOptions}) => {
  return createBottomTabNavigator(routes, tabOptions);
};

let ConstructRoutes = ({userLoggedIn}) => {
  if (userLoggedIn) {
    return <DynamicTabs routes={options}  />;
  }
  return <DynamicTabs routes={authOptions} />;
};
export default connect(({user})=>({userLoggedIn:!!user.token}))(ConstructRoutes)

If this is not enough for you take a look at this answer.

OriHero
  • 1,168
  • 1
  • 10
  • 24