I have the following navigation structure in my app.tsx file:
const HomeStack = createStackNavigator<HomeStackParamList>()function HomeStackScreen() { return (<HomeStack.Navigator><HomeStack.Screen name='Home' component={NasaImageList} options={{ title: 'NASA Image Search' }} /><HomeStack.Screen name='Details' component={NasaImageDetails} options={({ route }) => ({ title: route.params.title })} /></HomeStack.Navigator> )}const FavouriteStack = createStackNavigator<FavouriteStackParamList>()function FavouriteStackScreen() { return (<FavouriteStack.Navigator><FavouriteStack.Screen name="Favourites" component={NasaImageFavouriteList} /><FavouriteStack.Screen name="Details" component={NasaImageDetails} options={({ route }) => ({ title: route.params.title })}} /></FavouriteStack.Navigator> )}const Tab = createBottomTabNavigator()export default class App extends Component { render() { return (<NavigationContainer><Tab.Navigator><Tab.Screen name="Home" component={HomeStackScreen} /><Tab.Screen name="Favourites" component={FavouriteStackScreen} /></Tab.Navigator></NavigationContainer> ) }
The route parameters are defined in the HomeStackParamList and FavouriteStackParamList types as declared below. These are the same at the moment but they are likely to change hence the need to keep them separate.
export type HomeStackParamList = { Home: undefined Details: { nasaId: string title: string }}export type FavouriteStackParamList = { Favourites: undefined Details: { nasaId: string title: string }}
The navigation prop type being passed into my NasaImageDetails component that forms the screen component 'Details' is defined as below:
export type NasaImageDetailsHomeNavigationProp = StackNavigationProp<HomeStackParamList,'Details'>export type NasaImageDetailsFavouriteNavigationProp = StackNavigationProp<FavouriteStackParamList,'Details'>
I end up with two navigation prop types from the two parameter lists which is not ideal. What are the best practises for this situation in react native typescript?