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

How to change react native paper bottom navigation active color?

I want to change the color of react-native-paper naviagation.
How can i change the color. I am able to change the color of background but not able to change the color of active tab round button.

Image Link = https://i.imgur.com/1C9FRMe.png

I Want to change pink to blue how can I change.

import * as React from 'react';
import { BottomNavigation} from 'react-native-paper';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';


const Tab = createBottomTabNavigator();


const HomePage =({route,navigation})  => {
    const [index, setIndex] = React.useState(0);
    const [routes] = React.useState([
        { key: 'home', title: 'Home', focusedIcon: 'home', unfocusedIcon : 'home-outline',  },
        { key: 'orderHistory', title: 'Order History', focusedIcon: 'clock', unfocusedIcon: 'clock-outline' },
        { key: 'profile', title: 'Profile', focusedIcon: 'account', unfocusedIcon : 'account-outline'},
        { key: 'other', title: 'Other', focusedIcon: 'dots-horizontal-circle', unfocusedIcon: 'dots-horizontal-circle-outline' },
    ]);
    const renderScene = BottomNavigation.SceneMap({
        profile: ProfileBase,
        home: HomeBase,
        orderHistory: OrderHistoryBase,
        other: OtherBase,
    });

    return (
        <View style={{backgroundColor: "white", height: '100%'}}>
            <BottomNavigation
                shifting={false}
                variant='secondary'
                navigationState={{ index, routes }}
                onIndexChange={setIndex}
                renderScene={renderScene}
                barStyle={{backgroundColor:'white'}}
                />
        </View>
    );
}

export default HomePage;

// activeColor="red"
// barStyle={{ backgroundColor: '#1fa9e8'  }}
Tags:

2

Answers


  1. 0

    In react native paper theme object just change secondaryContainer color

    const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: "#3498db",
    secondary: "#f1c40f",
    secondaryContainer: "red",
  },
};
    Login or Signup to reply.
  2. 0

    you have to override the secondaryContainer color, locally in the component via theme prop: https://github.com/callstack/react-native-paper/issues/3248

     <BottomNavigation
      ...
      theme={{colors: {secondaryContainer: 'yellow'}}}
    />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search