How can I set different icons based on Active tab or Inactive tab #139
Description
In my project, I've two different SVGs for Active and Inactive states. But in component, I can pass only one.
Can someone let me know how to do this with this library?
Right now I am doing it like this:
const tabs: TabsConfig<BubbleTabBarItemConfig, MainTabsParams> = {
Home: {
labelStyle: {
color: Terracotta,
},
icon: {
component: EmptyHomeSVG, **//here I need different SVG for every tab based on active/inactive**
activeColor: Terracotta,
inactiveColor: 'rgba(0,0,0,1)',
},
background: {
activeColor: TerracottaSecondary,
inactiveColor: 'rgba(223,215,243,0)',
},
},
Properties: {
labelStyle: {
color: Terracotta,
},
icon: {
component: EmptyWalletSVG,
activeColor: Terracotta,
inactiveColor: 'rgba(0,0,0,1)',
},
background: {
activeColor: TerracottaSecondary,
inactiveColor: 'rgba(247,215,243,0)',
},
},
Discover: {
labelStyle: {
color: Terracotta,
},
icon: {
component: EmptySearchSVG,
activeColor: Terracotta,
inactiveColor: 'rgba(0,0,0,1)',
},
background: {
activeColor: TerracottaSecondary,
inactiveColor: 'rgba(251,239,211,0)',
},
},
Requests: {
labelStyle: {
color: '#E6A919',
},
icon: {
component: EmptyHomeSVG,
activeColor: 'rgba(230,169,25,1)',
inactiveColor: 'rgba(0,0,0,1)',
},
background: {
activeColor: 'rgba(251,239,211,1)',
inactiveColor: 'rgba(251,239,211,0)',
},
},
Profile: {
labelStyle: {
color: '#1194AA',
},
icon: {
component: EmptyHomeSVG,
activeColor: 'rgba(17,148,170,1)',
inactiveColor: 'rgba(0,0,0,1)',
},
background: {
activeColor: 'rgba(207,235,239,1)',
inactiveColor: 'rgba(207,235,239,0)',
},
},
};
One of my SVG for example:
import {BubbleTabBarIconProps} from '@gorhom/animated-tabbar';
import * as React from 'react';
import Animated from 'react-native-reanimated';
import Svg, {Path} from 'react-native-svg';
const AnimatedPath = Animated.createAnimatedComponent(
Path,
) as any as React.ComponentClass<
Animated.AnimateProps<{}, PathProps & {style?: any}>
>;
Animated.addWhitelistedNativeProps({
stroke: true,
});
const EmptyHomeSVG: React.FC<BubbleTabBarIconProps> = ({color, size}) => {
return (
<Svg width={size} height={size} viewBox="0 0 24 24">
<AnimatedPath
d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
stroke={color}
strokeWidth={2}
fill="none"
fillRule="evenodd"
strokeLinecap="round"
strokeLinejoin="round"
/>
</Svg>
);
};
export default EmptyHomeSVG;
const DashboardOverview = () => {
return (
<Tab.Navigator
screenOptions={{headerShown: false}}
// eslint-disable-next-line react/no-unstable-nested-components
tabBar={props => (
<AnimatedTabBar
iconSize={20}
tabs={tabs}
{...props}
itemOuterSpace={6}
/>
)}>
<Tab.Screen
name="Home"
initialParams={{
backgroundColor: tabs.Home.labelStyle.color,
nextScreen: 'Properties',
}}
component={HomeScreen}
/>
<Tab.Screen
name="Properties"
initialParams={{
backgroundColor: tabs.Properties.labelStyle.color,
nextScreen: 'Discover',
}}
component={HomeScreen}
/>
<Tab.Screen
name="Discover"
initialParams={{
backgroundColor: tabs.Discover.labelStyle.color,
nextScreen: 'Requests',
}}
component={HomeScreen}
/>
<Tab.Screen
name="Requests"
initialParams={{
backgroundColor: tabs.Requests.labelStyle.color,
nextScreen: 'Profile',
}}
component={HomeScreen}
/>
<Tab.Screen
name="Profile"
initialParams={{
backgroundColor: tabs.Profile.labelStyle.color,
nextScreen: 'Home',
}}
component={HomeScreen}
/>
</Tab.Navigator>
);
};
I'm using
"@gorhom/animated-tabbar": "^2.1.2",
"react-native": "0.71.10",
"react-native-reanimated": "^2.14.4",