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

React Navigation: How do I type nested navigators properly?

$
0
0

Situation:

As you can probably tell, I'm currently building an AudioBook player (how creative /s). It's my first bigger project for both react-native and typescript and I'm struggling a bit when it comes to properly typing navigation. To start: here's a quick overview:

enter image description here

Questions/Problems:

  1. It feels like I'm using too many nested navigators, but since I don't have any experience it's hard to judge. What do you think? And if I'm using too many, how should I restructure? (the docu mentions groups, but I don't see how that could be implemented here)
  2. How do I properly type my components? The way I did it so far is as follows (bottom-up perspective for the LibraryStack):
// 1. I created a type for the Screen routes (including the passed down props)type LibraryRoutes = {  Library: undefined;  BookDetails: { album: Album };  BookSettings: { album: Album };};// 2. A type for the different Routes (using NavigatorScreenParams, but I'm not sure I use them correctly)// This then goes up the same way up to the roottype TabRoutes = {  HomeStack: NavigatorScreenParams<HomeRoutes>;  LibraryStack: NavigatorScreenParams<LibraryRoutes>;  ...etc.};// 3. Then I created interfaces for the propsinterface TabNavProps<RouteName extends keyof TabRoutes> {  navigation: BottomTabNavigationProp<TabRoutes, RouteName>;  route: RouteProp<TabRoutes, RouteName>;}

This is where my struggles really start because I'm constantly running into errors when I try to navigate between different stacks. I tried to solve the issue by implementing CompositeScreenProps but I still have type-erros and navigation dead-ends all the time.

// Example for a CompositeScreenProp:type LibraryProps = CompositeScreenProps<  StackScreenProps<LibraryRoutes, "BookSettings">,  CompositeScreenProps<    StackScreenProps<AudioRoutes, "AudioPlayer">,    BottomTabScreenProps<TabRoutes>>>;

Can you help me make these pieces fit together? I watched videos and read the docu multiple times, but it feels like I'm only copying without really understanding and it always ends with errors.

  1. My last question is a bit more high-level: Where do I actually put these different prop-files? Is it better practice to create them in the component that uses it or should I build a centralized file that just has all types/interfaces relevant for navigation?

Anyway, thanks for reading this super long text. I thought it might help if I show actual examples of what I'm struggling with, so I hope it did :)


Viewing all articles
Browse latest Browse all 6287

Trending Articles



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