Cannot read property 'color' of undefined about react-native-animated-tabbar HOT 27 CLOSED

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

from react-native-animated-tabbar.

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.

from react-native-animated-tabbar.

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

from react-native-animated-tabbar.

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

from react-native-animated-tabbar.

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

from react-native-animated-tabbar.

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

from react-native-animated-tabbar.

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

from react-native-animated-tabbar.

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

yarn add ssh://[email protected]:gorhom/react-native-animated-tabbar#fix/flashy-icon-color

from react-native-animated-tabbar.

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

from react-native-animated-tabbar.

this should be solved with 1.6.0

from react-native-animated-tabbar.

@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 ?

from react-native-animated-tabbar.

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

from react-native-animated-tabbar.

@gorhom still facing

from react-native-animated-tabbar.

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

from react-native-animated-tabbar.

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) => ( <AnimatedTabBar preset="bubble" tabs={tabs} navigation={props} /> )}> <Stack.Screen name="News" component={NewsScreen} /> <Stack.Screen name="Profile" component={ProfileScreen} /> </Stack.Navigator>

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

from react-native-animated-tabbar.

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).

from react-native-animated-tabbar.

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.

from react-native-animated-tabbar.

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

from react-native-animated-tabbar.

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

from react-native-animated-tabbar.

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

from react-native-animated-tabbar.

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

from react-native-animated-tabbar.

from react-native-animated-tabbar.

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

from react-native-animated-tabbar.

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)

from react-native-animated-tabbar.

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 ?

from react-native-animated-tabbar.

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.

from react-native-animated-tabbar.

@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

from react-native-animated-tabbar.