Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6214

Navigation Structure on React Native Typescript for Duplicate Page

$
0
0

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?


Viewing all articles
Browse latest Browse all 6214

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>