How to add clickable rightButtons under topBar React Native Navigation?

Question

I have integrated React Native navigation package. I want to add badge with the dynamic value on my topBar rightButton. Github link of the package:: https://github.com/wix/react-native-navigation

I want an output like this. You can check this screenshot::

Issue::

If I am adding a count value on notification icon then there is no event occurs when I am trying to click on button. On click of this button I want to open up my notification screen.

Code:

static options({ menuIcon }) {
        return {
            topBar: {
                title: {
                    fontFamily: font,
                    fontSize: fontSize.heading,
                    color: colors.white,
                    alignment: 'center',
                    text: strings.dashboard
                },
                alignment: 'center',
                elevation: 0,
                noBorder: true,
                background: {
                    color: colors.dark
                },
                leftButtons: [
                    {
                        id: 'openSideMenu',
                        icon: menuIcon ? menuIcon : APIURLServiceSingleton.getInstance()._menuIcon
                    }
                ],
                rightButtons: [
                    {
                        id: 'notificationButton',
                        component: {
                            name: 'component.notificationButton'
                        }
                    }
                ]
            }
        }
    }

Code for my custom component::

<TouchableOpacity
    onPress={() => this.openSystemAlerts()}
    style={{ position: 'absolute', right: 0, bottom: -13 }}
>
    <View style={styles.button}>
        <View style={[posRelative]}>
            <Icon
                name="notifications-none"
                size={27}
                color={colors.white}
            />
            {(unseen_count && unseen_count > 0) &&
                <Text style={styles.badge}>{unseen_count}</Text>
            }
        </View>
    </View>
</TouchableOpacity>

Environment

• React Native Navigation version: 2.12.0
• React Native version: 0.58
• Platform(s) : IOS only(on version 10.0)

Answer 1

It seems that, position:'absolute' is creating problem,

Either ,

add zIndex:2 ...here, number must be greater than any other zIndex in its parent or if there is not any zIndex used then any number>0 is fine.

or

remove position:'absolute' and try styling without it.

Answer 2

try this component; worked fine for me https://github.com/RajenderDandyal/smart-city-Mobile-App/blob/master/src/UI/TopBarCartCount/index.js

    `
    class TopBarCartCount extends Component {


      handleCartPress = () => {
        if (!this.props.isAuthenticated) {
        NavigateUser(2, componentIds.myAccountStack, screenNames.signIn)
        } else {
         NavigateUser(2, componentIds.myAccountStack, screenNames.myCart)
        }
       };

        render() {
          return (
             <View style={styles.containerWrapper}>
                <TouchableOpacity onPress={this.handleCartPress}>
                   <View style={styles.container}>
                      {cartPlus}
                   <View style={styles.badge}>
                      <Text style={styles.countText}>
                        {this.props.cart.length}
                      </Text>
                   </View>
                  </View>
               </TouchableOpacity>
              </View>

              );
            }
            }

           let mapStateToProps = (state) => {
             return {
             cart: state.auth.user.cart ? state.auth.user.cart : [],
             isAuthenticated: state.auth.isAuthenticated
             }
            }
            export default connect(mapStateToProps)(TopBarCartCount);

            const styles = StyleSheet.create({
               containerWrapper: {
                  flex: 1,
                  height: 40,
                  width: 50,
                  justifyContent: 'center',
                  paddingTop: 15,
                  paddingRight: 5,
                  alignItems: 'center'
                  },
                container: {
                     flex: 1,
                    height: 40,
                    width: 50,
                    paddingLeft: 5,
                    flexDirection: 'row',
                    alignItems: 'flex-start'
                     },
                  badge: {
                      backgroundColor: themeConstants.danger,
                      width: 15,
                      height: 15,
                      alignItems: 'center',
                      justifyContent: 'center',
                      paddingLeft: 0,
                      paddingTop: 1,
                      paddingBottom: 2,
                      marginLeft: 0,
                      borderRadius: 10
                      },
                    countText: {
                      fontSize: 10,
                      paddingLeft: 0,
                      color: themeConstants.offWhite
                     }
                    });`