1

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.stack.imgur.com/3Edpm.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'  }}
shoaibdevs
  • 401
  • 6
  • 18

0 Answers0