React-Native: Change badge color in @react-navigation/material-bottom-tabs

user_6843983 0
Viewed 1193

Can i change the color of the badge in material-bottom-tabs? Because it is already red by default and i nedd to change it. If it is possible, how i can do it?

...

import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';

...
const MainBottomTab = createMaterialBottomTabNavigator();

...

    <MainBottomTab.Navigator
      initialRouteName="Home"
      activeColor="#C9C9C9"
      inactiveColor="#4523AF"
      barStyle={styles.menuBotao}>
...
      <MainBottomTab.Screen
        name="Publicações"
        component={PublicacaoNavication}
        options={{
          tabBarLabel: '',
          tabBarBadge: notificacoes !== undefined ? notificacoes.length : false, <-- I need to change the color
          tabBarIcon: ({color}) => <Icon name={'filing'} color={color} />,
        }}
      />

...

</MainBottomTab.Navigator>

...
react-navigation react-native android
1 Answers

You can do so by overwriting the default theme like this:

import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';

// Create your custom theme and override the notification color
const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    notification: 'blue',
  },
};

// Pass your theme to the PaperProvider wrapping your app
const App = () => {
  return (
    <PaperProvider theme={MyTheme}>
      <NavigationContainer>
        // The rest of your content...
      </NavigationContainer>
    </PaperProvider>
  );
};
// ...
user_90983500
Related