React native paper - BottomNavigation

Question

Does anyone know how can i change that purple color which i marked?

I used react-native-paper latest version.

Thanks!

Answer 1

Have you tried adding a theme to your paper. See below example.

const theme = {
  ...DefaultTheme,
  roundness: 2,
  version: 3,
  colors: {
    ...DefaultTheme.colors,
    primary: '#3498db',
    secondary: '#f1c40f',
    tertiary: '#a1b2c3'
  },
};

 <PaperProvider theme={theme}>
      <App />
    </PaperProvider>

Please take note this is not my code but from docs. See docs involved from this link: https://callstack.github.io/react-native-paper/theming.html

Answer 2

I have set transparent because I don't want any color instead of purple color. You can set any required color code instead of transparent.

<BottomNavigation
        navigationState={{index, routes}}
        activeColor={theme.colors.primary}
        inactiveColor="#d3d3d3"
        barStyle={{backgroundColor: '#F5F5F5'}}
        theme={{colors: {secondaryContainer: 'transparent'}}}
        onIndexChange={setIndex}
        renderScene={renderScene}
      />