Why does back button doesn't navigate back to home screen?

Question

I added home stack and recepies stack files but now when navigating from homescreen to view single recipe the back button doesn't work anymore and doesnt navigate back to the homescreen. I am bit lost why the back navigation stopped working

This is my navigation file.

// Stack
import HomeStack from './stacks/HomeStack'
import AuthStack from './stacks/AuthStack'
// Components
import Loading from '../components/loading'
import BottomTabs from './stacks/BottomTabs'

const Navigation = () => {
  const [user, setUser] = useState()
  const [loading, setLoading] = useState(true)
  const [initializing, setInitializing] = useState(true)

  const authChanged = onAuthStateChanged(auth, (user) => {
    setUser(user)
    if (initializing) setInitializing(false)
    setLoading(false)
  })

  useEffect(() => {
    const subscriber = authChanged
    return subscriber
  }, [])

  if (loading) {
    return <Loading />
  }

  const User = auth.currentUser

  return (
    <NavigationContainer>
      {User ? <BottomTabs /> : <AuthStack />}
    </NavigationContainer>
  )
}

export default Navigation

This is my homestack.

const Home = createNativeStackNavigator()

const HomeStack = () => {
  return (
    <Home.Navigator>
      <Home.Screen
        name='Main'
        component={HomeScreen}
        options={{ headerTransparent: true, headerTitle: '' }}
      />
      <Home.Screen
        name='Recipe'
        component={RecipeScreen}
        options={{
          headerTransparent: false,
          headerStyle: {
            backgroundColor: Colors.darkNavy,
          },
          headerTitleStyle: {
            color: Colors.white,
          },
          headerTitleAlign: 'center',
          headerTintColor: Colors.white,
        }}
      />
    </Home.Navigator>
  )
}

Recepies stack.

const Recepies = createNativeStackNavigator()

const RecepiesStack = () => {
  return (
    <Recepies.Navigator >
      <Recepies.Screen
        name='Add recipe'
        component={AddRecipeScreen}
        options={{
          headerTransparent: false,
          headerStyle: {
            backgroundColor: Colors.darkNavy,
          },
          headerTitleStyle: {
            color: Colors.white,
          },
          headerTitleAlign: 'center',
          headerTintColor: Colors.white,
        }}
      />
    </Recepies.Navigator>
  )
}

and my bottomtabs.

const Tab = createBottomTabNavigator()

const BottomTabs = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName

          if (route.name === 'Home') {
            iconName = focused ? 'md-home' : 'md-home-outline'
          } else if (route.name === 'Recepies') {
            iconName = focused ? 'md-book' : 'md-book-outline'
          } else if (route.name === 'Profile') {
            iconName = focused ? 'md-person' : 'md-person-outline'
          }

          // You can return any component that you like here!
          return <Ionicons name={iconName} size={size} color={color} />
        },
        tabBarStyle: {
          backgroundColor: Colors.white,
          borderTopColor: Colors.jacarta,
        },
        tabBarActiveTintColor: Colors.red,
        tabBarInactiveTintColor: Colors.black,
        tabBarLabelStyle: {
          fontSize: 16,
          fontWeight: '600',
        },
        headerTransparent: true,
        headerTitle: '',
        headerTitleAlign: 'center',
      })}
    >
      <Tab.Screen name='Home' component={HomeStack} />
      <Tab.Screen name='Recepies' component={RecepiesStack} />
      <Tab.Screen name='Profile' component={ProfileScreen} />
    </Tab.Navigator>
  )
}

navigation file itself

const Navigation = () => {
  const [user, setUser] = useState()
  const [loading, setLoading] = useState(true)
  const [initializing, setInitializing] = useState(true)

  const authChanged = onAuthStateChanged(auth, (user) => {
    setUser(user)
    if (initializing) setInitializing(false)
    setLoading(false)
  })

  useEffect(() => {
    const subscriber = authChanged
    return subscriber
  }, [])

  if (loading) {
    return <Loading />
  }

  const User = auth.currentUser

  return (
    <NavigationContainer>
      {User ? <BottomTabs /> : <AuthStack />}
    </NavigationContainer>
  )
}

Answer 1

Solution was quite simple. In the bottom tabs navigator I had to change headerShown: true -> headerShown: false and navigation worked again.