Question 34579 in React native Question posted in
The official React Native documentation can be found here.

React native paper – BottomNavigation

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

I used react-native-paper latest version.

Thanks!

enter image description here

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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}
      />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search