CODEWITHSUNDEEP
react-native-ui-kitten
Clark Alms
Clark Alms

Reputation: 1

How do I change the color of bottom tab navigation icon when selected?

When I select a tab, the name of the tab changes color. I want to understand how to change the icon color as well.

<BottomNavigationTab
      title="Profile"
      icon={(focused) => {
        return (
          <Icon
            name="person-outline"
            style={{height: 30, width: 30, marginTop: 5}}
            fill={focused ? '#B9995A' : '#1f1f1f'}
          />
        );
      }}
      style={tabStyle}
    />

Upvotes: 0

Views: 1397

Answers (1)

user12797553
user12797553

Reputation:

Just listen to the state index and change the color with an if statement

const HomeIcon = (props) => (<Icon name={state.index == 0 ? 'home' : 'home-outline'} fill={state.index == 0 ? '#000' : ''#eee} />)

<BottomNavigation
        selectedIndex={state.index}
        onSelect={index => {
          setTabIndex(index)
          navigation.navigate(state.routeNames[index])
          }}>
        <BottomNavigationTab title="Home" icon={HomeIcon}/>
        <BottomNavigationTab title="Search" icon={SearchIcon}/>
</BottomNavigation>

Upvotes: 1

Related Questions