how to use two different route name with params for the same used component on react native in navigation

Viewed 28

let's suppose I have the typing like the following

export type NavProp<
  ParamList extends ParamListBase,
  RouteName extends keyof ParamList = string
> = {
  nav: NativeStackNavigationProp<ParamList, RouteName>;
  route: RouteProp<ParamList, RouteName>;
};

and one component

type NavPrams = {
'my_screen': {
 title: string;
};
};

type Props = NavProp<NavPrams, 'my_screen'>

export default function MyComponent (props: Props) {
return <Text>hello {props.title}</Text>
}

and in Navigation I have for example :

...
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name='my_screen' component={MyComponent}/>
<Stack.Screen name='my_screen2' component={MyComponent}/> // issue is here different name of screen
</Stack.Navigator>
</NavigationContainer>
...

the issue will show us a message like

....
Types of parameters 'props' and 'props' are incompatible.
      Type '{}' is missing the following properties from type 'Omit<ClassAttributes<MyComponent> 
...

Note: I don't want to create duplicated things like comp , props... I want something generated

0 Answers
Related