in my app home screen I want to custom the header to have two icons in left and right which can be done using:
<HomeStack.Screen
name="Home"
component={HomeScreen}
options={{
title: '',
headerLeft: () => (
<View style={{ marginLeft: 10 }}>
<Icon.Button
name="ios-menu"
size={25}
color="#000000"
backgroundColor={COLORS.primary}
onPress={() => navigation.openDrawer()}
/>
</View>
),
headerRight: () => (
<View style={{ marginLeft: 10 }}>
<Icon.Button
name="location-outline"
size={25}
color="#000000"
backgroundColor={COLORS.primary}
onPress={() => navigation.openMap()}
/>
</View>
),
}} />
</HomeStack.Navigator>
I want to add additional but to be in the center which will be customized based on my needs, but I have no idea how to implement that as there is nothing called headerCneter:
Perhaps you can take advantage of the header option inside the stack navigator? You can then use the route params to customize your header from there.
You can pass react component in headerTitle:
<HomeStack.Screen
name="Home"
component={HomeScreen}
options={{
headerTitle: () => {
return (
<View style={st.horizontalRow}>
<LeftIcon />
<TextInput
placeholder="search"
/>
<RightIcon />
</View>
);
},
headerTitleAlign: 'left',
headerTitleContainerStyle: {
left: 40,
right: 0,
},
}} />
Related
I'm using the react native drawer navigator v6 and I would like to reduce the space between the items and also the space between icon and label, see screenshot:
Does somebody know how?
Thanks!
My custom drawer:
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView
{...props}
contentContainerStyle={{ paddingTop: 0 }}
>
<View style={styles.logo}>
<Image source={require("../assets/images/logo.png")} />
</View>
<DrawerItemList {...props} style={{ paddingTop: 0, marginTop: 0 }} />
</DrawerContentScrollView>
);
}
And my drawer navigator:
<Drawer.Navigator
drawerContent={(props) => <CustomDrawerContent {...props} />}
screenOptions={{
gestureEnabled: true,
headerTitleAlign: "center",
headerStyle: {
backgroundColor: "#82bf4e",
borderBottomWidth: 0.5,
shadowColor: "transparent",
borderBottomColor: "#75ad46",
},
headerTitleStyle: {
fontSize: 18,
},
headerTintColor: "#fff",
headerLeft: () => <BackButton />,
}}
>
<Drawer.Screen
name="Home"
component={HomeScreen}
options={{
header: () => <HeaderContainer />,
drawerItemStyle: { display: "none" },
}}
/>
<Drawer.Screen
name="Mein Team"
component={TeamScreen}
options={{
headerTitle: "Mein Team",
drawerIcon: () => <AntDesign size={20} name="team" />,
}}
/>
...
</Drawer.Navigator>
You can create custom navigator using
<Drawer.Navigator drawerContent={(props) => <CustomDrawerContent {...props} />}>
{/* screens */}
</Drawer.Navigator>
Adjust the spacing as you want.
I have a project with a Stack and bottomTab navigator and I want to redirect to a stack navigator page from the bottomTabNavigator
Here is the code for my project:
Routes.js i.e Stack Navigator
<UserContext.Provider value={{userDetails, setUserDetails}}>
<Stack.Navigator
headerMode="screen"
screenOptions={{
header: ({scene, previous, navigation}) => {
const {options} = scene.descriptor;
const title =
options.headerTitle !== undefined
? options.headerTitle
: options.title !== undefined
? options.title
: scene.route.name;
return <Header title={title} />;
},
}}>
{userDetails ? (
<>
<Stack.Screen
name="home"
options={{title: 'Home'}}
component={BottomTabNavigator}
/>
<Stack.Screen
name="library"
component={Library}
options={() => ({
headerTitle: 'My Library',
})}
/>
<Stack.Screen
name="bookDetails"
component={BookDetails}
options={{title: 'Book Details'}}
/>
<Stack.Screen
name="reviews"
component={AllReviews}
options={{headerTitle: 'View all Reviews'}}
/>
</>
) : (
<Stack.Screen name="Login" component={Login} />
)}
</Stack.Navigator>
</UserContext.Provider>
bottomTabNavigator.js:
<Tab.Navigator
tabBarOptions={{activeTintColor: 'green', style: {height: tabBarHeight}}}>
<Tab.Screen
name={'Home'}
component={Home}
options={{
tabBarIcon: ({color}) => (
<AntDesign name="home" size={27} color={color} />
),
}}
/>
<Tab.Screen
name={'Search'}
component={Home}
options={{
tabBarIcon: ({color}) => (
<AntDesign name="search1" size={25} color={color} />
),
}}
/>
<Tab.Screen
name={'My Library'}
component={Library}
options={{
tabBarIcon: ({color}) => {
return (
<View
style={{
position: 'absolute',
bottom: 7,
height: 65,
width: 65,
borderRadius: 65,
backgroundColor: 'green',
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 5,
},
shadowOpacity: 0.37,
shadowRadius: 7.49,
elevation: 12,
}}>
<AntDesign name="book" size={40} color={'white'} />
</View>
);
},
}}
/>
<Tab.Screen
name={'Browse'}
component={Home}
options={{
tabBarIcon: ({color}) => (
<AntDesign name="earth" size={25} color={color} />
),
}}
/>
<Tab.Screen
name={'More'}
component={More}
options={{
tabBarIcon: ({color}) => (
<Feather name="more-horizontal" size={30} color={color} />
),
}}
/>
</Tab.Navigator>
What I want to do is when I tap on My Library in the tabNavigator the headerTitle still says home, I want it to say ""
Here is how I tried to achieve this:
useLayoutEffect(() => {
navigation.setOptions({headerTitle: 'My Library'});
}, [navigation, route]);
Any help is appreciated
Thanks
I tried doing it automatically but I couldn't figure it out, but what I did was use my custom header component on each screen and hardcode the title of the screen, so the process may not be as efficient as letting react navigation do all the work, but it works fine for me
One workaround you can use is to hide the header in the Home Component of your Stack navigator. You can then create custom headers for each of the tab screens.
Im stuck with navigation in Navigation Drawer
my partner did this part of the code and he added DrawerItem(Which will be seen to every user(Admin/client)
i cant figure out how to navigate with it. i tried navigation.navigate("") and its not working
<DrawerItem
label="הגדרות"
style={{
position: "absolute",
bottom: 0,
right: 0,
left: 0,
marginBottom: 60,
borderTopColor: "#afafaf",
borderTopWidth: 3,
}}
onPress={() => logOut()} //Here i need to navigate to the page "aboutUs"
icon={({ color, size }) => (
<MaterialIcons name="settings" color={color} size={size} />
)}
/>
About us stack screen:
const Stack = createStackNavigator();
const aboutStack = ({ navigation }) => {
return (
<Stack.Navigator
initialRouteName={"Aboutus"}
screenOptions={{
headerLeft: () => (
<SimpleLineIcons
name="menu"
style={{ marginLeft: 20 }}
size={24}
color="black"
onPress={() => navigation.toggleDrawer()}
/>
),
}}
>
<Stack.Screen
name="קצת עלינו"
component={Aboutus}
options={{ headerTitleAlign: "center" }}
/>
</Stack.Navigator>
);
};
export default aboutStack;
You can use the props that are passed to the custom drawer and navigate using the name of the screen like below.
onPress={() => props.navigaton.navigate("קצת עלינו")}
I want to show label on left and drawerIcon on right but unable figure out how.
Here is code
<Drawer.Navigator
drawerContentOptions={{
contentContainerStyle: {
backgroundColor: Colors.primary,
height: "100%"
},
labelStyle: { color: "white" }
}}
>
<Drawer.Screen
name="HomeScreen"
component={Home}
options={{ drawerLabel: "Home" }}
/>
<Drawer.Screen
name="Channels"
component={Channels}
options={{
drawerIcon: () => (
<AntDesign
name="pluscircle"
size={20}
color="white"
/>
)
}}
/>
</Drawer.Navigator>
I would like to show "Channels" on left side and plus icon on right side
on your icon, style it with
style={{
alignSelf: "center",
position: "absolute",
right: 5,
}}
so your AntDesign will be like this
<AntDesign
style={{
alignSelf: "center",
position: "absolute",
right: 5,
}}
name="pluscircle"
size={20}
color="white"
/>
try with headerLeft and headerRight
headerLeft: () => (
<Icon
style={{padding: 10}}
onPress={() => {
consol.log("on press}}
color={'white'}
name="menu"
size={30}
/>
<Drawer.Navigator
drawerPosition="right"
drawerType="slide"
initialRouteName="Home"
drawerContent={() => <SideBar />}>
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="NewIndex" component={NewIndex} />
</Drawer.Navigator>
I have created a new react-native app using expo and using the tab-bar template. This creates a new app which contains a stack navigator which in turn contains a tab navigator. Pretty much as they explain in Nesting navigators.
So it looks like this:
Stack.Navigator
Tab (Tab.Navigator)
Search (Screen)
Chat (Screen)
Visitors (Screen)
Settings (Screen)
What I want to do is to add buttons to the header bar, but depending on what tab is active, I want to have different buttons. E.g. when on the Search-Screen, I need a "filter-button". When on Chat-Screen, I need a "new message button".
How can I do this? So far I only found out how to add buttons to the header which are then displayed on all screens:
From App.js:
<NavigationContainer ref={containerRef} initialState={initialNavigationState}>
<Stack.Navigator>
<Stack.Screen
name="Suche"
component={BottomTabNavigator}
options={{
headerStyle: {
backgroundColor: '#2270b9'
},
headerTitleStyle: {
color: 'white'
},
headerRight: () => (
<View style={{ flex: 1, flexDirection: 'row' }}>
<Ionicons
style={{ color: 'white', marginRight: 15, marginTop: 5 }}
size={32}
onPress={() => alert('This is a button!')}
name="md-settings"
backgroundColor="#CCC"
/>
</View>
),
}}
/>
</Stack.Navigator>
</NavigationContainer>
However I fail to find any way to add this to the individual screens of the BottomTabNavigator instead.
When I try to add the same to the BottomTabNavigator's screens, like so:
<BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
<BottomTab.Screen
name="Suche"
component={Search}
options={{
title: 'Suche',
tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="md-search" />,
headerRight: () => (
<View style={{ flex: 1, flexDirection: 'row' }}>
<Ionicons
style={{ color: 'white', marginRight: 15, marginTop: 5 }}
size={32}
onPress={() => alert('This is a button!')}
name="md-settings"
backgroundColor="#CCC"
/>
</View>
),
}}
/>
// more screens
</BottomTab.Navigator>
Just nothing happens.
How can I do this?