Bug
Environment info
Library |
Version |
@gorhom/animated-tabbar |
1.5.1 |
react-native |
0.62.2 |
react-native-reanimated |
0.62.2 |
react-native-gesture-handler |
1.6.1 |
react-native-svg |
12.1.0 |
Reproducible sample code
import { default as AnimatedTabBar, TabsConfig, FlashyTabConfig } from '@gorhom/animated-tabbar'
import { createBottomTabNavigator } from 'react-navigation-tabs';
const tabs: TabsConfig<FlashyTabConfig> = {
Beranda: {
icon: {
color: color.primary,
component: props => (
<Feather name="home" {...props}/>
)
},
labelStyle: {
fontFamily: 'Medium',
color: 'black'
},
},
Palugada: {
icon: {
color: color.primary,
component: props => (
<Feather name="home" {...props}/>
)
},
labelStyle: {
fontFamily: 'Medium',
color: 'black'
},
},
Jelajahi: {
icon: {
color: color.primary,
component: props => (
<Feather name="home" {...props}/>
)
},
labelStyle: {
fontFamily: 'Medium',
color: 'black'
},
},
Keranjang: {
icon: {
color: color.primary,
component: props => (
<Feather name="home" {...props}/>
)
},
labelStyle: {
fontFamily: 'Medium',
color: 'black'
},
},
Akun: {
icon: {
color: color.primary,
component: props => (
<Feather name="home" {...props}/>
)
},
labelStyle: {
fontFamily: 'Medium',
color: 'black',
},
},
}
createBottomTabNavigator({
...
tabBarComponent: props => (
<AnimatedTabBar preset="flashy" tabs={tabs} {...props} />
)
})
Not gonna lie @sudomann, I gave up and moved to TypeScript xD. But thanks for the answer tho, now I know what was wrong.
okay great , then this issue consider resolved and i’ll fix the typing issue tomorrow , thanks for your help 👍
yes, the screenshot I provided was from your new repo. It’s working, but it’s showing this error.
That’s everything related to TabBar and the only setup that works with the @ts-ignore tag. Tell me if you need more information.
I also have this issue but I managed to solve it myself, the issue is very simple.
const tabs = { [MUST BE SAME AS ROUTE NAME]: { labelStyle: { color: '#5B37B7', }, icon: { component: /* ICON COMPONENT */, activeColor: 'rgba(91,55,183,1)', inactiveColor: 'rgba(0,0,0,1)', }, background: { activeColor: 'rgba(223,215,243,1)', inactiveColor: 'rgba(223,215,243,0)', }, }, };
I think it would be very helpful if this could be mentioned in the docs.
@ardyfeb , @giangyger thanks for reporting the issue , i’ll look into it 👍