Cannot read property 'color' of undefined

[ardyfeb]

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

[giangyger]

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

[gorhom]

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

[gorhom]

hi @ardyfeb , would you mind test this PR, it should solve the issue

yarn add ssh://git@github.com:gorhom/react-native-animated-tabbar#fix/flashy-icon-color

[gorhom]

@giangyger your issue seems with Bubble preset, please create another issue :)

[gorhom]

this should be solved with 1.6.0

[yiwei138]

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 = {

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.

[gorhom]

@yiwei138 , thanks for pointing this out, i'll try to mention it in the docs.

However i am wondering, didn't the IDE give you a warning about it ?

[ImadChughtai]

Still facing error "TypeError: undefined is not an object (evaluating icon.inactiveColor)" @gorhom @yiwei138.

[vancerbtw]

@gorhom still facing

[gorhom]

@ImadChughtai , @supremevance could you provide a reproducible sample code ?

[kevludwig]

I'm facing the same error with following configuration:

const tabs: TabsConfig<BubbleTabBarItemConfig> = { News: { labelStyle: { color: '#000', }, icon: { component: <Ionicons name="ios-image" size={22} />, activeColor: 'rgba(0,0,0,1)', inactiveColor: 'rgba(0,0,0,1)', }, background: { activeColor: '#ED6C00', //rgba(0,0,0,.2) inactiveColor: 'rgba(0,0,0,0)', }, }, Profile: { labelStyle: { color: '#000', }, icon: { component: <Ionicons name="ios-calendar" size={22} />, activeColor: 'rgba(0,0,0,1)', inactiveColor: 'rgba(0,0,0,1)', }, background: { activeColor: '#ED6C00', inactiveColor: 'rgba(0,0,0,0)', }, }, };

My setup of AnimatedTabBar is very simple without any custom styles:

`<Stack.Navigator initialRouteName="News" tabBar={(props) => (

  )}>
  <Stack.Screen name="News" component={NewsScreen} />
  <Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>`

Library	Version
@gorhom/animated-tabbar	2.1.0
react-native	0.63.3
react-native-reanimated	1.13.1
react-native-gesture-handler	1.8.0
react-native-svg	12.1.0

It throws a component exception: undefined is not an object (evaluating 'icon.inactiveColor')

[gorhom]

hi @kevludwig, looking at your provided reproducible sample code, it seems you are trying to use this library with Stack navigator instead of Tab navigator (https://reactnavigation.org/docs/tab-based-navigation).

[kevludwig]

export type AppParamList = { News: undefined; Events: undefined; Profile: undefined; }; const Stack = createBottomTabNavigator<AppParamList>();

Hello @gorhom, I'm using the right navigator and I'm using version 1.2.0 now and it seems to work just fine. When I update the dependency it will throw the same error as mentioned above.

I took a look at your type definitions but found nothing regarding this issue. Maybe it's caused by the class which controls animated color array.

[gorhom]

hi @kevludwig , could you try to AppParamList to the tabs type

const tabs: TabsConfig<BubbleTabBarItemConfig, AppParamList> = {
  News: {
    labelStyle: { color: "#000" },
    icon: {
      component: <Ionicons name="ios-image" size={22} />,
      activeColor: "rgba(0,0,0,1)",
      inactiveColor: "rgba(0,0,0,1)",
    },
    background: { activeColor: "#ED6C00", inactiveColor: "rgba(0,0,0,0)" },
  },
  Profile: {
    labelStyle: { color: "#000" },
    icon: {
      component: <Ionicons name="ios-calendar" size={22} />,
      activeColor: "rgba(0,0,0,1)",
      inactiveColor: "rgba(0,0,0,1)",
    },
    background: { activeColor: "#ED6C00", inactiveColor: "rgba(0,0,0,0)" },
  },
};

[kevludwig]

I installed v2.1.0 right now and it's the same error when adding the AppParamList to the type. The problem seems to be solved when I'm ignoring type checking on the style prop. Like mentioned I think it's the type of the array which processes the animation colours.

The issue is also back again, when I try to use the navigation prop of AnimatedTabBar.

<AnimatedTabBar
          tabs={tabs}
          //@ts-ignore
          style={styles.tabBar}
          // navigation={props} => this is not working either
          {...props}
          duration={300}/>

[gorhom]

@kevludwig , could you provide a full reproducible sample code ? that will help a lot , thanks

[kevludwig]

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',
  },
});

[gorhom]

Thanks @kevludwig for providing the reproducible sample code, however it is working fine here 🧐

could you provide the version of react-navigation/native, react-navigation/bottom-tabs & react-navigation/stack ?

Thanks

[kevludwig]

Library	Version
@react-navigation/native	5.7.6
@react-navigation/bottom-tabs	5.9.2
@react-navigation/stack	5.9.3

[gorhom]

hi @kevludwig , i have created a dummy project based on your reproducible code , and it seems working fine, please try it and let me know.

https://github.com/gorhom/animated-tabbar-49

[kevludwig]

Okay, I think things are getting strange now. 🤣

Type '{ keyboardHidesTabBar?: boolean; activeTintColor?: string; inactiveTintColor?: string; activeBackgroundColor?: string; inactiveBackgroundColor?: string; allowFontScaling?: boolean; showLabel?: boolean; ... 11 more ...; tabs: TabsConfig<...>; }' is not assignable to type '{ preset?: "bubble"; tabs: TabsConfig<BubbleTabBarItemConfig, { [key: string]: BubbleTabBarItemConfig; }>; style?: StyleProp<ViewStyle>; ... 5 more ...; safeAreaInsets?: Insets; }'.
  Types of property 'style' are incompatible.
    Type 'false | RegisteredStyle<ViewStyle> | Value | AnimatedInterpolation | WithAnimatedObject<ViewStyle> | WithAnimatedArray<...>' is not assignable to type 'StyleProp<ViewStyle>'.
      Type 'Value' is not assignable to type 'StyleProp<ViewStyle>'.
        Type 'Value' is missing the following properties from type 'RecursiveArray<false | ViewStyle | RegisteredStyle<ViewStyle>>': length, pop, push, concat, and 26 more.ts(2322)

[gorhom]

seems react-navigation updated their tabbar style type, however, it should not be an issue. did you manage to reproduce the issue on the new repo ?

[kevludwig]

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

[gorhom]

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

[BaranKazan]

I have gotten myself this far and I refuse to give up. I'm also getting the same error but I think there is something I'm doing wrong. Here is my source code together with versions.

Source Code

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import AnimatedTabBar from '@gorhom/animated-tabbar';
import Home from './app/screens/Home';
import Locations from './app/screens/Locations';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const tabs = {
  Home: { // < Screen name
    labelStyle: {
      color: '#5B37B7',
    },
    icon: {
      component: ({ props }) => (
        <MaterialCommunityIcons name="home" />
      ),
      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)',
    },
  },
  Locations: { // < Screen name
    labelStyle: {
      color: '#1194AA',
    },
    icon: {
      component: ({ props }) => (
        <MaterialCommunityIcons name="home" />
      ),
      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)',
    },
  },
};

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        tabBar={props => (
          <AnimatedTabBar tabs={tabs} {...props} />
        )}
      >
        <Tab.Screen
          name="Home"
          component={Home}
        />
        <Tab.Screen
          name="Lications"
          component={Locations}
        />
      </Tab.Navigator>
    </NavigationContainer>
  )
}

Version @gorhom/animated-tabbar: ^2.1.1 @react-navigation/bottom-tabs: "^5.11.8 react-native-gesture-handler: ^1.8.0 react-native-reanimated: ^1.13.2 react-native-screens: ~2.15.0 react-native-svg": ^12.1.0 react-native-vector-icons: ^8.1.0

I feel like I've done something wrong when adding component icon but I have tried several other methods. I would be very appreciated if I could get any type of help.

P.S. This is the first time I'm asking something on the internet.

[sudomann]

@gorhom Please indicate somewhere in the documentation that the keys for configuring the tabs must match exactly with the route name.

It would be immensely helpful for the exception message to be something helpful like <key> in tabs config object is not a registered route.

I spent way too long digging through your source trying to figure out what was wrong before figuring this out :(

@BaranKazan I notice this is the reason you got this error. You might've already figured this out by now - if so, shame on you for not coming back here to update and save the rest of us some time 🙃. If not, look at where you have

       <Tab.Screen
          name="Lications"
          component={Locations}
        />

Lications is registered as a route in the navigator, but in your tabs you have tabs.Locations

[BaranKazan]

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