IjzerenHein / IjzerenHein/react-navigation-shared-element

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

Open
#248 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.