how to set dynamic tab bar icon on notification in react native?

Question

I want to change tab bar icon when getting notifications.

   * */
    this.messageListener = firebase.messaging().onMessage(async message => {
      //process data message

      console.log(JSON.stringify(message));
      const isNewActivyty = await AsyncStorage.setItem('isNewActivity', 'true');
    });

this is my onMessage code.

When I get any message, I want to change tab bar icon. Such as instagram notification.

As you can see above, I was trying to use AsyncStorge to store this information but it seemed not working.

 Feed: {
      screen: Feed,
      navigationOptions: {
        tabBarIcon: ({tintColor}) => <FeedIcon color={tintColor} />,
        tabBarOnPress: async props => {
          await props.defaultHandler();
        },
        title: I18n.t('feed'),
      },
    },
    Activity: {
      screen: Activity,
      navigationOptions: {
        tabBarIcon: ({tintColor, focused}) => (
          <ActivityIcon color={tintColor} />
        ),
        tabBarOnPress: async props => {
          await props.defaultHandler();
        },
        title: I18n.t('activity'),
      },
    },

Above code this my createBottomTabNavigator.

How can I change that tabBarIcon dynamically?

Thanks!

Gaurav Roy · Accepted Answer · 2020-03-03 05:24:54Z

This is how ive implemneted dynamic tab bar icons :

const TabNavigator = createBottomTabNavigator(
  {
    Home: AppStack,
    Notification: Notifications,
    Account: SettingsScreen,
  },
  {
    defaultNavigationOptions: ({navigation}) => ({
      tabBarIcon: ({focused, tintColor}) =>
        getTabBarIcon(navigation, focused, tintColor),
    }),
    tabBarOptions: {
      activeTintColor: colors.tealC,
      inactiveTintColor: 'gray',
      labelStyle: {
        paddingBottom: 3,
      },
      style: card.btmCa,
      tabStyle: {elevation: 6},
    },
  },
);

And for getTabBarIcon ive writtenn code as below for focused and non-focused icons like :

// this function gives the icons when tab is selected
const getTabBarIcon = (navigation, focused, tintColor) => {
  const {routeName} = navigation.state;
  if (routeName === 'Home') {
    if (focused) {
      return (
        <Image
          style={homeStyles.bottomTabI}
          source={require('./app/assets/images/homeF.png')}
        />
      );
    } else {
      return (
        <Image
          style={homeStyles.bottomTabI}
          source={require('./app/assets/images/homeNFS.png')}
        />
      );
    }
  }

  if (routeName === 'Notification') {
    if (focused) {
      return (
        <Image
          style={homeStyles.bottomTabI}
          source={require('./app/assets/images/notifIconS.png')}
        />
      );
    } else {
      // console.log(props, 'props');
      return (
        // <Image
        //   style={homeStyles.bottomTabI}
        //   source={require('./app/assets/images/bellNF.png')}
        // />
        <BellIcon />
      );
    }
  }

  if (routeName === 'Account') {
    if (focused) {
      return (
        <Image
          style={homeStyles.bottomTabI}
          source={require('./app/assets/images/accountS.png')}
        />
      );
    } else {
      return (
        <Image
          style={homeStyles.bottomTabI}
          source={require('./app/assets/images/profileNF.png')}
        />
      );
    }
  }
};

And now for notifications you can see ive used a custom componenr Bellicon which basically uses redux to show if there are notifications then show as bell icon or show normal bell.

Chck code below :

class BellIcon extends Component {

  render() {
    return (
      <View>
        {this.props.notificationReducer.notificationsLength ==
        this.props.notificationReducer.notificationsNewLength
          ? this.collapseView()
          : this.nonNotificationView()}
      </View>
    );
  }
}

const mapStateToProps = state => {
  const {notificationReducer} = state;
  return {notificationReducer};
};


export default connect(mapStateToProps, null)(BellIcon);

Hope it helps. feel free for doubts

I use context instead of redux but it's really helpful to solve my issue! I really appreciate it!

Collectives™ on Stack Overflow

how to set dynamic tab bar icon on notification in react native?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related