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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.