How to Generate QR Code in React Native

Hello developers! In this guide, I'll walk you through the process of creating a React Native application that generates QR codes using the react-native-qrcode-svg library. QR codes are incredibly versatile and useful for various applications, and this library simplifies the process of generating them in a React Native environment.

In this tutorial, I'll give you step by step guide to creating a QR code in a React native application using the react-native-qrcode-svg library.

So, let's see how to generate a QR code in react native, react native QR code generate, how to create a QR code in react native, QR code generator in react native, react-native-qrcode-svg.

Prerequisites

Ensure you have a React Native project set up. If not, you can create one using:

npx react-native init YourQRCodeGeneratorApp
cd YourQRCodeGeneratorApp

Now, let's dive into the steps!

Open a terminal and navigate to your project's root directory. Run the following command to install the react-native-qrcode-svg library:

npm install react-native-qrcode-svg

Now, let's create a simple component that uses react-native-qrcode-svg to generate a QR code.

// QRCodeGeneratorComponent.js

import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
import QRCode from 'react-native-qrcode-svg';

const QRCodeGeneratorComponent = () => {
  const [text, setText] = useState('');

  return (
    <View>
      <TextInput
        placeholder="Enter text for QR code"
        value={text}
        onChangeText={(newText) => setText(newText)}
      />
      <Button title="Generate QR Code" onPress={() => {}} />
      {text !== '' && <QRCode value={text} size={200} />}
    </View>
  );
};

export default QRCodeGeneratorComponent;

Now, let's implement the logic to generate the QR code when the button is pressed.

// QRCodeGeneratorComponent.js

// ... (previous code)

const QRCodeGeneratorComponent = () => {
  const [text, setText] = useState('');
  const [qrCodeValue, setQRCodeValue] = useState('');

  const generateQRCode = () => {
    setQRCodeValue(text);
  };

  return (
    <View>
      <TextInput
        placeholder="Enter text for QR code"
        value={text}
        onChangeText={(newText) => setText(newText)}
      />
      <Button title="Generate QR Code" onPress={generateQRCode} />
      {qrCodeValue !== '' && <QRCode value={qrCodeValue} size={200} />}
    </View>
  );
};

export default QRCodeGeneratorComponent;

Now, integrate the QRCodeGeneratorComponent into your main application file or any other component where you want to generate QR codes.

// App.js

import React from 'react';
import { View, StyleSheet } from 'react-native';
import QRCodeGeneratorComponent from './QRCodeGeneratorComponent';

const App = () => {
  return (
    <View style={styles.container}>
      <QRCodeGeneratorComponent />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

QR Code Component

<QRCode
  //QR code value
  value={qrvalue}

  //size of QR Code
  size={250}
  
  //Color of the QR Code (Optional)
  color="black"
  
  //Background Color of the QR Code (Optional)
  backgroundColor="white"
  
  //Logo of in the center of QR Code (Optional)
  logo={{
    url:
      'https://google.com',
  }}

  //Center Logo size  (Optional)
  logoSize={30}

  //Center Logo margin (Optional)
  logoMargin={2}

  //Center Logo radius (Optional)
  logoBorderRadius={15}

  //Center Logo background (Optional)
  logoBackgroundColor="yellow"
/>

Examples:

import QRCode from 'react-native-qrcode-svg';

// Simple usage, defaults for all but the value
render() {
  return (
    <QRCode
      value="http://awesome.link.qr"
    />
  );
};

// 30px logo from base64 string with transparent background
render() {
  let base64Logo = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAA..';
  return (
    <QRCode
      value="Just some string value"
      logo={{uri: base64Logo}}
      logoSize={30}
      logoBackgroundColor='transparent'
    />
  );
};

Saving generated code to the gallery

npm install --save react-native-fs

import { CameraRoll , ToastAndroid } from "react-native"
import RNFS from "react-native-fs"
...

  saveQrToDisk() {
   	this.svg.toDataURL((data) => {
   		RNFS.writeFile(RNFS.CachesDirectoryPath+"/some-name.png", data, 'base64')
   		  .then((success) => {
   			  return CameraRoll.saveToCameraRoll(RNFS.CachesDirectoryPath+"/some-name.png", 'photo')
   		  })
   		  .then(() => {
   			  this.setState({ busy: false, imageSaved: true  })
   			  ToastAndroid.show('Saved to gallery !!', ToastAndroid.SHORT)
   		  })
   	})
  }

Run your React Native application and test the QR code generation functionality. Enter different texts, generate QR codes, and ensure they are displayed correctly.

That's it! You've successfully implemented a QR code generator in React Native using the react-native-qrcode-svg library.

You might also like:

• Read Also: How to Create Document Picker in React Native
• Read Also: AJAX CRUD Operations In Laravel 10: Step-by-Step Guide
• Read Also: How To Integrate Paypal Payment Gateway In Laravel 10
• Read Also: How to Add Days in Date in React Native Calendar