Here's a Stack Navigator inside a MainStack.js:

import React from 'react'
import { createStackNavigator } from '@react-navigation/stack';

import Main from './Main'
import ScannerMarker from './ScannerMarker';

const Stack = createStackNavigator();

export default function MainStack() {
    return(
        <Stack.Navigator initialRouteName='Main' screenOptions={{headerShown: false}}>
            <Stack.Screen name='Main' component={Main} />
            <Stack.Screen name='ScannerMarker' component={ScannerMarker} />
        </Stack.Navigator>
    );
}

And ScannerMarker.js:

import React from 'react';
import { StyleSheet, View, Text, Dimensions, Pressable } from 'react-native';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import Feather from 'react-native-vector-icons/Feather';
import Octicon from 'react-native-vector-icons/Octicons'

import Main from './Main';

export default function ScannerMarker({ navigation, setModalVisible }) {
    return (
        <View style={styles.markerContainer}>
            <View style={styles.topContainer}>
                <View style={styles.topBar}>
                    <MaterialIcon name="support-agent" size={32} color="#fffeef" backgroundColor={'none'} onPress={() => navigation.navigate(Main)} />
                    <Feather name="x" size={32} color="#fffeef" backgroundColor={'none'} onPress={() => navigation.goBack(Support)}/>
                </View>
                <Text style={styles.topText}>Point scanner to{'\n'}vending qr-code</Text>
            </View>
            <View style={styles.middleContainer}>
                <View style={styles.leftContainer}></View>
                <View style={styles.scannerSquare}></View>
                <View style={styles.rightContainer}></View>
            </View>
            <View style={styles.bottomContainer}>
                <Pressable style={styles.button} onPress={() => setModalVisible(false)}>
                    <Octicon name="number" size={20} color="#fffeef" style={styles.chargerIcon}/>
                    <Text style={styles.buttonText}>  Enter vending{'\n'}number</Text>
                </Pressable>
            </View>
        </View>
    )
}

ScannerMarker is a part of a Scanner in Scanner.js:

import React from 'react';
import { StyleSheet, Linking, Dimensions} from 'react-native';
import QRCodeScanner from 'react-native-qrcode-scanner';
import { RNCamera } from 'react-native-camera';

import ScannerMarker from './ScannerMarker';

export default function Scanner({ modalVisible, setModalVisible }) {
    onSuccess = e => {
      Linking.openURL(e.data)
      setModalVisible(!modalVisible)
    };
  
    return (
        <QRCodeScanner
            onRead={this.onSuccess}
            flashMode={RNCamera.Constants.FlashMode.auto}
            cameraStyle={styles.cameraStyle}
            showMarker={true}
            customMarker={
                <ScannerMarker setModalVisible={setModalVisible}> </ScannerMarker>
            }
        />
    );
}

MainStack is rendered inside a Drawer Navigator in Drawer.js:

import React from 'react';
import { StyleSheet, View, Linking} from 'react-native';
import { createDrawerNavigator, DrawerItemList, DrawerContentScrollView, DrawerItem} from '@react-navigation/drawer';
import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';

const Drawer = createDrawerNavigator();

export default function MyDrawer(props) {
    return (
        <Drawer.Navigator
        ...
        >
            <Drawer.Screen
                name='MainStack'
                component={MainStack}
                options={{
                  title: 'Charge Away',
                  drawerIcon: () => (<MaterialCommunityIcon name="lightning-bolt" size={45} color="#2E2A00" style={{marginEnd: -30, marginStart: -10}} />)
                }}
            />
            ...
        <Drawer.Navigator>
    );
}

When i press on icons with "onPress={() => navigation.navigate(...)}" or onPress={() => navigation.goBack()} I get the following errors:

TypeError: Cannot read property 'navigate' of undefined and TypeError: Cannot read property 'goBack' of undefined

So I don't know what's the problem. navigation parameter is declared and all of the components are in the Stack Navigator.

Everything is wrapped in NavigationContainer in App.js:

import * as React from 'react';
import { NavigationContainer} from '@react-navigation/native';

import MyDrawer from './components/Drawer'

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

Here's a Stack Navigator inside a MainStack.js:

import React from 'react'
import { createStackNavigator } from '@react-navigation/stack';

import Main from './Main'
import ScannerMarker from './ScannerMarker';

const Stack = createStackNavigator();

export default function MainStack() {
    return(
        <Stack.Navigator initialRouteName='Main' screenOptions={{headerShown: false}}>
            <Stack.Screen name='Main' component={Main} />
            <Stack.Screen name='ScannerMarker' component={ScannerMarker} />
        </Stack.Navigator>
    );
}

And ScannerMarker.js:

import React from 'react';
import { StyleSheet, View, Text, Dimensions, Pressable } from 'react-native';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import Feather from 'react-native-vector-icons/Feather';
import Octicon from 'react-native-vector-icons/Octicons'

