Leaving a stack and going back to a tab doesn't work - NativeStack

Description

I’m trying to get out of a stack and go to a tab, but it has an unexpected behavior

https://user-images.githubusercontent.com/68711690/134956791-d38e60ee-d7e1-4303-95ad-e5c2058af74f.mp4

Application crashes

Expected behavior

The application returns to the start screen normally

Actual behavior

Application does not go back to start screen and there is a jump on start screen

Snack or minimal code example

Router index code example

export function Routes() {
    return (
        <NavigationContainer>
            <Stack />
        </NavigationContainer>
    )
}

BottomTab code example

export function Bottom() {
    return (
        <Navigator
            screenOptions={{
                headerShown: false,
                tabBarShowLabel: false,
                tabBarInactiveTintColor: colors.gray_1,
                tabBarActiveTintColor: colors.blue_1,
                tabBarStyle: {
                    elevation: 0,
                    borderTopWidth: 0,
                    height: 80
                },

            }}
        >
            <Screen
                name="Home"
                component={Home}
                options={{
                    tabBarIcon: ({ color, focused, size }) => (
                        <View style={[styles.container, { backgroundColor: focused ? "rgba(7,85,219,.1)" : "#fff" }]}>
                            <MCI
                                name={focused ? "home-variant" : "home-variant-outline"}
                                size={size}
                                color={color}
                            />
                        </View>
                    )
                }}
            />
        </Navigator>
    )
}

NativeStack code example

import { createNativeStackNavigator } from "@react-navigation/native-stack"

export function Stack() {
    return (
        <Navigator
            screenOptions={{
                headerShown: false,
            }}

        >

            <Screen
                name="Bottom"
                component={Bottom}
            />

            <Screen
                name="Notification"
                component={Notification}
            />
        </Navigator>
    )
}

Code example of the button back

import { useNavigation } from "@react-navigation/core"

export function Header() {
    const navigation = useNavigation()
    return (
         <View>
            <ButtonBack onPress={() => navigation.navigate("Bottom")} />
        </View>
    )
}

Package versions

@react-navigation/native-stack: 6.1.0

• React: 17.0.2
• React Native: 0.65.1
• React Native Screens: 3.7.2

[Ralisson-Mattias]

ok I will create

[WoLewicki]

If you cannot reproduce it in snack, please make a simple repository with the minimal needed code in App.js and we will copy it to our project and test it there. Unfortunately I cannot tell much from just logs. Also, does it happen in normal stack? And if so, does it happen if you provide detachInactiveScreens: false in normal stack?