React Navigation route.params typescript

Question

I'm creating a Expo managed React Native app with TypeScript and having some problems with React Navigation and TypeScript.

I want to specify the icon for the Bottom Tab Navigator on the Tab.Screen component.

This code works but complains because route.params could be undefined (line 10).

Property 'icon' does not exist on type 'object'

Can I make the icon prop required on initialParams?

I have looked in the documentation without any luck.

const App: React.FC<{}> = () => {
  return (
    <SafeAreaView style={styles.container}>
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ size, color }) => (
              <MaterialIcons
                size={size}
/* ===> */      name={route.params.icon}
                color={color}
              />
            ),
          })}
        >
          <Tab.Screen
            name="EventListView"
            initialParams={{ icon: 'view-agenda' }}
            component={EventListScreen}
          />
          <Tab.Screen
            name="CreateEvent"
            initialParams={{ icon: 'public' }}
            component={SettingsScreen}
          />
        </Tab.Navigator>
      </NavigationContainer>
    </SafeAreaView>
  )
}

Answer 1

import { RouteProp } from '@react-navigation/native';

  route: RouteProp<{ params: { icon: ICON_TYPE } }, 'params'>

I recently had the same issue, I came up with this, it seems to be working fine.

Answer 2

It is now pretty well explained in the official doc. Working well.

Read the doc: https://reactnavigation.org/docs/typescript/#type-checking-the-navigator

Here a quick look of how it could look like:

import { createStackNavigator } from '@react-navigation/stack';

type RootStackParamList = {
   Home: undefined;
   Profile: { userId: string };
   Feed: { sort: 'latest' | 'top' } | undefined;
};

const RootStack = createStackNavigator<RootStackParamList>();

<RootStack.Navigator initialRouteName="Home">
   <RootStack.Screen name="Home" component={Home} />
   <RootStack.Screen
      name="Profile"
      component={Profile}
      initialParams={{ userId: user.id }}
   />
   <RootStack.Screen name="Feed" component={Feed} />
</RootStack.Navigator>

Then to type check your component:

interface Props extends NativeStackScreenProps<RootStackParamList, 'Profile'> {
    // other props ...
}

const ProfileScreen: React.FC<Props> = ({ route, navigation }) => {
   // ...
}