gorhom/react-native-animated-tabbar

Type Error in `tabBar={(props) => <AnimatedTabBar {...props} tabs={tabs} />`

JaeWangL opened this issue · 8 comments

JaeWangL commented

Bug

Environment info

"@react-navigation/bottom-tabs": "^5.11.2",
"@gorhom/animated-tabbar": "^2.1.0",
"react-native": "0.63.4",
"react-native-gesture-handler": "^1.9.0",
"react-native-reanimated": "^1.13.2",

Steps To Reproduce

When I add tabBar={(props) => <AnimatedTabBar {...props} tabs={tabs} /> in BottomTab.Navigator from README
TS says

Type '{ tabs: TabsConfig<BubbleTabBarItemConfig, { [key: string]: BubbleTabBarItemConfig; }>; keyboardHidesTabBar?: boolean | undefined; ... 15 more ...; navigation: NavigationHelpers<...>; }' is not assignable to type '{ preset?: "bubble" | "flashy" | "material" | undefined; tabs: TabsConfig<BubbleTabBarItemConfig | FlashyTabBarItemConfig | MaterialTabBarItemConfig, { ...; }>; ... 6 more ...; safeAreaInsets?: Insets | undefined; }'.
Types of property 'style' are incompatible.
Type 'false | RegisteredStyle | Value | AnimatedInterpolation | WithAnimatedObject | WithAnimatedArray<...> | null | undefined' is not assignable to type 'StyleProp'.
Type 'Value' is not assignable to type 'StyleProp'.
Type 'Value' is missing the following properties from type 'RecursiveArray<false | ViewStyle | RegisteredStyle | null | undefined>': length, pop, push, concat, and 26 more.

Describe what you expected to happen:
No type error with this awesome package

Reproducible sample code

    <BottomTab.Navigator
      // screenOptions={TabBarVisibleOnRootScreenOptions}
      initialRouteName={initialTabRoute}
      tabBar={(props) => <AnimatedTabBar {...props} tabs={tabs} />}
    >
      <BottomTab.Screen name={APP_SCREEN.TAB_PRODUCTS} component={ProductsNavigator} />
      <BottomTab.Screen name={APP_SCREEN.SETTINGS} component={SettingsScreen} />
    </BottomTab.Navigator>
  );
r0hin commented

Also having this issue. Here's my full code: https://pastebin.com/raw/mgq1s8fn (most of it copied directly from the readme).

Is this project still being maintained?

gorhom commented

hi @JaeWangL , @r0hin , thanks fo submitting this issue , i will look into to it later today 👍

  • 👍1
gorhom commented

@JaeWangL could you share your tabs object ?

gorhom commented

@r0hin you need to provide a function component

in your pastebin

...
      component: props => <Feather {...props} name="home" size={24} color="black" />,
...
r0hin commented

My apologies if I am doing this completely wrong but after replacing the icon components to what you have pasted above, there is still an error.
Full Code: https://pastebin.com/raw/JTPqun02
Error: https://pastebin.com/raw/VGUYfFFD
Dependencies: https://pastebin.com/raw/36wjCeJW

Thanks for your help!

mxkaske commented

Confronting the same error.
This might be a type error in AniamtedTabBarProps where

    /**
     * Root container style.
     */
    style?: StyleProp<ViewStyle>;

should be replaced with

    /**
     * Root container style.
     */
    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;

as seen inside in react-navigation:
https://github.com/react-navigation/react-navigation/blob/main/packages/bottom-tabs/src/types.tsx#L256

I'm not sure if it affects other types.

Ok, I just realised that this won't work as expected as WithAnimatedValue is a Vanilla Animated Prop

  • ❤️2
gorhom commented

Thanks @maximiliankaske for investigating it, ill work on a fix asap 👍

  • 👍2
gorhom commented

fixed with v2.1.1 🤟

  • ❤️2