CODEWITHSUNDEEP
react-nativereact-native-ios
techie_questie
techie_questie

Reputation: 1522

React-native QR code scanner is throwing error

I have a react-native app where I have developed a scanner feature using react-native-qrcode-scanner.However, when I try to scan the data, I get the below error-

error: can't find variable navigation

I see this error in onSuccess method at line authorizationToken. My code-

import React, { Component } from 'react';
import {
    Text,
    View,
    Image,
    TouchableOpacity,
    Linking
} from 'react-native';
import styles from '../assets/style';
import QRCodeScanner from 'react-native-qrcode-scanner';

export default class ScanScreen extends Component {

    onSuccess(scanEvent) {
        this.props.navigation.navigate("Result", {
            'accessKey': scanEvent.data,
            'authorizationToken':navigation.getParam('authorizationToken', undefined), 
            "userData": navigation.getParam('userData', undefined),
            "methodName": "fetchData"
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <QRCodeScanner
                    onRead={this.onSuccess.bind(this)}
                />
            </View>
        );
    }
}

Any idea what I m missing here. Any help is much appreciated.Thanks in advance.

Upvotes: 2

Views: 1842

Answers (2)

techie_questie
techie_questie

Reputation: 1522

navigation has to be part of props so accessing navigation using this.props.navigation solves this issue.

Upvotes: 0

Paweł Mikołajczuk
Paweł Mikołajczuk

Reputation: 3822

Make sure that Your Screen is registered in react-navigation config (follow this guide: can't find variable navigation).

Or pass navigation prop to it with HOC withNavigation: https://reactnavigation.org/docs/en/with-navigation.html. Instead export default class ScanScreen extends Component do class ScanScreen extends Component and at end of file do

export default withNavigation(ScanScreen);

Don't forget about importing Higher Order Component: import { withNavigation } from 'react-navigation';

Also be sure that all native parts are properly linked. For example react-native-gesture-handle (https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#linking).

Upvotes: 1

Related Questions