react-native-animated-tabbar: Cannot read property 'color' of undefined

Bug

Screenshot_20200616-180532_Juabali

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} />
    )
})

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 1
Comments: 27 (13 by maintainers)

Most upvoted comments

Not gonna lie @sudomann, I gave up and moved to TypeScript xD. But thanks for the answer tho, now I know what was wrong.

BaranKazan on Mar 20, 2021

okay great , then this issue consider resolved and i’ll fix the typing issue tomorrow , thanks for your help 👍

gorhom on Oct 28, 2020

yes, the screenshot I provided was from your new repo. It’s working, but it’s showing this error.

kevludwig on Oct 28, 2020

That’s everything related to TabBar and the only setup that works with the @ts-ignore tag. Tell me if you need more information.

export type AppParamList = {
  News: undefined;
  Events: undefined;
  Profile: undefined;
};

const tabs: TabsConfig<BubbleTabBarItemConfig, AppParamList> = {
  News: {
    labelStyle: {
      color: '#000',
    },
    icon: {
      component: (props: any) => (
        <Ionicons name="newspaper-outline" size={22} />
      ),
      activeColor: 'rgba(0,0,0,1)',
      inactiveColor: 'rgba(0,0,0,1)',
    },
    background: {
      activeColor: '#FBD59C',
      inactiveColor: 'rgba(0,0,0,0)',
    },
  },
  Events: {
    labelStyle: {
      color: '#000',
    },
    icon: {
      component: (props: any) => <Ionicons name="calendar-outline" size={22} />,
      activeColor: 'rgba(0,0,0,1)',
      inactiveColor: 'rgba(0,0,0,1)',
    },
    background: {
      activeColor: '#FBD59C',
      inactiveColor: 'rgba(0,0,0,0)',
    },
  },
  Profile: {
    labelStyle: {
      color: '#000',
    },
    icon: {
      component: (props: any) => <Ionicons name="person-outline" size={22} />,
      activeColor: 'rgba(0,0,0,1)',
      inactiveColor: 'rgba(0,0,0,1)',
    },
    background: {
      activeColor: '#FBD59C',
      inactiveColor: 'rgba(0,0,0,0)',
    },
  },
};

const Stack = createBottomTabNavigator<AppParamList>();

export const AppStack: React.FC = (props) => {
 
  return (
    <Stack.Navigator
      initialRouteName="News"
      tabBar={(props) => (
        <AnimatedTabBar
          tabs={tabs}
          //@ts-ignore
          style={styles.tabBar}
          {...props}
          duration={300}
        />
      )}>
      <Stack.Screen name="News" component={NewsScreen} />
      <Stack.Screen name="Events" component={EventsScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
};

const styles = StyleSheet.create({
  tabBar: {
    shadowOpacity: 0.2,
    backgroundColor: 'white',
  },
});

kevludwig on Oct 28, 2020

Same issue here: “TypeError: undefined is not an object (evaluating icon.inactiveColor)”

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.

yiwei138 on Jul 12, 2020

@ardyfeb , @giangyger thanks for reporting the issue , i’ll look into it 👍

gorhom on Jun 17, 2020