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.
Related
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
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} />}
I'm nesting screens and passing props to the screens such as header title, and a render of json.
Earlier today everything was working but now it gives me the error of getParams.
HomeStack.js, here in the title I get the title by the FlatList render in the screen which navigates to this one.
<Screen
name='errorHP'
component={errorHP}
options={{
headerTitle: () => <Header navigation={navigation} title={navigation.getParam('name')} />,
headerTitleAlign: 'center',}}
/>
HP.js, here the flatlist renders and will export the render to the page errorHP
<FlatList data={filteredSearch} keyExtractor={(item) => item.key} renderItem={({item}) => (
<TouchableOpacity onPress={() => navigation.navigate('errorHP', item)}>
<Card>
<Text style={globalStyles.titleText}> {item.name} </Text>
</Card>
</TouchableOpacity>
)} />
errorHP.js, here are listed the errors and after click, will pass again params to a new page which gets the error details.
export default function errorHP ({navigation}) {
const data = navigation.getParam('errors');
const errors = Object.keys(data);
return (
<View style={globalStyles.container}>
<FlatList data={errors} renderItem={({item}) => (
<TouchableOpacity>
<Card>
<Text style={globalStyles.titleText}> {item} </Text>
</Card>
</TouchableOpacity>
)} />
I've been messing around and still cant solve this problem.
Thanks for your attention!
You need to get params from the route prop:
export default function errorHP ({navigation, route}) {
const data = route.params.errors;
// whatever
}
And
<Screen
name="errorHP"
component={errorHP}
options={({ route, navigation }) => ({
headerTitle: () => (
<Header navigation={navigation} title={route.params.name} />
),
headerTitleAlign: 'center',
})}
/>
I'm trying to create a button for navigating to "CreateScreen", the button is placed in the header so I wrote it inside <NavigationContainer> as the documentation suggested, but it seems I don't have access to navigation, I don't actually need it inside NavigationContainer, so if you have other suggestions for implementing(for example, implementing the button inside the component) it will be great.
That's What I'm trying to accomplish(part of app.js)
headerRight: () => {
return <TouchableOpacity>
<Feather name="plus" size={30} onPress={() => navigation.navigate('Create')} />
</TouchableOpacity>
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Index">
<Stack.Screen
name="Index"
component={IndexScreen}
options={{
title: 'Home',
headerRight: () => {
return (
<TouchableOpacity>
<Feather
name="plus"
size={30}
onPress={
() => navigation.navigate('Create')
//Thats what Im trying to accomplish
}
/>
</TouchableOpacity>
);
},
}}
/>
<Stack.Screen name="Show" component={ShowScreen} />
<Stack.Screen name="Create" component={CreateScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
you can use the useNavigation hook to gain access to the navigation prop:
import { useNavigation } from '#react-navigation/native';
const navigation = useNavigation();
navigation.goBack();
source:
https://reactnavigation.org/docs/use-navigation/
In option will return navigation
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Index">
<Stack.Screen
name="Index"
component={IndexScreen}
//navigation<<<<<<<<<<<<<<<<<<<<<<<<<here
options={({navigation, route}) => ({
title: 'Home',
headerRight: () => {
return (
<TouchableOpacity>
<Feather
name="plus"
size={30}
onPress={() => navigation.navigate('Create')}
/>
</TouchableOpacity>
);
},
})}
/>
<Stack.Screen name="Show" component={ShowScreen} />
<Stack.Screen name="Create" component={CreateScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}