{"action":"created","issue":{"url":"https://api.github.com/repos/react-navigation/react-navigation/issues/3945","repository_url":"https://api.github.com/repos/react-navigation/react-navigation","labels_url":"https://api.github.com/repos/react-navigation/react-navigation/issues/3945/labels{/name}","comments_url":"https://api.github.com/repos/react-navigation/react-navigation/issues/3945/comments","events_url":"https://api.github.com/repos/react-navigation/react-navigation/issues/3945/events","html_url":"https://github.com/react-navigation/react-navigation/issues/3945","id":312860863,"node_id":"MDU6SXNzdWUzMTI4NjA4NjM=","number":3945,"title":"Dynamic tab setup in TabNavigator ","user":{"login":"MSSPL-PiyaleeMaiti","id":20696057,"node_id":"MDQ6VXNlcjIwNjk2MDU3","avatar_url":"https://avatars3.githubusercontent.com/u/20696057?v=4","gravatar_id":"","url":"https://api.github.com/users/MSSPL-PiyaleeMaiti","html_url":"https://github.com/MSSPL-PiyaleeMaiti","followers_url":"https://api.github.com/users/MSSPL-PiyaleeMaiti/followers","following_url":"https://api.github.com/users/MSSPL-PiyaleeMaiti/following{/other_user}","gists_url":"https://api.github.com/users/MSSPL-PiyaleeMaiti/gists{/gist_id}","starred_url":"https://api.github.com/users/MSSPL-PiyaleeMaiti/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MSSPL-PiyaleeMaiti/subscriptions","organizations_url":"https://api.github.com/users/MSSPL-PiyaleeMaiti/orgs","repos_url":"https://api.github.com/users/MSSPL-PiyaleeMaiti/repos","events_url":"https://api.github.com/users/MSSPL-PiyaleeMaiti/events{/privacy}","received_events_url":"https://api.github.com/users/MSSPL-PiyaleeMaiti/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2018-04-10T10:20:16Z","updated_at":"2018-12-12T17:34:29Z","closed_at":"2018-04-27T16:27:15Z","author_association":"NONE","body":"## Dynamic tab screen setup using TabNavigator\r\n\r\n### Current Behavior\r\n\r\n- Tab screen setup static\r\n- Can't change Tab screen setup according to login and not login\r\n\r\n### Expected Behavior\r\n\r\n- can change RouteConfigs according to login status in app\r\n- also can change TabNavigatorConfig accroding to login status in app\r\n\r\n### How to reproduce\r\n\r\n- I need one tab in home page, but after login I need three tab in home page\r\n- Also I want that tab setup inside a stack navigator, and also getting that stack route in between tab navigator.\r\n- I want to dynamic this tab navigator setup according to login status in app\r\n- Example of code is below:\r\n\r\n```\r\nimport React, { Component } from 'react';\r\nimport { Text, View, StyleSheet, Button, Dimensions } from 'react-native';\r\nimport { StackNavigator, TabNavigator} from 'react-navigation';\r\nlet GlobalVariable = { loggedIn : false};\r\nlet routeTab, routeConfig;\r\nif(GlobalVariable.loggedIn) {\r\n  routeTab = {\r\n    Feed: {\r\n      screen: Feed\r\n    },\r\n    Notification: {\r\n      screen: Notification\r\n    },\r\n    Profile: {\r\n      screen: Profile\r\n    }\r\n  };\r\n\r\n  routeConfig = {\r\n    navigationOptions:{\r\n      swipeEnabled: false,\r\n    },\r\n    tabBarPosition:'bottom',\r\n    tabBarOptions: {\r\n      showLabel: false,\r\n      showIcon: true,\r\n    }\r\n  };\r\n\r\n} else {\r\n  routeTab = {\r\n    Feed: {\r\n      screen: Feed\r\n    }\r\n  };\r\n\r\n  routeConfig = {\r\n    navigationOptions:{\r\n      swipeEnabled: false,\r\n      tabBarVisible: false,\r\n    }\r\n  };\r\n}\r\n\r\nexport const TabNavigatorThree = TabNavigator(routeTab, routeConfig);\r\n\r\nclass Home extends Component {\r\n\tstatic router = TabNavigatorThree.router;\r\n\trender() {\r\n    console.log('GlobalVariable', GlobalVariable.loggedIn);\r\n    return (\r\n      <TabNavigatorThree navigation={this.props.navigation} />\r\n    );\r\n\t}\r\n}\r\n\r\nclass Feed extends Component {\r\n   constructor(props) {\r\n    super(props);\r\n  }\r\n\r\n  loginClick = () => {\r\n      GlobalVariable.loggedIn = true;\r\n      this.props.navigation.navigate('Login');\r\n  }\r\n  \r\n  loginOut = () => {\r\n      GlobalVariable.loggedIn = false;\r\n      this.props.navigation.navigate('Home');\r\n  }\r\n\r\n  render() {\r\n    return (\r\n        <View style={{flex:1, paddingTop:20, }}>\r\n          <Button title=\"Log In\" onPress={this.loginClick}/>\r\n          <Button title=\"Log Out\" onPress={this.loginOut}/>\r\n          <View style={{flex:1, backgroundColor:'yellow'}}>\r\n            <Text>Feed Main Page</Text>\r\n            <Button title=\"Details Page\" onPress={() => this.props.navigation.navigate('Details')}/>\r\n            <Button title=\"Chat Page\" onPress={() => this.props.navigation.navigate('Chat')}/>\r\n          </View>\r\n        </View>\r\n    );\r\n  }\r\n}\r\n\r\nclass Notification extends Component {\r\n  render() {\r\n    return (\r\n      <View style={{flex:1, backgroundColor:'orange'}}>\r\n        <Text>Notification Main Page</Text>\r\n      </View>\r\n    );\r\n  }\r\n}\r\n\r\nclass Profile extends Component {\r\n  render() {\r\n    return (\r\n      <View style={{flex:1, backgroundColor:'blue'}}>\r\n        <Text>Profile Main Page</Text>\r\n      </View>\r\n    );\r\n  }\r\n}\r\n\r\nclass Details extends Component {\r\n  render() {\r\n    return (\r\n      <View style={{flex:1, backgroundColor:'purple'}}>\r\n        <Text>Details Main Page</Text>\r\n      </View>\r\n    );\r\n  }\r\n}\r\n\r\nclass Chat extends Component {\r\n  render() {\r\n    return (\r\n      <View style={{flex:1, backgroundColor:'orange'}}>\r\n        <Text>Chat List Main Page</Text>\r\n      </View>\r\n    );\r\n  }\r\n}\r\n\r\nconst App = StackNavigator({\r\n  Home : {\r\n    screen : Home,\r\n  },\r\n  Details : {\r\n    screen : Details\r\n  },\r\n  Chat : {\r\n    screen : Chat\r\n  },\r\n  Login: {\r\n    screen: Login,\r\n  },\r\n});\r\n\r\nexport default App;\r\n```\r\nNow here from feed, notification and profile page, I want to access the details, chat and login page. And also get feed, notification and profile page tab dynamic before and after login.\r\n\r\n### Your Environment\r\n\r\n| software         | version\r\n| ---------------- | -------\r\n| react-navigation | ^1.5.11\r\n| react-native     |  0.55.1\r\n| node             |  v6.14.1\r\n| npm or yarn      |  3.10.10\r\n"},"comment":{"url":"https://api.github.com/repos/react-navigation/react-navigation/issues/comments/446674614","html_url":"https://github.com/react-navigation/react-navigation/issues/3945#issuecomment-446674614","issue_url":"https://api.github.com/repos/react-navigation/react-navigation/issues/3945","id":446674614,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0NjY3NDYxNA==","user":{"login":"linoleum00","id":3660845,"node_id":"MDQ6VXNlcjM2NjA4NDU=","avatar_url":"https://avatars2.githubusercontent.com/u/3660845?v=4","gravatar_id":"","url":"https://api.github.com/users/linoleum00","html_url":"https://github.com/linoleum00","followers_url":"https://api.github.com/users/linoleum00/followers","following_url":"https://api.github.com/users/linoleum00/following{/other_user}","gists_url":"https://api.github.com/users/linoleum00/gists{/gist_id}","starred_url":"https://api.github.com/users/linoleum00/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/linoleum00/subscriptions","organizations_url":"https://api.github.com/users/linoleum00/orgs","repos_url":"https://api.github.com/users/linoleum00/repos","events_url":"https://api.github.com/users/linoleum00/events{/privacy}","received_events_url":"https://api.github.com/users/linoleum00/received_events","type":"User","site_admin":false},"created_at":"2018-12-12T17:34:29Z","updated_at":"2018-12-12T17:34:29Z","author_association":"NONE","body":"Hey guys, I am trying to implement @crazycodeboy 's solution, but I don't know what I'm missing because my DynamicTabComponent is not being read by my createStackNavigator.\r\n\r\nDynamicTabComponent.js:\r\n`\r\nimport {createBottomTabNavigator} from 'react-navigation'\r\nexport default class DynamicTabComponent extends Component {\r\n\r\n    constructor(props) {\r\n        super(props);\r\n        //console.disableYellowBox = true;\r\n    }\r\n\r\n    _tabNavigator() {\r\n        const tabs = {\r\n            Home: {\r\n                screen: HomeContainer\r\n            },\r\n            Profiel : {\r\n                screen: ProfileContainer\r\n            },\r\n        }\r\n        return createBottomTabNavigator(\r\n            tabs\r\n        )\r\n    }\r\n\r\n    render() {\r\n        const Tabs = this._tabNavigator();\r\n        return (\r\n            <Tabs/>\r\n        );\r\n    }\r\n}\r\n`\r\n\r\nNavigation.js:\r\n\r\n`\r\nconst RootStack = createStackNavigator(\r\n    {\r\n        SplashContainer: {\r\n            screen: SplashContainer\r\n        },\r\n        TabNav: {\r\n            screen: DynamicTabComponent\r\n        },\r\n\r\n    }, {\r\n        initialRouteName: 'SplashContainer',\r\n        mode: 'modal',\r\n        headerMode: 'none',\r\n        navigationOptions: {\r\n            headerVisible: false,\r\n        }\r\n    });\r\n\r\nexport const AppContainer = createAppContainer(RootStack);\r\n`\r\nThanks!"}}
{"actor":{"display_login":"linoleum00"}}