When dealing with defining types for a screen's navigation prop in a different file than the router, what is the most effective approach? For example, if I have one file where routes are defined:
//Router.tsx
type RootStackParamList = {
Home: undefined;
Profile: undefined;
}
const Stack = createStackNavigator<RootStackParamList>();
// Component rendering navigator
const Router = () => {
.
.
.
}
And then a separate file for the screen:
// Home.tsx
// Should we duplicate the RootStackParamList here,
// which was already defined in Router.tsx?
type = HomeScreenNavigationProp = StackNavigationProp<
RootStackParamList,
"Home"
>;
type Props: {
navigation: HomeScreenNavigationProp
}
const Home = ({navigation}: Props) => {
.
.
.
}
Should I repeatedly copy the RootStackParamList to every screen or create a shared types.ts file and import it from there? Is there a more efficient way to manage this, considering that navigation is used frequently across components?