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("קצת עלינו")}
Related
I have a requirement of showing a app header with hamburger icon on left , and dropDown Selection in middle , and icon on the right side and below this , I'm showing a search bar . All these has to be added in the header part. below the searchView basically ,I have a list . How can we create the custom header like that?
samplecode:
const Drawer = createDrawerNavigator();
function MyDrawer({ navigation }) {
return (
<Drawer.Navigator
initialRouteName='HomeScreen'
screenOptions={{
headerTitle: (props) => <HeaderComp {...props} />,
headerStyle: {
backgroundColor: '#051E42', //Set Header color
height: 100,
elevation: 15,
shadowColor: '#000'
},
headerRight: () => (
<TouchableOpacity style={{marginRight:10}}>
<Image style={{ height: 30, width: 30, resizeMode: 'contain' }}
source={require('./assets/cart_img.png')}
// source={{ uri: 'asset:/images/cart_img.png' }}
/>
</TouchableOpacity>
),
headerTintColor: 'white'
}}
>
<Drawer.Screen name="HomeScreen"
component={HomeScreen}
/>
<Drawer.Screen name="Profile" component={ProfileScreen} />
<Drawer.Screen name="Settings" component={Settings} />
</Drawer.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyDrawer />
</NavigationContainer>
);
}
Header Component:
const HeaderComp = () => {
const [searchValue, setValue] = useState('');
return (
<View >
<Text style={style.headerTitle}>Custom Header</Text>
{/* <Text style={{top:20}}>dsfskdfsfdjhsfjhs</Text> */}
</View>
)
}
const style = StyleSheet.create({
headerTitle: {
fontWeight: 'bold',
alignItems: 'center',
color: 'white',
left: 60
}
})
export default HeaderComp;
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,
},
}} />
I'm using react navigation 5 to build my app navigation system.
I want to add a link to open Notifications scree:
I created a RenderHeaderRight component to override the right component of all my stacks
navigation :
const RenderHeaderRight = ({navigation}) => {
return (
<View style={{flexDirection: 'row-reverse'}}>
<TouchableHighlight
underlayColor={COLORS.DEFAULT}
style={styles.iConMenuContainer}
onPress={() => navigation.openDrawer()}>
<Image source={menu} style={styles.iConMenu} />
</TouchableHighlight>
<TouchableHighlight
underlayColor={COLORS.DEFAULT}
style={styles.notificationsIconContainer}
onPress={() => navigation.navigate('Notifications')}>
<>
<Image source={notifications} style={styles.notificationsIcon} />
<Image source={notifMark} style={styles.badge} />
</>
</TouchableHighlight>
</View>
);
};
In my HomeStackScreen i'm using the RenderHeaderRight :
const HomeStackScreen = ({navigation}) => (
<HomeStack.Navigator
initialRouteName="Home"
headerMode="screen"
mode="modal"
screenOptions={{
headerStyle: {
backgroundColor: COLORS.WHITE,
elevation: 0, // remove shadow on Android
shadowOpacity: 0, // remove shadow on iOS
borderBottomWidth: 0,
},
headerTintColor: COLORS.GREY,
headerTitleStyle: {
fontFamily: 'Montserrat-SemiBold',
fontWeight: '600',
fontSize: 18,
},
}}>
<HomeStack.Screen
name="Home"
component={Home}
options={{
title: 'Expanded',
headerLeft: () => <RenderHeaderLeft />,
headerRight: () => <RenderHeaderRight navigation={navigation} />,
headerTitleAlign: 'left',
}}
/>
<HomeStack.Screen name="HomeDetails" component={HomeDetails} />
</HomeStack.Navigator>
);
When i click on the Header right button to open the Notifications screen i got an error :
The action 'NAVIGATE' with payload {"name":"Notifications"} was not handled by any navigator.
Where shoud i create the stack navigation of Notifications screen ?
I triend to add the notifications like this :
const HomeStackScreen = ({navigation}) => (
<HomeStack.Navigator
initialRouteName="Home"
headerMode="screen"
mode="modal"
screenOptions={{
headerStyle: {
backgroundColor: COLORS.WHITE,
elevation: 0, // remove shadow on Android
shadowOpacity: 0, // remove shadow on iOS
borderBottomWidth: 0,
},
headerTintColor: COLORS.GREY,
headerTitleStyle: {
fontFamily: 'Montserrat-SemiBold',
fontWeight: '600',
fontSize: 18,
},
}}>
<HomeStack.Screen
name="Home"
component={Home}
options={{
title: 'Expanded',
headerLeft: () => <RenderHeaderLeft />,
headerRight: () => <RenderHeaderRight navigation={navigation} />,
headerTitleAlign: 'left',
}}
/>
<HomeStack.Screen name="HomeDetails" component={HomeDetails} />
<HomeStack.Screen
name="Notifications". // add the screen here
component={Notifications}
options={{headerShown: false}}
/>
</HomeStack.Navigator>
);
Removed the unnecessary styling / images
From my understanding you need to have a root Drawer.Navigator and from inside your Home screen, you need a Stack.Navigator there
This article explains the details of combining react-native-navigators
import React from "react"
import { TouchableHighlight, View, Text } from "react-native"
import { NavigationContainer } from "#react-navigation/native"
import { createDrawerNavigator } from "#react-navigation/drawer"
import { createStackNavigator } from "#react-navigation/stack"
const RenderHeaderRight = ({ navigation }) => {
return (
<View style={{ flexDirection: "row-reverse" }}>
<TouchableHighlight onPress={() => navigation.openDrawer()}>
<View>
<Text>Menu</Text>
</View>
</TouchableHighlight>
<TouchableHighlight onPress={() => navigation.navigate("Notifications")}>
<>
<View>
<Text>Image 1</Text>
</View>
<View>
<Text>Image 2</Text>
</View>
</>
</TouchableHighlight>
</View>
)
}
const Stack = createStackNavigator()
const Drawer = createDrawerNavigator()
const Notifications = () => (
<View>
<Text>Notifications</Text>
</View>
)
const Home = () => (
<View>
<Text>Home</Text>
</View>
)
const NotificationsScreen = () => (
<View>
<Text>Notifications Screen</Text>
</View>
)
const HomeScreen = () => (
<View>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
options={({ navigation }) => ({
title: "Home",
headerRight: () => <RenderHeaderRight navigation={navigation} />,
})}
navigationOptions={({ navigation }) => ({
headerTitleAlign: "left",
})}
/>
<Stack.Screen name="Notifications" component={Notifications} />
</Stack.Navigator>
</View>
)
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
</NavigationContainer>
)
}
i am working on a react native 0.62 in which i have implemented drawer navigator. As per the documentation, i have properly added activeBackgroundColor, activeTintColor etc but as per the company's requirement, when the menu is active i wanted to add borderLeftColor also with activeBackgroundColor. i have tried using style property but it didn't work for me.
Mock Up:
My Current UI:
MainNavigator.js
<Drawer.Navigator initialRouteName="Dashboard" drawerContent={(props) => <DrawerContent {...props} />} hideStatusBar={false} focused={true} labelStyle={{ fontSize: 14, fontFamily: 'OpenSans-SemiBold' }} drawerContentOptions={{ activeBackgroundColor: "#F1F1F1", activeTintColor: "#000000", inactiveTintColor: "#818181",itemStyle: { marginLeft:0, paddingHorizontal: 10, width:'100%', borderRadius: 0}}} indicatorStyle={{
borderBottomWidth: 2,
borderBottomColor: 'red',
}}
>
<Drawer.Screen name="Dashboard" component={DashboardStackScreen} options={{
drawerIcon: ({ focused, size }) => (
<Image source={require('../assets/images/dashboard.png')} style={{ height: 17.78, width: 16}} resizeMode="contain"/>
),
}}
/>
<Drawer.Screen name="My Profile" component={MyProfileStackScreen} options={{
drawerIcon: ({ focused, size }) => (
<Image source={require('../assets/images/profile.png')} style={{ height: 16, width: 16 }} resizeMode="contain"/>
),
}} />
</Drawer.Navigator >
DrawerContent.js
<DrawerContentScrollView {...props} >
<DrawerItemList {...props}
/>
<DrawerItem
labelStyle={{ fontSize: 14, fontFamily: 'OpenSans-SemiBold' }} activeBackgroundColor= "#F1F1F1" activeTintColor="#000000" inactiveTintColor= "#818181"
label="Logout"
icon={({ focused, color, size })=>{
return(
<Image source={require('../assets/images/logout.png')} style={{ height: 14.36, width: 14.36 }} resizeMode="contain"/>)
}}
onPress={() => {resetData(); props.dispatch({type:'AUTH_FAILURE', payload: ''}); props.dispatch(onClear())} }
/>
</DrawerContentScrollView>
Thank you in advance.
As of now the drawer navigation 5 doesnt support an active style. But you can wrap the icon in a View and add a border to it which would give give you something similar.
Not the perfect solution but will get you close to the expected output you have provided.
<Drawer.Screen
name="My Profile"
component={MyProfileStackScreen}
options={{
drawerIcon: ({ focused, size }) => (
<View
style={
focused
? {
borderLeftColor: 'red',
borderLeftWidth: 2,
paddingLeft: 5,
}
: null
}>
<Image
source={require('../assets/images/profile.png')}
style={{ height: 17.78, width: 16 }}
resizeMode="contain"
/>
</View>
),
}}
/>
I know I am too late, but may be helpful in future for someone
I achieved the design by doing like below,
here is my CustomDrawerComponent
I used props -> state object to identify the active route name
Then apply conditional styles to <DrawerItem style={{}}/>
import { createDrawerNavigator } from '#react-navigation/drawer';
import {DrawerItem,DrawerContentScrollView} from '#react-navigation/drawer';
const CustomDrawerContent = props => {
const {state} = props;
const {routes, index} = state;
//here we get the active route name
const focusedRoute = routes[index].name;
return (
<View style={{flex: 1}}>
<ProfileHeader />
<DrawerContentScrollView
{...props}
contentContainerStyle={{paddingTop: 0, flex: 1}}>
<DrawerItem
{...props}
label="Screen1"
style={
focusedRoute === 'Screen1' ? styles.itemActive : styles.itemInactive
}
labelStyle={{}}
icon={({}) => <Icon />}
onPress={() => {
props.navigation.navigate('Screen1');
}}
/>
<DrawerItem
{...props}
label="Screen1"
style={
focusedRoute === 'Screen2' ? styles.itemActive : styles.itemInactive
}
labelStyle={{}}
icon={({}) => <Icon />}
onPress={() => {
props.navigation.navigate('Screen2');
}}
/>
<DrawerItem
{...props}
label="Logout"
style={styles.itemInactive}
labelStyle={{}}
icon={({}) => <Icon />}
/>
</DrawerContentScrollView>
</View>
);
};
Here is my Root Drawer.Navigator setup
<Drawer.Navigator
drawerContent={props => <CustomDrawerContent {...props} />}>
// Drawer Screens
</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?