```javascript
import { useContext } from "react";
import Text from "@kaloraat/react-native-text";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Button } from "react-native";
import { AuthContext } from "./context/auth";
// screens
// import Home from "./pages/Home";
import Register from "./pages/Register";
import Login from "./pages/Login";

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

export default function App() {
  const [auth, setAuth] = useContext(AuthContext);
  const authenticated = auth?.token !== "" && auth?.user !== null;

  const logout = async () => {
    setAuth({ user: null, token: "" });
    await AsyncStorage.removeItem("@auth");
  };

  const Feed = () => {
    return <Text>Feed</Text>;
  };
  const Messages = () => {
    return <Text>Messages</Text>;
  };

  function Home() {
    return (
      <Tab.Navigator>
        <Tab.Screen name="Feed" component={Feed} />
        <Tab.Screen name="Messages" component={Messages} />
      </Tab.Navigator>
    );
  }

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Register">
        {authenticated ? (
          <>
            <Stack.Screen
              name="Home"
              component={Home}
              options={{
                headerShown: false,
                headerTitle: "Tasker",
                headerRight: () => (
                  <Button onPress={logout} title="Logout" color="#333" />
                ),
              }}
            />
          </>
        ) : (
          <>
            <Stack.Screen
              name="Login"
              component={Login}
              options={{ headerShown: false }}
            />

            <Stack.Screen
              name="Register"
              component={Register}
              options={{ headerShown: false }}
            />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}
```

\


How to use both stack navigator and bottom tab navigator in react native

Fullstack JavaScript React Node Courses on Udemy