I am using the react navigation package. how can i make this bottom tab bar?
I couldn't find how to do it with this bottom tab bar react navigation. Anyone know how to do it in react native?
You can try #react-navigation/bottom-tabs and tabBar props to custom BottomTab:
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
const BottomTab = createBottomTabNavigator();
const BottomMenu = (props) => {
return (
// render your design
)
}
function MyTabs() {
return (
<BottomTab.Navigator tabBar={(props) => <BottomMenu {...props} />}>
<BottomTab.Screen name="Home" component={HomeScreen} />
<BottomTab.Screen name="Settings" component={SettingsScreen} />
</BottomTab.Navigator>
);
}
Related
So Currently i'm using Stack.Navigator with multiple Stack.Group and Stack.Screens
now i want to plug on the bottom of the navigator:
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
But it throws:
Any idea how to fix it?
You need to create a component for the screens with bottom navigation, like this:
const Tab = createBottomTabNavigator();
const TabScreens = () => {
return (
<Tab.Navigator>
<Tab.Screen nome={'home'} component={Home} />
</Tab.Navigator>
);
}
And then, put it into Stack Navigator just like a normal component/screen
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name={'TabScreens'} component={TabScreens} />
</Stack.Navigator>
</NavigationContainer>
Hi I have react native (using expo) navigation 6. I am trying to have Tabs (Bottom) navigation and drawer navigation. I want to have the drawer nav hamburger menu inside the header. As far as I can see its being done having the following
headerLeft: (props) => {
return <Button
title="yes"
onPress={() => navigation.toggleDrawer() } />
}
either inside screenOptions or options (of the Tabs navigation). I kept it in screenOptions as I want it to be visible on all screens. However whatever I tried so far I am always getting an err saying either
undefined is not an object (wenn I pass in an object to screenOption (please see full code below)
or
navigation.ToggleDrawer is not a function - when I pass a function to screenOptions (please see full code below). I cannot find any solution or understand what I am doing wrong. Any help would be great!
const Drawer = createDrawerNavigator();
const DrawerNavigator = () => {
return (
<Drawer.Navigator>
<Drawer.Screen name="Test" component={Test} />
<Drawer.Screen name="s" component={SearchScreen} />
</Drawer.Navigator>
)
}
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator
screenOptions={({ navigation }) => ({ //here I get "undefined is not an object"
headerLeft: (props) => {
return <Button
title="yes"
onPress={() => navigation.toggleDrawer() } />
}
})}
/*screenOptions={{ // here I would get "navigation.ToggleDrawer is not a function"
}}*/
>
<Tab.Screen name="Home" component={HomeScreen}/>
<Tab.Screen name="Tab1" component={Tab1} />
<Tab.Screen name="Tab2" component={Tab2} />
</Tab.Navigator>
);
}
const Navigator = () => {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
)
}
export default Navigator;
With React Navigation 5, I want to open Drawer when I click on bottom tab navigator (I use material bottom navigator).
I manage to create the bottom tabs buttons and click on them, the home page opens for both tabs (GymIndexScreen or FoodIndexScreen).
When I am on the home pages (GymIndexScreen or FoodIndexScreen), I can open the different Drawers with my fingers (GymDrawerNavigator and FoodDrawerNavigator ) : everything works fine.
Question :
I want the drawers to open / close (toggle) automatically when I click the bottom tabs buttons, without having to open them with my fingers.
App.js :
import { NavigationContainer } from '#react-navigation/native'
const App = () => {
return (
<NavigationContainer>
<BottomTabNavigator />
</NavigationContainer>
)
}
BottomTabNavigator.js :
import { createMaterialBottomTabNavigator } from '#react-navigation/material-bottom-tabs'
const Tab = createMaterialBottomTabNavigator()
const BottomTabNavigator = (props) => {
return (
<Tab.Navigator>
<Tab.Screen
name="Gym"
component={GymDrawerNavigator}
options={{
tabBarLabel: "Musculation",
)}
/>
<Tab.Screen
name="Food"
component={FoodDrawerNavigator}
options={{
tabBarLabel: "Alimentation",
)}
/>
</Tab.Navigator>
)
}
GymDrawerNavigator.js :
import { createDrawerNavigator } from '#react-navigation/drawer'
const Drawer = createDrawerNavigator()
const GymDrawerNavigator = () => {
return (
<Drawer.Navigator>
<Drawer.Screen
name="Gym"
component={GymStackNavigator}
/>
</Drawer.Navigator>
)
}
GymStackNavigator.js :
import { createStackNavigator } from '#react-navigation/stack'
const Stack = createStackNavigator()
const GymStackNavigator = () => {
return (
<Stack.Navigator initialRouteName="GymIndex">
<Stack.Screen
name="GymIndex"
component={GymIndexScreen}
}}
/>
<Stack.Screen
name="GymExerciseIndex"
component={GymExerciseIndexScreen}
}}
/>
... list of screens
If I understood your problem correctly you want to open the drawer automatically when you navigate to the screen?
Add this to the screen components you wish to open the drawer when navigated to.
import {useEffect} from 'react'
...
useEffect(()=>{
navigation.addListener('focus', () => {
// when screen is focused (navigated to)
navigation.openDrawer();
});
},[navigation])``
This answer helped me.
Just use the listeners prop to preventDefault behaviour and then open the drawer.
<Tabs.Screen
name={"More"}
listeners={({ navigation }) => ({
tabPress: e => {
e.preventDefault();
navigation.openDrawer();
}
})}
component={Home}
/>
Code is working just fine. All I want to know is if this is the correct way of doing it.
I want tabs based on values in array so I did this:
import React from "react";
import { createMaterialTopTabNavigator } from "#react-navigation/material-top-tabs";
const Tab = createMaterialTopTabNavigator();
function ProductListNavigator({ route }) {
const { subCategories, selectedSubcategory } = route.params;
return (
<Tab.Navigator
lazy={true}
lazyPreloadDistance={3}
>
{subCategories.map((subCategory) => (
<Tab.Screen
key={subCategory.id}
name={subCategory.name}
component={AppProductList}
options={{ tabBarLabel: subCategory.name }}
initialParams={{ subCategory }}
/>
))}
</Tab.Navigator>
);
}
export default ProductListNavigator;
Is this going to be inefficient? Or is there a better way of doing it?
I am using React navigation v5
I am updating my code to use the react-navigation 5.x, but I don't know how to implement the stack navigation with a bottom tab navigator in this version. I use the bottom tab navigator only on the screens that appear after the user logs in. On the initial screen, there is only navigation with custom buttons. My problem is I don't know how to create the route to that necessity I have. I've been looking for a code example, but I only found codes that use the bottom tab navigator alone. Could you please give me an example of code I can use? I would appreciate it
I have this piece of code that is what I have working right now
import React from 'react'
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
import Login from '../screens/Login'
import Register from '../screens/Register'
import Main from '../screens/Main'
import Ex1 from '../screens/Ex1'
import Ex2 from '../screens/Ex2'
const AuthStack = createStackNavigator();
const AuthStackScreen = () => (
<NavigationContainer>
<AuthStack.Navigator
initialRouteName="Login"
screenOptions={{
headerShown: false
}}>
<AuthStack.Screen
name="Login"
component={Login}
/>
<AuthStack.Screen
name="Register"
component={Register}
/>
</AuthStack.Navigator>
</NavigationContainer>
);
export default AuthStackScreen
you can do somethin like this:
export default function ComponentC() {
return(
<View>
<Text>It Works!</Text>
</View>
)
}
export default function ComponentB() {
return (
<Stack.Navigator initialRouteName={'Main'}>
<Stack.Screen name={'Main'} component={ComponentC} />
</Stack.Navigator>
);
}
export default function ComponentA () {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName={'ComponentB'}
>
<Tab.Screen name={'ComponentB'} component={ComponentB} options={{ tabBarIcon: ({color}) => (
<FontAwesome5 color={color} name={'check-square'} size={20}/>
)}} />
</Tab.Navigator>
</NavigationContainer>
);
}
The Component B going to be called in the Bottom Tab Navigator and the initial route is gonna be the Component C.