CODEWITHSUNDEEP
react-native-ui-kitten
Sayan
Sayan

Reputation: 56

How to change the color of selected BottomNavigationTab in bottom navigation ( ui-kitten )

<Layout>
      <BottomNavigation indicatorStyle={styles.tabIndicator} selectedIndex={selectIndex} onSelect={onSelect} >
        <BottomNavigationTab title='Home' icon={homeIcon}/>
        <BottomNavigationTab title='Cart' icon={cartIcon}/>
        <BottomNavigationTab title='Search' icon={searchIcon}/>
        <BottomNavigationTab title='Account' icon={accountIcon}/>
        <BottomNavigationTab title='More' icon={menuIcon}/>
      </BottomNavigation>
    </Layout>

How can it change the icon color and text color of the selected tab item and also the nonselected tab items in ui-kitten library?

"@eva-design/eva": "^1.4.0",
"@react-native-community/masked-view": "^0.1.7",
"@ui-kitten/components": "^4.4.1",
"@ui-kitten/eva-icons": "^4.4.1",
"react": "16.9.0",
"react-native": "0.61.4",

Upvotes: 1

Views: 1585

Answers (1)

Walnei Antunes
Walnei Antunes

Reputation: 61

<BottomNavigation
---> indicatorStyle={{backgroundColor: '#FFAA00', height: 4}}
      selectedIndex={selectedIndex}
      onSelect={(index) => setSelectedIndex(index)}>
      <BottomNavigationTab
        icon={TabIcon}
        title="Teste"
      />

Save and restart (not press r, stop an start) the metro to apply alters

Upvotes: 6

Related Questions