2

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

O8eiosSam
  • 78
  • 1
  • 9
  • Are you on latest version of bottom tabs? – satya164 Nov 18 '20 at 04:07
  • @satya164 I think you are referring to this line (taken from my package.json) `"@react-navigation/bottom-tabs": "^5.9.2"`, which I think is indeed the latest version. I have edited the question to include version numbers. – O8eiosSam Nov 18 '20 at 10:36
  • Latest version is 5.11.1 https://www.npmjs.com/package/@react-navigation/bottom-tabs – satya164 Nov 18 '20 at 12:41
  • @satya164 Ok, I upgraded to 5.11.1 but the problem still persists. – O8eiosSam Nov 18 '20 at 18:50
  • 1
    It works for me: https://snack.expo.io/pQD97pIBp Try clearning your metro cache https://reactnavigation.org/docs/troubleshooting/#stale-cache-of-metro-bundler – satya164 Nov 18 '20 at 21:58
  • @satya164 It worked! It seems that was indeed the problem. Thank you very much. I have answered my question stating the solution. – O8eiosSam Nov 19 '20 at 13:00

1 Answers1

1

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.

O8eiosSam
  • 78
  • 1
  • 9