Problem with nested navigation

[uwemneku]

Due to the navigation structure of the app, there's is an issue when users navigate from the root navigator into the sharedElementNavigator which is nested inside the bottom tab navigation.

Navigation Structure

export type RootParamList = {
    main: NavigatorScreenParams<BottomTabParamList>
    search: undefined
}
export type BottomTabParamList = {
    BottomTabHome: NavigatorScreenParams<SharedScreenParamList>
    Settings: undefined;
    Cart: undefined;
    Bookmarks: undefined;
}
export type SharedScreenParamList = {
    bookDetails: StoredMovies
    Home: undefined;
}

When users navigate from "bookmarks" to "bookDetails" screen, the app has to first navigate to the bottom tabs and then navigate to the shared screens. Therefore the navigation array will be

//because bookDetails is nested inside BottomTabHome
const navigationState = ["bookmarks", "BottomTabHome", "bookDetails"]

This means that when users navigate backward, instead of mounting the bookDetails screen, it moves back to the bottom tab navigator and when we press the back button again we are returned to the bookmarks screen