I cannot use react navigator in the onRead function

What’s happening?

I am trying to navigate the user to a different screen when onRead is successful. But throws an error saying TypeError: undefined is not an object (evaluating 'navigation.navigate')

How can it be reproduced?

Try to use react-navigation in the function of onRead to reproduce this error.

Build details?

I am using the latest version of react-native-qrcode-scanner on a physical device running android.

My code

import React from 'react';
import QRCodeScanner from 'react-native-qrcode-scanner';
import {RNCamera} from 'react-native-camera';
import {Text, View} from 'react-native';
import {globalStyles} from '../styles/global';
import {useDispatch} from 'react-redux';
import {startUsing} from '../redux/actions/deskActions';

const Start = ({navigation}) => {
  const dispatch = useDispatch();
  const onSuccess = e => {
    // dispatch(startUsing(e.data));
    console.log(e.data);
    navigation.navigate('Home');
    scanner.reactivate();
  };

  return (
    <View style={globalStyles.container}>
      <View style={{...globalStyles.center, marginVertical: 50}}>
        <Text style={{...globalStyles.titleText, marginBottom: 20}}>
          Scan the QR Code to start session
        </Text>
        <QRCodeScanner
          reactivate={true}
          reactivateTimeout={2000}
          showMarker={true}
          ref={node => {
            scanner = node;
          }}
          onRead={onSuccess}
          flashMode={RNCamera.Constants.FlashMode.auto}
          cameraStyle={{width: '80%', marginHorizontal: 20, height: '100%'}}
        />
      </View>
    </View>
  );
};

export default Start;

[manan2501]

if you’re using react-navigation v5 you can try using hook

Yay! This is working as expected. Thanks a lot for helping. 😄

[hansderly]

Glad that help you! Happy Coding @manan2501 !