TypeError: undefined is not an object (evaluating 'navigation.state')

[GustavoDev764]

Bug

type errors The Tabnavigator tabBar parameter receives a React.ReactNode or undefine component, however AnimatedTabBar and of type JSX Element

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

Steps To Reproduce

1. Usage - React Navigation v5 (TypeScript)

Describe what you expected to happen:

Reproducible sample code

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import AnimatedTabBar, {
  TabsConfig,
  BubbleTabBarItemConfig,
} from '@gorhom/animated-tabbar';

import HomeIcon from '../Tab/icons/Home';
import ProfileIcon from '../Tab/icons/ProfileIcon';

import Home from '../../screens/Home';
import Profile from '../../screens/Profile';

const tabs: TabsConfig<BubbleTabBarItemConfig> = {
  Home: {
    labelStyle: {
      color: '#5B37B7',
    },
    icon: {
      component: <HomeIcon />,
      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)',
    },
  },
  Profile: {
    labelStyle: {
      color: '#1194AA',
    },
    icon: {
      component: <ProfileIcon />,
      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) => {
          console.log(props);
          return <AnimatedTabBar tabs={tabs} />;
        }}>
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Profile" component={Profile} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

[gorhom]

you need to pass tabBar props to AnimatedTabBar

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