import Main from './Main';

export default function ScannerMarker({ navigation, setModalVisible }) {
    return (
        <View style={styles.markerContainer}>
            <View style={styles.topContainer}>
                <View style={styles.topBar}>
                    <MaterialIcon name="support-agent" size={32} color="#fffeef" backgroundColor={'none'} onPress={() => navigation.navigate(Main)} />
                    <Feather name="x" size={32} color="#fffeef" backgroundColor={'none'} onPress={() => navigation.goBack(Support)}/>
                </View>
                <Text style={styles.topText}>Point scanner to{'\n'}vending qr-code</Text>
            </View>
            <View style={styles.middleContainer}>
                <View style={styles.leftContainer}></View>
                <View style={styles.scannerSquare}></View>
                <View style={styles.rightContainer}></View>
            </View>
            <View style={styles.bottomContainer}>
                <Pressable style={styles.button} onPress={() => setModalVisible(false)}>
                    <Octicon name="number" size={20} color="#fffeef" style={styles.chargerIcon}/>
                    <Text style={styles.buttonText}>  Enter vending{'\n'}number</Text>
                </Pressable>
            </View>
        </View>
    )
}

ScannerMarker is a part of a Scanner in Scanner.js:

import React from 'react';
import { StyleSheet, Linking, Dimensions} from 'react-native';
import QRCodeScanner from 'react-native-qrcode-scanner';
import { RNCamera } from 'react-native-camera';

import ScannerMarker from './ScannerMarker';

export default function Scanner({ modalVisible, setModalVisible }) {
    onSuccess = e => {
      Linking.openURL(e.data)
      setModalVisible(!modalVisible)
    };
  
    return (
        <QRCodeScanner
            onRead={this.onSuccess}
            flashMode={RNCamera.Constants.FlashMode.auto}
            cameraStyle={styles.cameraStyle}
            showMarker={true}
            customMarker={
                <ScannerMarker setModalVisible={setModalVisible}> </ScannerMarker>
            }
        />
    );
}

MainStack is rendered inside a Drawer Navigator in Drawer.js:

import React from 'react';
import { StyleSheet, View, Linking} from 'react-native';
import { createDrawerNavigator, DrawerItemList, DrawerContentScrollView, DrawerItem} from '@react-navigation/drawer';
import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';

const Drawer = createDrawerNavigator();

export default function MyDrawer(props) {
    return (
        <Drawer.Navigator
        ...
        >
            <Drawer.Screen
                name='MainStack'
                component={MainStack}
                options={{
                  title: 'Charge Away',
                  drawerIcon: () => (<MaterialCommunityIcon name="lightning-bolt" size={45} color="#2E2A00" style={{marginEnd: -30, marginStart: -10}} />)
                }}
            />
            ...
        <Drawer.Navigator>
    );
}

When i press on icons with "onPress={() => navigation.navigate(...)}" or onPress={() => navigation.goBack()} I get the following errors:

TypeError: Cannot read property 'navigate' of undefined and TypeError: Cannot read property 'goBack' of undefined

So I don't know what's the problem. navigation parameter is declared and all of the components are in the Stack Navigator.

Everything is wrapped in NavigationContainer in App.js:

import * as React from 'react';
import { NavigationContainer} from '@react-navigation/native';

import MyDrawer from './components/Drawer'

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

• javascript
• react-native

• Where are you rendering MainStack, can you show the code for that part ? – Youssouf Oumar Commented Mar 21, 2022 at 19:11
• @yousoumar MainStack is rendered in a Drawer Navigator. I will update a code of it in a second. – lian Commented Mar 21, 2022 at 19:14
• Yeah please add that part in your question. – Youssouf Oumar Commented Mar 21, 2022 at 19:17
• I've added one more thing in the question. ScannerMarker is a part of a Scanner() in Scanner.js – lian Commented Mar 21, 2022 at 19:50

2 Answers 2

I've solved the problem with useNavigation hook:

import { View, Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

export default function MyComp() {
    const navigation = useNavigation();
    return (
        <View>
            <Button
                title="Go to Home"
                onPress={() => navigation.navigate('Home')}
            />
        </View>
    );
};

Another option is to pass navigation to MyComp with props:

export default function MyComp( {navigation} ) {
    //...
};

<MyComp navigation={props.navigation} />

Source: https://reactnavigation.org/docs/connecting-navigation-prop

dont know what the problem is but i did this, go to node_module in your project director

-->follow this: node_module > expo > AppEntry.js and ensure that the component (example: import App) and the file name (example :"../../App') there matches the file name and component of your navigation file that is to be used by your emulator screen.

AppEntry.js

import registerRootComponent from 'expo/build/launch/registerRootComponent';

import App from '../../App';

registerRootComponent(App);

"App" should exchange your Navigation component and "../../App" should exchange your Navigation component file

but if it is the same name, i mean "App" and file is "App.js", then that's probably not the problem