O8eiosSam
O8eiosSam

Reputation: 78

Modifying the tabBarBadge color in react native bottom tab navigator

I have a react-native app that uses createBottomTabNavigator for navigation. I have set custom icons for the 2 tabs that comprise the navigator and I have added badges to them using navigation.setOptions like so:

navigation.setOptions({ tabBarBadge: 1 }) // sample value

This works fine as shown here. However, now I want to modify that red-ish colour of the badge to an arbitrary one. Following the docs, I have tried changing the colour like so:

navigation.setOptions({ tabBarBadge: 1, tabBarBadgeStyle: { backgroundColor: 'blue' }) // sample value

Unfortunately, this does not seem to work and I couldn't find any specific example on how to modify this colour, not in the docs nor anywhere else.

Is there any way to modify this colour?

UPDATE: My package versions are as follows:

@react-navigation/bottom-tabs: ^5.11.1

react-native: 0.63.2

react: 16.13.1

Upvotes: 2

Views: 6026

Answers (1)

O8eiosSam
O8eiosSam

Reputation: 78

Thanks to @satya164, I was able to resolve the problem by clearing the metro bundler cache, via executing npx react-native start --reset-cache as stated in the link he provided.

Upvotes: 1

Related Questions