React-native-paper: Icon with badge in Appbar.Action icon

[adrianicv]

Ask your Question

¿Is there a way to add a badge in an Appbar.Action icon?
I've read the docs and the example shows how to create a badge, but I can't find how to overlap the badge on top of an icon, and even more difficult, adding it to an Appbar.Action.

Thank you in advance.

[adrianicv]

I've already solved it, for people in a similar situation or if there is a better solution, I've put the badge and the Action inside a View and I've modified the badge styles with an absolute position:

<View>
          <Badge
            visible={unread && unread > 0}
            size={16}
            style={{ position: 'absolute', top: 5, right: 5 }}
          >
            {unread}
          </Badge>
          <Appbar.Action
            icon={unread ? 'bell' : 'bell-outline'}
            accessibilityLabel="TagChat"
            onPress={() => history.push('/notes')}
            {...commonProps}
          />
</View>