Achieving the Desired Screen Layout
To create a screen layout with two menus, one being the burger menu generated using createDrawerNavigator from react-navigation (located in the top left corner) and the other menu as a bottom button created by createBottomTabNavigator, I have encountered some challenges.
Although having two menus might not be the ideal UI choice, it is a requirement set by my company. Additionally, both menus share at least one common entry point which is the homepage.
https://i.sstatic.net/L85Yu.png https://i.sstatic.net/iGzD0.png
Attempts Made So Far
In my quest to achieve this layout, I came across a related question on Stack Overflow that provided some insight but did not fully address my specific requirements.
I experimented with various hierarchical structures without success in meeting the desired goal.
Subsequently, unable to navigate to certain routes like 'cart' and 'search' on my screen due to undefined routes within the navigation system provided by react-navigation.
This led me to customize the bottom menu myself, which seems to be working well, albeit missing key navigable routes.
It appears that react-navigation utilizes its components to define routes.
The Question at Hand
How can I incorporate additional routes into the navigation system for seamless navigation?
I've tried:
Specifying an initialState for the
<NavigationContainer>but to no avail.Creating a custom router to override the
getInitialStatemethod, yet struggling to integrate my custom router thereafter!
Any assistance or guidance on this matter would be greatly appreciated.
Edit:
The navigation code
// src/menu/burger/drawer.js
import { createDrawerNavigator } from '@react-navigation/drawer';
import { useTranslation } from 'react-i18next';
import Ionicons from '@expo/vector-icons/Ionicons';
import React from 'react';
import Account from '../../pages/account';
import Brands from '../../pages/brands';
import Cart from '../../pages/cart';
import Homepage from '../../pages/homepage';
import {
ACCOUNT,
BRANDS,
CART,
HOMEPAGE,
} from '../../pages/pageIdentifiers';
const Drawer = createDrawerNavigator();
const renderMenuIcon = (iconName, size, focused) => (
<Ionicons
name={iconName}
size={size}
color={focused ? '#7cc' : '#ccc'}
/>
);
// This component render the items of the burger menu displayed in the top left corner
export default function MenuDrawer() {
const { t } = useTranslation();
return (
<Drawer.Navigator
initialRouteName={HOMEPAGE}
>
<Drawer.Screen
name={HOMEPAGE}
component={Homepage}
options={{
title: t('menu.item.homepage'),
drawerIcon: ({ focused, size }) => renderMenuIcon('md-home', size, focused),
}}
/>
<Drawer.Screen
name={CART}
component={Cart}
options={{
title: t('menu.item.cart'),
drawerIcon: ({ focused, size }) => renderMenuIcon('cart-outline', size, focused),
}}
/>
<Drawer.Screen
name={ACCOUNT}
component={Account}
options={{
title: t('menu.item.account'),
drawerIcon: ({ focused, size }) => renderMenuIcon('person-outline', size, focused),
}}
/>
<Drawer.Screen
name={BRANDS}
component={Brands}
options={{
title: t('menu.item.brands'),
drawerIcon: ({ focused, size }) => renderMenuIcon('basket-outline', size, focused),
}}
/>
</Drawer.Navigator>
);
}
// App.js
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<MenuDrawer />
<BottomTabsMenu />
</Stack.Navigator>
</NavigationContainer>
);
}
// src/menu/bottomTabs/drawer.js
export default function BottomTabsMenu() {
const [activeTab, setActiveTab] = useState(HOMEPAGE);
const navigation = useNavigation();
const onMenuPress = (id) => {
navigation.navigate(id);
setActiveTab(id);
};
return (
<View style={styles.container}>
{bottomMenuItems.map(
(menuItem) => (
<View
key={`view-${menuItem.id}`}
style={styles.item}
>
<MenuItem
key={`menu-${menuItem.id}`}
isFocus={menuItem.id === activeTab}
onPress={(id) => onMenuPress(id)}
configuration={menuItem}
/>
</View>
)
)}
</View>
);
}