CODEWITHSUNDEEP
reactjsreact-nativereact-navigationreact-navigation-v5react-navigation-drawer
Lakshumanan
Lakshumanan

Reputation: 1

In React-Native, trying to access the drawer open from stack navigator in header back button

I am new to react native, I want to access my home page drawer open from stack navigation which is in launch.js

launch.js

import * as React from 'react';
import {Button, View} from 'react-native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {Home, Login} from './screens';

const Drawer = createDrawerNavigator();
const AuthStack = createStackNavigator();
const LoginStack = createStackNavigator();
const HomeStack = createStackNavigator();

const LoginUI = ({navigation}) => {
  return (
    <LoginStack.Navigator>
      <LoginStack.Screen name="login" component={Login}></LoginStack.Screen>
    </LoginStack.Navigator>
  );
};

const HomeUI = ({navigation}) => {
  const closeDraw = () => {
    navigation.openDrawer();
  };
  return (
    <Drawer.Navigator initialRouteName="home">
      <Drawer.Screen name="home" component={Home} />
    </Drawer.Navigator>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <AuthStack.Navigator>
        <AuthStack.Screen name="login" component={LoginUI}></AuthStack.Screen>
        <AuthStack.Screen
          name="home"
          component={HomeUI}
          options={{
            headerLeft: () => (
              <Button
                title="ham"
                onPress={() => {
                  navigation.openDrawer();
                }}></Button>
            ),
          }}></AuthStack.Screen>
      </AuthStack.Navigator>
    </NavigationContainer>
  );
}

screens.js

import * as React from 'react';
import {Button, View} from 'react-native';

export const Home = ({navigation}) => {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Button onPress={() => navigation.goBack()} title="Logout" />
    </View>
  );
};

export const Login = ({navigation}) => {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Button onPress={() => navigation.navigate('home')} title="Login" />
    </View>
  );
};

I am facing following error message.

Error

Error I am facing

I tried with this.props.navigation.openDrawer() that also not helped me, please help on this.

Thank you.

Upvotes: 0

Views: 1755

Answers (1)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

You are not providing access to navigation, you can do it by changing the code like below

<AuthStack.Screen
          name="home"
          component={HomeUI}
          options={({navigation})=>({
            headerLeft: () => (
              <Button
                title="ham"
                onPress={() => {
                  navigation.openDrawer();
                })}></Button>
            ),
          }}></AuthStack.Screen>

Upvotes: 2

Related Questions