"id" prop is not passed to the Navigator in react-navigation v6

[ChrisYohann]

Hi everyone,

I have an issue with react-navigation v6.

Usually I take advantage of the id prop of the navigator to retrieve a not direct parent navigator using the useNavigation hook like this :

type ExploreScreenProps = StackScreenProps<
  ExploreStackParamList,
  'ExploreScreen',
  NavigatorName
>;
type AppNavigationProp = StackNavigationProp<RootStackParamList>;

const ExploreScreen = ({ navigation }: ExploreScreenProps) => {
  const parentNavigation = navigation.getParent<AppNavigationProp>(
    NavigatorName.APP_NAVIGATOR,
  );

  // This should return the navigation object but it returns undefined
  console.log('Parent Navigation :', parentNavigation);

 }

But When I use createSharedElementStackNavigator, The id prop is not accepted. and I have this error :

My code :

const AppNavigatorShared =
  createSharedElementStackNavigator<ContentStackParamList>();


const AppScreen = () => (
  <AppNavigatorShared.Navigator
    id={NavigatorName.APP_NAVIGATOR} // 
    initialRouteName={ScreenName.HOME_SCREEN}

The error :

Type '{ children: Element[]; id: NavigatorName; initialRouteName: ScreenName.HOME_SCREEN; screenOptions: { headerTitleAlign: "center"; headerShadowVisible: false; headerStyle: { ...; }; headerTintColor: string; }; }' is not assignable to type 'IntrinsicAttributes & ((Omit<((Omit<DefaultRouterOptions<string> & { children: ReactNode; screenListeners?: Partial<{ ...; }> | ((props: { ...; }) => Partial<...>) | undefined; screenOptions?: StackNavigationOptions | ... 1 more ... | undefined; defaultScreenOptions?: StackNavigationOptions | ... 1 more ... | undefi...'.
  Property 'id' does not exist on type 'IntrinsicAttributes & ((Omit<((Omit<DefaultRouterOptions<string> & { children: ReactNode; screenListeners?: Partial<{ ...; }> | ((props: { ...; }) => Partial<...>) | undefined; screenOptions?: StackNavigationOptions | ... 1 more ... | undefined; defaultScreenOptions?: StackNavigationOptions | ... 1 more ... | undefi...'.

I tried to pass a name prop in the createSharedElementStackNavigator like this, according to that line

react-navigation-shared-element/src/createSharedElementStackNavigator.tsx

Lines 56 to 58 in 1ce95a2

	const navigatorId =
	options && options.name ? options.name : `stack${_navigatorId}`;
	_navigatorId++;

const AppNavigatorShared =
  createSharedElementStackNavigator<ContentStackParamList>({
    name: NavigatorName.APP_NAVIGATOR,
    debug: true,
  });

but it did not change anything.

Someone has an idea ? Thanks !