React native qrcode scanner example

Read qr code from the image using react-native-qrcode-scanner

Step 1:
Install react-native-qrcode-scanner:

npm install react-native-qrcode-scanner --save
npm install react-native-permissions --save

You may like these posts

• React native round button with icon
• React native qrcode scanner example
• How can I get the device's ip on React Native

react-native link react-native-qrcode-scanner

react-native link react-native-permissions


Step 2:
Add permission in Both Manifest:

android/app/src/main/AndroidManifest.xml 
AND
android\app\src\debug\AndroidManifest.xml

 <uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.VIBRATE"/>

 <uses-permission android:name="android.permission.CAMERA"/>


Step 3:

import React, { Component } from 'react';
import {
    AppRegistry,

    StyleSheet,
    Text,
    TouchableOpacity,
    Linking,Alert,View
  } from 'react-native';
  
  import QRCodeScanner from 'react-native-qrcode-scanner';
  
  export default  class ScanScreen extends Component {


    static navigationOptions = {
        headerShown: false,
        headerVisible: false,
    };

    onSuccess = e => {   
    alert(e.data);
      Linking.openURL(e.data).catch(err =>
        console.error('An error occured', err)
      );
    };


    karbhai=async()=>{
        await this.scanner.reactivate();
    }
  
    render() {
      return (
        
        
        <View style={{flex:1}}>

        <View style={{flex:0.1,flexDirection:"row",justifyContent:"center",alignContent:"center",marginBottom:-90}}>
            <Text style={{textAlign:"center",fontSize:25,textAlignVertical:"center"}}>Scan Your QR Code</Text>
        </View>


        <QRCodeScanner
        style={{flex:1}}
          onRead={this.onSuccess}
          ref={(node) => { this.scanner = node }}

          bottomContent={
          <TouchableOpacity style={styles.buttonTouchable} onPress={this.karbhai}>
            <Text style={[styles.buttonText]}>OK. Got it!</Text>
          </TouchableOpacity>
        }
        />

      
        </View>
      
      );
    }
  }
  
  const styles = StyleSheet.create({
    centerText: {
      
      fontSize: 18,
      padding: 32,
      color: '#777'
    },
    textBold: {
      fontWeight: '500',
      color: '#000'
    },
    buttonText: {
      fontSize: 30,
      color: '#fff',
      paddingBottom:70
    },
    buttonTouchable: {
      padding: 16,
    }

  });

For More Details Check Out: https://github.com/moaazsidat/react-native-qrcode-scanner

Result