IjzerenHein / IjzerenHein/react-navigation-shared-element
"id" prop is not passed to the Navigator in react-navigation v6
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 125
- PR merge metrics
- No merged PRs in 30d
Description
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;
const ExploreScreen = ({ navigation }: ExploreScreenProps) => {
const parentNavigation = navigation.getParent(
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();
const AppScreen = () => (
& { 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 & { 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
https://github.com/IjzerenHein/react-navigation-shared-element/blob/1ce95a2e10d56a100bcb1fbb81ada88050cd2f86/src/createSharedElementStackNavigator.tsx#L56-L58
```
const AppNavigatorShared =
createSharedElementStackNavigator({
name: NavigatorName.APP_NAVIGATOR,
debug: true,
});
```
but it did not change anything.
Someone has an idea ? Thanks !
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in src/createSharedElementStackNavigator.tsx at the referenced lines 56-58, then trace how the shared-element navigator's Navigator props are typed and passed through. Reproduce the shown TypeScript error with the id prop; done when the prop is accepted and the navigator can be retrieved through getParent as described.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100