React Native: How do I type nested navigators properly?

Question

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:

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 root
type TabRoutes = {
  HomeStack: NavigatorScreenParams<HomeRoutes>;
  LibraryStack: NavigatorScreenParams<LibraryRoutes>;
  ...etc.
};

// 3. Then I created interfaces for the props
interface 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.

3. 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 :)

Answer 1

new structure

You should use your bottom navigation only on screens, where is needed. In other put stacks in global stack. It will hide bottom navigation, and give you access to screens from any place in application (if you need of course).

import React from 'react';

import {BottomTabScreenProps} from '@react-navigation/bottom-tabs'
import {CompositeScreenProps} from '@react-navigation/native'
import {StackScreenProps} from '@react-navigation/stack';



type IAuthStack = {
  SignIn: undefined;
  SignUp: undefined;
  ForgetPassword: undefined;
}

type IRootStack = {
  MainBottomTabs: IMainBottomTabs;
  BookDetailScreen: {
    //or you can put your book information
    bookId: string;
  };
  BookSettingsScreen: {
    //or you can put your book information
    bookId: string;
  };
  ProfileSettginsScreen: {
    //or you can put your profile information
    profileId: string;
  };
}

type IMainBottomTabs = {
  Home: undefined;
  Library: undefined;
  Search: undefined;
  Profile: undefined;
}

//Local access to stack
type HomeScreenProps = BottomTabScreenProps<IMainBottomTabs, 'Home'>;
//Access with parent stack
type ProfileScreenProps = CompositeScreenProps<BottomTabScreenProps<IMainBottomTabs, 'Profile'>, StackScreenProps<IRootStack>>;

const HomeScreen:React.FC<HomeScreenProps> = ({navigation}) => {
  const handlePressNavigate = () => navigation.navigate('Library')
  return <></>
}

const ProfileScreen:React.FC<ProfileScreenProps> = ({navigation}) => {
  const handlePressNavigate = () => navigation.navigate('ProfileSettginsScreen')
  return <></>
}