Jak wykonać nawigowanie pomiędzy zakładkami?

Cześć mam problem z ustawieniem React Navigation w react native. Za nic to nie działa jak powinno. Może ktoś ma z tym doświadczenie i jest w stanie pomóc?

Moja aplikacja ma na dole menu do klikania tak jak np. instagram czyli bottomTabNavigator

Każdy przycisk zakładki (ATab, BTab) to stack z wielowa screenami -> createStackNavigator.

Mam potrzebę nawigowania się pomiędzy zakładkami (tabs). Czyli żeby z zakładki A przejść do określonego widoku zakładki B. I potem jeszcze wrócić do widoku który wywołał widok w zakładce B.

Nawigowane do określonego widoku z innej zakładki mi działa. Ale jeżeli to zrobię to w aplikacji dzieją się bardzo dziwne rzeczy.

Opisze swój przypadek.

1. Nawiguje z zakładki A (ATab) do określonego widoku (WIDOK XXX) zakładki B (BTab).
2. Klikam na zakładkę B - pokazuje się initial route - czyli tak jak powinno
3. Klikam znowu na zakładkę A, i zaraz potem kilkam znowu na zakłdkę B - powinno przejść do głównego widoku dla zakładki B tak jak przed chwilą, ale pokazuje się WIDOK XXX. Klikam jeszcze raz na zakładkę B pokazuje się dobry widok.
4. Naciskam znowu na zakładkę A, wracam do zakładki B i znowu widze WIDOK XXX zamiast widoku głównego (initial route name) dla tej zakładki.

Po przejścu z zakładki A do określonego widoku (WIDOK XXX) zakładki B i naciśnięcie przycisku zamknij w widoku XXX, za którym kryje się goBack() powdouje, że jestem przekierowany do initial route zakładki B zamiast do widoku A (z którego miała miejsce nawigacja).

Nie wiem jak sobie z tym poradzić. U mnie każdy stackNavigator ma unikalne widoki. Czyli każdy bottom tab navigator ma unikalne widoki.

Na internecie znalazłem, że niektórzy robią jakieś shared routes z widokami i wstrzykują te routes do wszystkich stacków które z tych widoków korzystają. Nie wiem czy mi to zadziała ale mi się to nie podoba i nie wierze, że w 2023 roku nie można normalnie ogarnąć nawigacji w react native, zwłaszcza, że to nie jest jakiś przypadek z kosmosu.

Próbowałem bawić się z backBehavior="" ale nie naprawia to mojego problemu

Ustawiłem też w NavigationContainer independent={true}

Może ktoś wie jak to powinienem zrobić ? W czym jest problem? Z góry dzięki za pomoc!

Ustawienia Bottom Tab Navigator:

export default function TabScreen() {

const Tab = createBottomTabNavigator();

return (
<Tab.Navigator initialRouteName={'ATab'} backBehavior="history" screenOptions={{ headerShown: false }}>
    <Tab.Screen name="ATab" component={AStackScreens} options={{ unmountOnBlur: true, tabBarShowLabel: false, tabBarButton:
        CustomTabDayButton }} />
    <Tab.Screen name="BTab" component={BStackScreens} options={{ unmountOnBlur: true, tabBarShowLabel: false, tabBarButton:
        CustomTabDayButton }} />
</Tab.Navigator>
)
}

Ustawienia stack navigator:

const AStack = createStackNavigator<AStackParamList>();
    export const BStackScreens = () => (
        <AStack.Navigator initialRouteName="Main">
            <AStack.Screen
                name="Main"
                component={MainScreen}
                options={{ animationEnabled: true, headerShown: false, headerLeft: () => <></> }}
            />
            <AStack.Screen
                name="XXX"
                component={XXXScreen}
                options={{ animationEnabled: true, headerShown: false, headerLeft: () => <></> }}
            />
        </AStack.Navigator>
    )

Nawigacja do zakładki B z zakładki A

navigateToTabB = () => {
    navaigation.navigate('BTab',
    {
        screen: 'XXX',
        initial: false
    })
}

Jakby ktoś miał podobny problem to ja użyłem tego podejścia z shared stack screens (znalazłem w dyskusji na github). Nie jest idealne ale wszystko działa.

Coś takiego

export const getAddTaskStackScreen = (Stack: ReturnType<typeof createStackNavigator<any>>) => {
    return [
        <Stack.Screen
            key="AddTask"
            name="AddTask"
            component={AddTaskScreen}
        />
    ]
}

// ========

const MyStack = createStackNavigator<any>();

const addTaskStackScreen = getAddTaskStackScreen(MyStack);

    <MyStack.Navigator>
        {addTaskStackScreen}
        // inne ekrany
        />
    </MyStack.Navigator>