How to build a QR and Bar Code Reader using React Native

August 05, 2021

How to build a QR and Bar Code Reader using React Native

How to build a QR and Bar Code Reader using React Native

Getting Started

Let’s start a new RN application:

react-native init BitFritScan && cd BitFritScan

Now, we’ll need to install the following libraries in order to build our app:

First Just Follow the Docs :

If you see aNo permission handler detected error in iOS:

Try this by adding the permissions_path with Permission-Camera

platform :ios, '10.0'

target 'AwesomeProject' do
  permissions_path = '../node_modules/react-native-permissions/ios'
  pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
  config = use_native_modules!

Then update yourInfo.plistwith wanted permissions usage descriptions:

    <string>Our app need your permission to use your camera phone</string>

Then cd ios and run pod install it will install permission


import React, {useEffect, useState} from 'react';
import { AuthHeader } from '../../Componets'
import styled from 'styled-components/native';
import GlobalStyles from '../../Componets/GlobalStyles';
import QRCodeScanner from 'react-native-qrcode-scanner';
import { RNCamera } from 'react-native-camera';
import Xml2js from 'react-native-xml2js';
import { StyleSheet,Text,TouchableOpacity } from 'react-native';

const Scan = ({navigation}) => {

  const [Data, SetData] = useState(null);

    const onSuccess = e => { 
        const {type,data}=e;
        let parser = new Xml2js.Parser();
         parser.parseString(data, (err, result)=> {

      useEffect(() => {
        const onBlur = navigation.addListener('blur', () => {
        return {onBlur};
      }, [navigation]);

    return (
        <Container style={GlobalStyles.droidSafeArea}>
             <AuthHeader Title={'Scan'} navigation={navigation}/>  
                 <Text style={styles.centerText}>
                    <Text style={styles.centerText}>
                        Go to{' '}
                        <Text style={styles.textBold}></Text> on
                        your computer and scan the QR code.
                    <TouchableOpacity style={styles.buttonTouchable}>
                        <Text style={styles.buttonText}>OK. Got it!</Text>

const styles = StyleSheet.create({
    centerText: {
      flex: 1,
      fontSize: 18,
      padding: 32,
      color: '#777'
    textBold: {
      fontWeight: '500',
      color: '#000'
    buttonText: {
      fontSize: 21,
      color: 'rgb(0,122,255)'
    buttonTouchable: {
      padding: 16,

const Container = styled.SafeAreaView`
       flex: 1;
       background-color: #343434;
const ContainerMain = styled.View`
       flex: 1;
       background-color: #ffffff;

export default Scan;

Written by Manoj Bhardwaj who lives and works in Dharamshala Himachal Pradesh (India). My stackoverflow