TabBarItem - a way to use a different icon when selected?

[gezquinndesign]

Hello, is there any way to use a different icon for a selected TabBarItem? My rudimentary implementation is not very performant and takes a while to register. I'm basically changing the image on the TabBarItem based on the tab state (as implemented in the twitter example), ie:

image={
  tab === 0
    ? require('../assets/icons/bird-fill.png')
    : require('../assets/icons/bird.png')
}

Though, as you can see, it takes a long time to change:

https://user-images.githubusercontent.com/7525980/178140511-9a9e170c-6256-4e6d-81d7-cef5a87929a5.mp4

[grahammendick]

Not sure why you're seeing the delay. I applied the same change as you to the twitter sample

image={tab === 0 ? require('./home.png') : require('./arrow.png')}

And you can see the image changes instantly. Can you try the twitter sample and see if it works for you please?

https://user-images.githubusercontent.com/1761227/178153197-63566d02-5c4c-4265-ac58-5472c46567ce.mov

[gezquinndesign]

Hi, I've tried it with the twitter sample and the icon changes instantly as in your video. I'll dig a bit further to see what might be causing the delay in my code.

On a related note, this will only work in the Tabs.js component because there is a tab state declared there. How would I achieve the same result for the iOS implementation in the twitter example?

[grahammendick]

The tab and onChangeTab props work on all platforms. It's like the value and onChange of an input in React. You supply them if you want to but you don't have to.

const [tab, setTab] = useState(0);
<TabBar tab={tab} onChangeTab={setTab}>

[gezquinndesign]

I see. Thanks for your help. Will close this issue.