My code:
return (
<Drawer.Navigator initialRouteName="HomeTabs"
drawerContent={props => {
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem activeTinTcolor = 'red' inactiveTintColor='red' label="Logout" onPress={() => props.navigation.navigate("Login")} />
</DrawerContentScrollView>
)
}}
>
<Drawer.Screen name="HomeTabs" initialParams={{userId: userId, name: name, url: url,fullName: fullName, password: password}} component={HomeTabs} />
<Drawer.Screen name="Authors" component={AuthorsScreen} />
</Drawer.Navigator>
);
}
In DrawerItem I can change the color of the text but when I want to do so in Drawer.Screen none of the options work. I try options, DrowerOptions and and none of them work.
you can add it in screenOptions like below
<Drawer.Navigator
initialRouteName="HomeTabs"
screenOptions={{
headerShown: false,
drawerActiveTintColor:"red",
drawerInactiveTintColor:"orange"
}}
drawerContent={(props) => <DrawerMenu {...props} />}
>
</Drawer.Navigator>
more options
Related
I want to add clickable icons to my reactnative header component
Currently it looks like this
next to the title text on the right I want to add an audio symbol but i cant figure out on doing this.
I have seen plenty of answers that work with navigation but Im using drawers so i dnt understand how to add icons.
This is what my code looks like
app.js
<NavigationContainer >
<Drawer.Navigator initialRouteName="MetalDetector" screenOptions={{
drawerStyle: {
backgroundColor: '#3e4463',
width: 220
},
}}>
<Drawer.Screen name="MetalDetector" component={Home} options={{drawerLabel: '🔦 MetalDetector'}} />
<Drawer.Screen name="Settings" component={Settings} options={{drawerLabel: '🛠 Settings'}} />
<Drawer.Screen name="Calibrate" component={Home} options={{drawerLabel: '💡 Calibration'}}/>
<Drawer.Screen name="Feedback" component={Home} options={{drawerLabel: '👨👩👧👦 Feedback'}}/>
and this is my home.js file which renders content for the metaldetector page
<View style={styles.container}>
<View style={styles.buttonContainer}>
//Cde is below
</View>
</View>
);
}
So where would i add icons to the titlemenu?
I found this here, which covers on how to set the header using stackscreen
https://reactnavigation.org/docs/headers/
but since I use drawer.screen i dont know how to apply that
Option 1:
The DrawerContent file
import React, { useState } from 'react';
import { View, StyleSheet, Image, Alert, Text } from 'react-native';
import { Title, Drawer } from 'react-native-paper';
import { DrawerContentScrollView, DrawerItem } from '#react-navigation/drawer';
import { FontAwesome, MaterialIcons, AntDesign, Ionicons } from '#expo/vector-icons';
import colors from '../config/colors';
const AppDrawerItem = ({ label , icon, onPress, ...props }) => {
return (
<DrawerItem
icon={icon}
label={label}
onPress={onPress}
/>
);
}
export function DrawerContent(props) {
return (
<View style={{ flex: 1 }}>
<DrawerContentScrollView {...props}>
<Drawer.Section style={styles.drawerSection}>
<AppDrawerItem
onPress={() => { setIsDeletePressed(false); props.navigation.navigate('Dashboard') }}
label="Dashboard"
icon={({ color, size, focused }) => (
<MaterialIcons
name="dashboard"
color={focused ? colors.primary : color}
size={size}
/>
)}
{...props}
/>
<AppDrawerItem
onPress={() => { setIsDeletePressed(false); props.navigation.navigate('Messages') }}
label="Messages"
icon={({ color, size, focused }) => (
<MaterialIcons
name="notifications"
color={focused ? colors.primary : color}
size={size}
/>
)}
{...props}
/>
</Drawer.Section>
</DrawerContentScrollView >
</View >
);
}
DrawerNavigator
<Drawer.Navigator
screenOptions={{
headerTitleStyle: {
color: "black",
opacity: 0.9
},
headerTintColor: colors.primary,
swipeEnabled: false,
headerTitleAlign: 'center',
headerShadowVisible: false,
}} drawerContent={props => <DrawerContent {...props} />} > //---here you can add drawercontent component
<Drawer.Screen name="Dashboard" component={HomeScreen} />
<Drawer.Screen options={{ headerShown: true }} name="Messages" component={NotificationNavigator} />
</Drawer.Navigator >
Edit:
Option2:
You can add the icon in the <Drawer.Screen> tag.
<Drawer.Screen name="Feed" component={Feed} options={{
title: 'Home',
drawerIcon: ({focused, size}) => (
<Ionicons
name="md-home"
size={size}
color={focused ? '#7cc' : '#ccc'}
/>
),
}} />
I'm trying to implement drawer navigation within my stack navigator and it looks like the project isn't picking up <Button title="Flavor" onPress={() => navigation.toggleDrawer()} />. My stack is:
<Stack.Screen name="MyDrawer" component={MyDrawer} />
My Drawer function is:
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem
label="Close drawer"
onPress={() => props.navigation.closeDrawer()}
/>
<DrawerItem
label="Toggle drawer"
onPress={() => props.navigation.toggleDrawer()}
/>
</DrawerContentScrollView>
);
}
const Drawer = createDrawerNavigator();
function MyDrawer() {
return (
<Drawer.Navigator
useLegacyImplementation
drawerContent={(props) => <CustomDrawerContent {...props} />}
>
<Drawer.Screen name="Upload A Video" component={EarningsScreen} />
<Drawer.Screen name="Livestream" component={EarningsScreen} />
</Drawer.Navigator>
);
}
Can someone help me figure this problem out? I'm not sure what the error is regarding.
I'm using StackNavigator, inside TabNavigator, inside Drawer Navigator.
Trying to redirect to nested Stacks but returns error.
Warning: React has detected a change in the order of Hooks called by StackNavigator. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks:
TypeError: undefined is not an object (evaluating 'prevDeps.length')
What's wront with that?
Why it doesnt redirect to stack.screen below main screen?
my redirect:
<TouchableOpacity style={styles.accessButton} onPress={() => navigation.navigate('Home', {
screen: 'Events'
})}>
My main.js (navigator)
return (
<NavigationContainer theme={NavigationTheme} ref={navigationRef}>
<StatusBar barStyle={darkMode ? 'light-content' : 'dark-content'} />
<Drawer.Navigator
drawerStyle={{ width: '100%' }}
drawerContent={(props) => <DrawerContent {...props} />}
>
<Drawer.Screen name="Startup" component={IndexStartupContainer} />
{isApplicationLoaded && BeforeLogin != null && (
<Drawer.Screen name="Main" component={BeforeLogin} />
)}
</Drawer.Navigator>
</NavigationContainer>
)
my tabbar navigator:
return (
<Tab.Navigator tabBarOptions={{showLabel: false}} lazy>
<Tab.Screen name="Home" component={HomeNavigator}
options={{
tabBarIcon: ({size,focused,color}) => {
return (
<AntDesign name="home" size={39} color={colors.text} />
);
},
}}
/>
<Tab.Screen name="SearchNavigator" component={SearchNavigator}
options={{
tabBarIcon: ({size,focused,color}) => {
return (
<AntDesign name="search1" size={39} color={colors.text} />
);
},
}}
/>
<Tab.Screen name="FAQNavigator" component={FAQNavigator}
options={{
tabBarIcon: ({size,focused,color}) => {
return (
<AntDesign name="questioncircleo" size={39} color={colors.text} />
);
},
}}
/>
<Tab.Screen name="ContactNavigator" component={ContactNavigator}
options={{
tabBarIcon: ({size,focused,color}) => {
return (
<Feather name="phone" size={39} color={colors.text} />
);
},
}}
/>
</Tab.Navigator>
)
and my HomeNavigator:
const HomeNavigator = ({ navigation }) => {
const Stack = createStackNavigator()
const { t } = useTranslation()
return (
<Stack.Navigator>
<Stack.Screen
options={headerStyle_1}
name='Index'
title={t('title.homepage')}
component={HomepageController}
/>
<Stack.Screen
options={headerStyle_1}
name='Events'
title={t('title.events')}
component={EventsController}
/>
</Stack.Navigator>
)
}
I'm trying to use this.props.navigation.dispatch(DrawerActions.toggleDrawer()) in the following code but it takes this.props.navigation.dispatch as undefined.
My code:
//...imports
//set the function drawer inside a bottom tab navigator (works fine)
drawer = () => {
return(
<Drawer.Navigator>
<Drawer.Screen name="first" component={firstScreen} />
<Drawer.Screen name="second" children={this.TopTabStack} />
</Drawer.Navigator>
)
}
TopTab = () => {
return(
<MaterialTopTabs.Navigator
initialRouteName="third"
>
<MaterialTopTabs.Screen name="third" component={thirdScreen} />
<MaterialTopTabs.Screen name="fourth" component={fourthScreen} />
</MaterialTopTabs.Navigator>
)
}
TopTabStack = () => {
return(
<Stack.Navigator>
<Stack.Screen name="second" children={this.TopTab} options={{
headerRight: this.TopTabRightStack
}} />
</Stack.Navigator>
)
}
TopTabRightStack = () => {
return(
<View>
<TouchableWithoutFeedback onPress={async () => {this.props.navigation.dispatch(DrawerActions.toggleDrawer())}}>
<Ionicons name="ios-menu" size={26} />
</TouchableWithoutFeedback>
</View>
)
}
As you are using the Functional component so there is no need of using this, remove it from the given code, and run again.
drawer = () => {
return(
<Drawer.Navigator>
<Drawer.Screen name="first" component={firstScreen} />
<Drawer.Screen name="second" children={TopTabStack} />
</Drawer.Navigator>
)
}
TopTab = () => {
return(
<MaterialTopTabs.Navigator
initialRouteName="third"
>
<MaterialTopTabs.Screen name="third" component={thirdScreen} />
<MaterialTopTabs.Screen name="fourth" component={fourthScreen} />
</MaterialTopTabs.Navigator>
)
}
TopTabStack = () => {
return(
<Stack.Navigator>
<Stack.Screen name="second" children={TopTab} options={{
headerRight: TopTabRightStack
}} />
</Stack.Navigator>
)
}
TopTabRightStack = ({navigation}) => {
return(
<View>
<TouchableWithoutFeedback onPress={async () = {navigation.dispatch(DrawerActions.toggleDrawer())}}>
<Ionicons name="ios-menu" size={26} />
</TouchableWithoutFeedback>
</View>
)
}
OK, got it:
//...imports
//set the function drawer inside a bottom tab navigator (works fine)
drawer = () => {
return(
<Drawer.Navigator>
<Drawer.Screen name="first" component={firstScreen} />
<Drawer.Screen name="second" children={this.TopTabStack} />
</Drawer.Navigator>
)
}
TopTab = () => {
return(
<MaterialTopTabs.Navigator
initialRouteName="third"
>
<MaterialTopTabs.Screen name="third" component={thirdScreen} />
<MaterialTopTabs.Screen name="fourth" component={fourthScreen} />
</MaterialTopTabs.Navigator>
)
}
TopTabStack = ({navigation) => {
return(
<Stack.Navigator>
<Stack.Screen name="second" children={this.TopTab} options={{
headerRight: () => (
<View>
<TouchableWithoutFeedback onPress={async () = {navigation.dispatch(DrawerActions.toggleDrawer())}}>
<Ionicons name="ios-menu" size={26} />
</TouchableWithoutFeedback>
</View>
),
}} />
</Stack.Navigator>
)
}
My code for the current scenario is as follows:
function DrawerNavigation(props) {
return (
<DrawerContentScrollView {...props}>
<TouchableOpacity
style={styles.colseIconContainer}
onPress={() => props.navigation.closeDrawer()}>
<IconButton
icon={({size}) => (
<Image
source={require('../../../resource/images/CloseIcon.png')}
style={{width: size, height: size}}
/>
)}
size={40}
/>
</TouchableOpacity>
</DrawerContentScrollView>
);
}
const Drawer = createDrawerNavigator();
export default function MyDrawer(props) {
return (
<Drawer.Navigator
drawerPosition="right"
drawerContent={() => <DrawerNavigation {...props} />}
drawerStyle={styles.drawerStyle}>
<Drawer.Screen
name="Home"
component={HomeScreen}
options={{swipeEnabled: true}}
initialParams={props.navigation}
/>
<Drawer.Screen name="Notifications" component={CommonUserComponent} />
</Drawer.Navigator>
);
}
The error is undefined is not an object (evaluating 'props.naviagtion.closeDrawer')
Is there any way?? To make it work!!
Thank You !!
replace this
drawerContent={() => <DrawerNavigation {...props} />}
with this
drawerContent={(props) => <DrawerNavigation {...props} />}