CODEWITHSUNDEEP
typescriptreact-nativevisual-studio-codereact-navigation
J. Hesters
J. Hesters

Reputation: 14748

React Navigation TypeScript: Argument of type ... is not assignable to parameter of type 'BottomTabNavigatorConfig'

I'm building a React Native app and I'm handling my navigation using React Navigation V2.

I literally copy pasted the following code from the documentation:

const MainTabs = createBottomTabNavigator(
  { Home: HomeStack, Settings: SettingsStack },
  {
    navigationOptions: ({ navigation }: NavigationScreenProps) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === "Home") {
          iconName = `ios-information-circle${focused ? "" : "-outline"}`;
        } else if (routeName === "Settings") {
          iconName = `ios-options${focused ? "" : "-outline"}`;
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      }
    }),
    tabBarOptions: {
      activeTintColor: "tomato",
      inactiveTintColor: "gray"
    }
  }
)

For some reason typescript throws the following error:

[ts]
Argument of type '{ navigationOptions: ({ navigation }: any) => { tabBarIcon: ({ focused, tintColor }: { tintColor: string | null; focused: boolean; }) => Icon; }; }' is not assignable to parameter of type 'BottomTabNavigatorConfig'.
  Types of property 'navigationOptions' are incompatible.
    Type '({ navigation }: any) => { tabBarIcon: ({ focused, tintColor }: { tintColor: string | null; focused: boolean; }) => Icon; }' is not assignable to type 'NavigationBottomTabScreenOptions | ((navigationOptionsContainer: NavigationScreenConfigProps & { navigationOptions: NavigationScreenProp<NavigationRoute<NavigationParams>, NavigationParams>; }) => NavigationBottomTabScreenOptions) | undefined'.

How can that be? What am I doing wrong?

Upvotes: 4

Views: 6411

Answers (3)

ItSNeverLate
ItSNeverLate

Reputation: 729

NOTICE: options={loginHeader as StackHeaderOptions}

const AuthStack = createStackNavigator()
export default () => (
   <AuthStack.Navigator screenOptions={navigationHeader}>
      <AuthStack.Screen name={Routes.LOGIN} component={Login} options={loginHeader as StackHeaderOptions} />
      <AuthStack.Screen name={Routes.CHAT.INFO} component={Info} />
      <AuthStack.Screen name={Routes.CHAT.FLOW} component={ChatFlow} />
   </AuthStack.Navigator>
)

const loginHeader = ({ navigation }) => ({
   title: 'Login',
   headerRight: () => (
       <HeaderButton
          imageSource={IMG_INFO}
          onPress={() => navigation.navigate('Info')}
       />
   )
})

https://www.linkedin.com/in/mehdiparsaei/

Upvotes: 1

Teivaz
Teivaz

Reputation: 5665

In my experience react-navigation has problems with navigationsOptions property types. The solutions here is to make a proper types for the library be very specific about the types you have.

As far as I can see here the weak spot is the tabBarIcon function argument type. Add an explicit type to the argument being unpacked:

...
  tabBarIcon: ({ focused, tintColor }:TabBarIconProps) => {
...

The return type should be derived automatically.

Upvotes: 0

user1445278
user1445278

Reputation: 1

Depending on what the prop is expecting, you may need to cast what you are passing it in the expression as well. So something like:

navigationOptions: ({ navigation as any }: any)

Upvotes: 0

Related Questions