Properly typing route.params in custom bottom tab bar

Question

I cannot properly type route.params for a bottom tab navigator. For example, I have the navigator and params type like this:

export type BottomTabParamList = {
    ListScreen: { i18nKey: string };
    DetailsScreen: { i18nKey: string };
    OptionsStackNavigator: { i18nKey: string };
};

const MainAppBottomTabs = createBottomTabNavigator<BottomTabParamList>();

I am using a custom tab bar component for this. In that tab bar component, I am combining another type (for some redux props) with BottomTabBarProps. I then use .map which uses the nav state:

type ScreenProps = BottomTabBarProps & {
    reduxProp1: number;
    reduxProp2: number;
};

const TabBar = (screenProps: ScreenProps): JSX.Element => {
    return <View>
        // do stuff with each route here like
        // return state.routes.map((route, index) => {
        // const { i18nKey } = route.params;
    </View>;
};

Edit: Here is the bottom tabs navigator creation code:

const MainAppBottomTabs = createBottomTabNavigator<BottomTabParamList>();
const MainAppBottomTabsNavigator = (): JSX.Element => {
    return (
        <MainAppBottomTabs.Navigator
            initialRouteName="ListScreen"
            screenOptions={{
                headerShown: false
            }}
            tabBar={(props: BottomTabBarProps) => (
                <TabBar
                    state={props.state}
                    navigation={props.navigation}
                    descriptors={props.descriptors}
                    insets={props.insets}
                />
            )}>
            <MainAppBottomTabs.Screen
                name="ListScreen"
                component={ListScreen}
                initialParams={{
                    i18nKey: 'list'
                }}
            />
            <MainAppBottomTabs.Screen
                name="DetailsScreen"
                component={DetailsScreen}
                initialParams={{
                    i18nKey: 'details'
                }}
            />
            <MainAppBottomTabs.Screen
                name="OptionsStackNavigator"
                component={OptionsStackNavigator}
                initialParams={{
                    i18nKey: 'options'
                }}
            />
        </MainAppBottomTabs.Navigator>
    );
};

It is saying i18nKey doesn't exist on type {}. How can I get it to recognize the type correctly?

We will need more code, imo. I assume that `BottomTabBarProps` is `{ i18nKey: string }`. Could you add the, maybe inferred, types of `state.routes` and `route`? — Ignacio Lago, Jun 28 '22 at 08:25
@IgnacioLago hello! I updated the code. `BottomTabBarProps` is from react-navigation and is the type for the props that get passed into a bottomTabBar. — pfinferno, Jun 29 '22 at 09:59

score 1 · Accepted Answer · answered Sep 08 '22 at 08:50

You can try it like this:

interface Props extends BottomTabScreenProps<BottomTabParamsList, 'ListScreen'> {
  reduxProp1: string;
  reduxProp2: string;
}

export default function TabOneScreen({ navigation, route }: Props) {
  const i18Key = route.params.i18nKey;

Of course you can use types instead of interfaces as well like:

type Props = BottomTabScreenProps<RootTabParamList, 'ListScreen'> & {
  reduxProp1: string;
  reduxProp2: string;
}

score -2 · Answer 2 · answered Jun 29 '22 at 08:15

-2

You may use

const { i18nKey } = route.params as any;

Then check if i18nKey is defined

answered Jun 29 '22 at 08:15

Sganabadarlane

37
4

1

kinda defeats the purpose putting it as any though? – pfinferno Jun 29 '22 at 09:52

Properly typing route.params in custom bottom tab bar

2 Answers2