My tech stack:
- React Native
- OneSignal for push notifications
- React Navigation
- React Native Elements (Badge component)
- React Native Vector Icons
- Firebase, Firestore as backend
Within my app, I have two buttons located in the topRight Stack Screen.
<Stack.Screen
name="CreateEvent"
component={CreateEvent}
options={{
headerRight: () => (
<View style={{ flexDirection: "row", alignItems: "center", marginRight: 10 }}>
<TouchableOpacity
onPress={() => { navigation.navigate("InvitationsNav") }}>
<Badge
status="error"
containerStyle={{ position: 'absolute', top: -4, right: -4 }}
value="10"/> // <--- hardcoded value
<IconMaterialIcons
name="event"
color={Constants.colors.primaryColor}
backgroundColor="transparent"
size={30}
style={{ paddingHorizontal: 10 }}/>
</TouchableOpacity>
<TouchableOpacity
onPress={() => { navigation.navigate("nl_Notifications") }}>
<Badge
status="error"
containerStyle={{ position: 'absolute', top: -4, right: -4 }}
value="2"/> // <--- hardcoded value
<IconIonicons
name="notifications-outline"
color={Constants.colors.primaryColor}
backgroundColor="rgba(52, 52, 52, 0.0)"
size={30}
style={{ paddingHorizontal: 10 }}/>
</TouchableOpacity>
</View>)
https://i.sstatic.net/dtlJZ.png
The hardcoded values on the image need to be dynamic.
I want to update the badge values based on unseen Firestore documents. For example, if a user has 3 new notifications, I want the badge to display 3.
One approach could be to add a "seen: false" flag to Firestore documents. But pre-loading documents with "seen == false" may not be efficient.
Is there a way to dynamically update badge values using OneSignal Push notifications or another solution?
Any suggestions on how to tackle this issue are welcome. Thank you!