ReferenceError: Can't find variable: navigation

Question

So what I'm trying to do is that I'd like the DrawerNavigator to be accessed by selecting the icon on the top left . Im using react nav 5 for this. I keep recieving the error displayed above.

I've tried doing this using this.props.navigation but that also did not seem to work. Assistance would be greatly appreciared

AppNavigator:

/* eslint-disable no-unused-expressions */
import React, { useState, useEffect } from 'react'
import { NavigationContainer, DrawerActions } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import auth from '@react-native-firebase/auth'
import {IconButton} from 'react-native-paper'


import Login from '../components/login'
import Signup from '../components/signup'
import forgotPassword from '../components/forgotPassword'
import DashboardScreen from '../screens/DashboardScreen'





const Stack = createStackNavigator()

export default function MyStack() {
  // Set state while Firebase Connects
  const [starting, setStarting] = useState(true)
  const [user, setUser] = useState()

  // Handle state changes for user
  function onAuthStateChanged(user) {
    setUser(user)
    if (starting) setStarting(false)
  }


  useEffect(() => {
    const subcriber = auth().onAuthStateChanged(onAuthStateChanged)
    return subcriber
    // unsub on mount
  }, [])

  if (starting) return null
  
  
  if (!user) {

    return (
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            headerTitleAlign: 'center',
            headerStyle: {
              backgroundColor: '#3740FE',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
            },
          }}
        >
          <>
            <Stack.Screen 
              name="Login" 
              component={Login} 
            />
            <Stack.Screen
              name="Signup"
              component={Signup}
            />
            <Stack.Screen 
              name="ForgotPassword"
              component={forgotPassword}
            /> 
          </>
        </Stack.Navigator>
      </NavigationContainer>
    )
  }
    
  return (
    <NavigationContainer>  
      <Stack.Navigator
        screenOptions={{
          headerTitleAlign: 'center',
          headerStyle: {
            backgroundColor: '#3740FE',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
      >
        <>
          <Stack.Screen
            name="Dashboard"
            component={DashboardScreen}
            options={{
              headerLeft:  props => 
                <IconButton
                  {...props}
                  icon="menu"
                  color="white"
                  onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
                />,
              headerRight: props => 
                <IconButton
                  {...props}
                  icon="magnify"
                  color="white"
                />
            }}
          />
        </>
      </Stack.Navigator>
    </NavigationContainer>
  )
}

Dashboard:


import 'react-native-paper'
import React from 'react';
import { StyleSheet, View} from 'react-native';
import {Button} from 'react-native-paper'

import { createDrawerNavigator } from '@react-navigation/drawer'


function HomeScreen ({navigation}) {

    return (
  
      <View>
        <Button
          onPress={() => navigation.navigate('Settings')}
        />
      </View>
    );
  }
  
  function SettingsScreen ({navigation}) {
  
    return (
  
      <View> style={styles.container}
        <Text>
          TESTING
        </Text>
      </View>
    );
  }
  
  const Drawer = createDrawerNavigator();

  export default function DashboardScreen (){

    return (
        <Drawer.Navigator initialRouteName="Home">
          <Drawer.Screen name="Home" component={HomeScreen}/>
          <Drawer.Screen name="Settings" component={SettingsScreen}/>
        </Drawer.Navigator> 
      
    );        
  }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    display: "flex",
    justifyContent: 'center',
    alignItems: 'center',
    padding: 35,
    backgroundColor: '#fff'
  },
  textStyle: {
    fontSize: 15,
    marginBottom: 20
  }
});

Does the error appear on load or on click? I have a vague memory that the navigation takes some time till it is available, so using conditional rendering may help. — Pauloco
– Pauloco, Commented Jul 2, 2020 at 2:21

Horst · Accepted Answer · 2020-07-02 02:19:49Z

4

you can get it when you write the options in function like

<Stack.Screen
            name="Dashboard"
            component={DashboardScreen}
            options={({navigation})=>({
              headerLeft:  props => 
                <IconButton
                  {...props}
                  icon="menu"
                  color="white"
                  onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
                />
            })}
          />

answered Jul 2, 2020 at 2:19

Horst

1,73915 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReferenceError: Can't find variable: navigation

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related