Two different icons for one tabBarItem

[mHvNG]

I have two different icons for one TabBarItem. For example: I have one house as an outline and one filled. Filled is active when the tab is pressed and the outline is used when the user isn't on the tab.

I have tried this with useState. However this causes a delay, sadly.

Code:

      <TabBarItem
        title="Projects"
        image={{
          uri: homeIcon // state variable
        }}
        fontSize={10.5}
        onPress={() => { setHomeIcon("home_filled")}}>
        {Platform.OS === 'iOS' 
          ? (
            <NavigationHandler stateNavigator={projectsStackNavigator}>
              <ProjectsStack />
            </NavigationHandler>
          ): <ProjectsOverview />
        }
      </TabBarItem>

How would I get this working instantly, useState is asynchronous, so it isn't fit for this?

[grahammendick]

Hi, you can control the active tab

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

Then use the active tab state to decide what image to show

<TabBarItem image={{uri: tab === 0 ? 'home_filled' ; 'home_outline'}}>

This is still asynchronous but it's faster.

Let me know if the delay is still noticeable because I'm thinking of accepting a function for the image prop

<TabBarItem image={selected => ({uri: selected ? 'home_filled' ; 'home_outline'})}>

[see2ever]

the function one is better