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:
Questions/Problems:
- 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)
- 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.
- 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 :)