CODEWITHSUNDEEP
typescriptreact-navigation-v5
Keonho
Keonho

Reputation: 1

How to define nested navigation prop of react-native v5?

I'm trying to define types of react-navigation (navigation and route props) to make is easier to auto complete of VS Code.

App(Stack) > Main(BottomTab)> [Home(Stack){Post}, Profile(Stack){UserProfile}] In this nested navigation state, I want to navigate from Post(Home) to UserProfile(Profile).

Here's my Stack and BottomTab ParamList.

/* App Navigation Types */
export type AppStackParamList = {
  Landing: undefined;
  Main: undefined;
};

/* Main Navigation Types */
export type MainTabParamList = {
  Home: undefined;
  Crypto: undefined;
  Posting: undefined;
  Chat: undefined;
  Profile: undefined;
};

/* Home Navigation Type */
export type HomeStackParamList = {
  Post: { id: string } | undefined;
  CategoryFilter: undefined;
  Feed: undefined;
  Search: undefined;
  SetLocation: undefined;
};

/* Profile Navigation Type */
export type ProfileStackParamList = {
  EditProfile: undefined;
  MyPage: undefined;
  UserProfile: { id: string } | undefined;
};

And these are navigation prop types of each screens

export type PostNavProp = CompositeNavigationProp<
  StackNavigationProp<HomeStackParamList, 'Post'>,
  BottomTabNavigationProp<MainTabParamList>
>;

export type UserProfileNavProp = CompositeNavigationProp<
  StackNavigationProp<ProfileStackParamList, 'UserProfile'>,
  BottomTabNavigationProp<MainTabParamList>
>;

With this type definition, navigation.navigate('Profile') works. but initial Screen Route of Profile is not 'UserProfile'. When I try to access UserProfile with 2nd parameter of navigate() function like navigation.navigate('Profile', {screen:'UserProfile'}) it says error..

only 1st parameter works error message

Can I get some advices about this issue? I need help immediately.. Please..

Upvotes: 0

Views: 585

Answers (1)

Oskar
Oskar

Reputation: 366

Your setup seems correct. There appears to be a known type error when it comes to nested navigators with react-navigation:

https://github.com/react-navigation/react-navigation/issues/6931

Upvotes: 1

Related Questions