undefined is not an object (evaluating navigation.state)

[ngoel37]

Bug

Using standalone method from docs. Having three issues:

1. undefined is not an object (evaluation navigation.state)
   

2. The sample calls for using AnimatedTabBarView, but the imports only list AnimatedTabBar. Which one should I use?

3. I am getting a type error on index within the component

Thanks!

Environment info

Library	Version
@gorhom/animated-tabbar	2.1.2
react-native	0.63.4
react-native-reanimated	1
react-native-gesture-handler	1.10.2
react-native-svg	12.1.1

Steps To Reproduce

import AnimatedTabBarView, {TabsConfig, BubbleTabBarItemConfig} from '@gorhom/animated-tabbar'

const [index, setIndex] = useState(0)

const tabs: TabsConfig<BubbleTabBarItemConfig> = {
    Home: {
      labelStyle: {
        color: "#5B37B7",
      },
      icon: {
        component: (
          <View />
        ),
        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: (
          <View />
        ),
        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)",
      },
    },
  }


<AnimatedTabBarView
            tabs={tabs}
            itemOuterSpace={{
              horizontal: 6,
              vertical: 12,
            }}
            itemInnerSpace={12}
            iconSize={20}
            style={{ borderRadius: 25}}
            index={index}
            onIndexChange={setIndex}
        />

[ngoel37]

Fixed this. @gorhom - we just need to fix the import to

import {
  AnimatedTabBarView,
  TabsConfig,
  BubbleTabBarItemConfig,
} from "@gorhom/animated-tabbar"