How to add clickable rightButtons under topBar React Native Navigation? - react-native

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
}
});`