These are the imports I have on my 'Navigation.js'.
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
I have started to search through the documents and came across the Nesting Navigators portion. I was wondering if there is any way to nest a drawer navigator into the Tab.Navigator or into the actual 'screenname.js'; I have had trouble finding examples of this as my navigator is a tab and not a stack. I'll continue working and reading but I'm thankful for any insight.
export default function RootNavigation() {
const Tab = createBottomTabNavigator();
<NavigationContainer>
<Tab.Navigator
initialRouteName="Home" screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused
? 'funnel-outline'
: 'funnel';
} else if (route.name === 'ASYNCH') {
iconName = focused ? 'scan' : 'scan-outline';
} else if (route.name === 'Config') {
iconName = focused ? 'earth-outline' : 'earth';
} else if (route.name === 'Search') {
iconName = focused ? 'terminal' : 'terminal-outline';
} else if (route.name === 'status') {
iconName = focused ? 'code-slash' : 'code-slash-outline';
}
return <Ionicons name={iconName} size={size} color={color} />;
},
tabBarActiveTintColor: '#000000',
tabBarInactiveTintColor: '#000000',
headerShown: false,
})}>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="ASYNCH" component={sc2} />
<Tab.Screen name="Config" component={sc3} />
<Tab.Screen name="Search" component={Search} />
<Tab.Screen name="status" component={statusbar} />
</Tab.Navigator>
</NavigationContainer>