0

I was following the documentation tutorial about using typescript with react-navigation when I encountered some problems.

I have a Tab navigator that consists of Stack navigators, each of which contains its respective screens:

export type HomeStackParamList = {
    Home: undefined;
    Workout: undefined;
    Settings: undefined;
};

export type ExecisesStackParamList = {
    Debug: { exercises: PredefinedExercise[] } | undefined;
    Exercises: { mode: 'select' | 'view' };
    Settings: undefined;
};

export type AppTabParamList = {
    HomeTab: NavigatorScreenParams<HomeStackParamList>;
    ExercisesTab: NavigatorScreenParams<ExecisesStackParamList>;
};

// utility for combining props
export type ExercisesTabScreenProps<ScreenName extends keyof ExecisesStackParamList> =
    CompositeScreenProps<
        NativeStackScreenProps<ExecisesStackParamList, ScreenName>,
        BottomTabScreenProps<AppTabParamList, 'ExercisesTab'>
    >;

When my screen component uses props combined with CompositeScreenProps everything seems fine - as documentation says navigation object have methods from Tab as well as from Stack navigator, and route object has correct params typings.

export default function ExercisesScreen(props: ExercisesTabScreenProps<'Exercises'>) {
    const { navigation, route } = props; // OK
    // ...
}

Problem starts when I need to navigate to another screen. Despite correct hints: img

when I pass route of parent navigator (e.g. ExerciseTab or HomeTab) I get not assignable error:

const handleSelectConfirm = () => {
    navigation.navigate('ExercisesTab');
};

/* Results with:
Argument of type 'string' is not assignable to parameter of type '{ name: "ExercisesTab";
params: NavigatorScreenParams<ExecisesStackParamList>; path?: string | undefined; merge?:
boolean | undefined; } | { ...; } | { ...; } | { ...; } | { ...; }'.
*/

But when I use route from nested navigator, I get no errors:

const handleSelectConfirm = () => {
    navigation.navigate('Settings');
};

// OK

Any ideas why is this happening?

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.