States in TabStackNavigator?

Question

It seems like TabNavigator doesn't have it's own state. Is there any way to use state or props?

I want to show the number of unread notification on the Notification TabIcon.

export default TabNavigator(
  {
    ...
    Noti: {
      screen: NotificationStackNavigator,
    },
    ...
  },
  {
    navigationOptions: ({ navigation }) => ({
      header: null,
      tabBarIcon: ({ focused }) => {
        const { routeName } = navigation.state;
        let iconName;
        switch (routeName) {
          ...
          case 'Noti':
            iconName = 'ios-notifications';
            break;
          ...
        }
        ...
        if(iconName == 'ios-notifications') {
          return (
            <IconBadge
              MainElement={
                <Ionicons
                  name={iconName}
                  size={30}
                  style={{ marginBottom: -3 }}
                  color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}/>
              }
              BadgeElement={
                <Text style={{color:'#FFFFFF'}}>
                    {{this.state.notifications}} // my goal
                </Text>
              }
              IconBadgeStyle={{
                backgroundColor: '#f64e59',
                position: 'absolute',
                right:-10,
                top:0,
                }}
            />
          );
        }
        ...

Please let me know if anything is unclear. Thanks in advance

UPDATE I'm planning to refactor my TabNavigator. Is this what you're trying to say?

export default TabNavigator( 

to 

const MainTabNavigator = TabNavigator(

class MainTabNavigator extends Component {
    state = {notification}

export default connect(...)(MainTabNavigator);

UPDATE 2 MainTabNavigator's Top Level component is another TabNavigator. Is there any other solution?

const RootTabNavigator = TabNavigator ({
    Auth: {
      screen: AuthStackNavigator,
    },
    Welcome: {
      screen: WelcomeScreen,
    },
    Main: {
      screen: MainTabNavigator,
    },

score 1 · Accepted Answer · answered Dec 18 '17 at 12:17

1

You can pass additional custom props via screenprops

const TabNav = TabNavigator({
  // config
});

<TabNav
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>

The full documentation is here

answered Dec 18 '17 at 12:17

Thanks for the answer but I don't think you understand my question. I want to use state and props in TabNavigator where you comment as `//config`. And sorry your example code doesn't make sense to me. – merry-go-round Dec 18 '17 at 12:44
Well `TabNavigator` is stateless so no you don't get state, but you do get props. In your config, you can refer to `this.props.myCustomProp` and when you render, to `` – Dec 18 '17 at 13:49
I hope this is not true. I have no way to track of `how many unread notification the user have` – merry-go-round Dec 18 '17 at 14:33
Well why not? Just have the state living on the component above (the app) and pass the value as a prop to this stateless component.. – Dec 18 '17 at 14:43
I think I understand what you're trying to say. Can you check edited **UPDATE** code? – merry-go-round Dec 18 '17 at 14:50
like on the example [here](https://reactnavigation.org/docs/navigators/) you should have a top level component that renders `TabNavigator`, this should be where you import `TabNavigator` – Dec 18 '17 at 15:47
MainTabNavigator's Top Level component is another TabNavigator. **UPDATE2** – merry-go-round Dec 19 '17 at 16:03
I think you can solve this problem (+200 bounty) : https://stackoverflow.com/questions/47930049/how-to-reset-tabnavigator-when-user-logs-out-from-other-screen – merry-go-round Jan 03 '18 at 05:24

States in TabStackNavigator?

1 Answers1