What is the best way to define type for screen's navigation
prop, when screen is in different file that router? Let's say I have one file, in which I define routes:
//Router.tsx
type RootStackParamList = {
Home: undefined;
Profile: undefined;
}
const Stack = createStackNavigator<RootStackParamList>();
// Component rendering navigator
const Router = () => {
.
.
.
}
Then I have the separate file for screen:
// Home.tsx
// here has to be the same RootStackParamList
// that we've already defined in Router.tsx
type = HomeScreenNavigationProp = StackNavigationProp<
RootStackParamList,
"Home">;
type Props: {
navigation: HomeScreenNavigationProp
}
const Home = ({navigation}: Props) => {
.
.
.
}
Do I have to copy RootStackParamList
over and over to every screen or create something like types.ts
file and import it from there? Is there a better way to handle it? I am using navigation
almost in every component.