'Twitter like drawer in react navigator using nested drawer and tab navigator
I want to achieve twitter like tab and drawer navigation, where there is a bottom tab bar in the home page and a drawer on the side. However, in twitter when clicking on the left drawer, it opens a page with the left drawer disabled and instead the page will have a back navigation that leads to the home page. This is the behavior I want, and how can I achieve that? (I don't want bottom tab in any of the page I opened from the side drawer, different from twitter)
Following is my code:
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
function Home() {
const { signOut } = useAuth();
return (
<Tab.Navigator screenOptions={{ headerShown: false }}>
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Chat" component={Chat} />
</Tab.Navigator>
);
}
function DrawerHome() {
return (
<Drawer.Navigator>
<Drawer.Screen
name="Start"
component={Home}
options={({ route }) => ({
headerTitle: getHeaderTitle(route),
})}
/>
<Drawer.Screen name="Friends" component={FriendsList} />
</Drawer.Navigator>
);
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
