How to save/download generate QR Code in react native using hooks?

If you want to save the information in QR code as a QR code, you have to convert the QR code into a png image and then store it in your database as an image.

So, what I advise you to do is, when saving, just store the information as a string (or whatever necessary) in the database. When downloading, just retrieve the information from your database and immediately generate the QR Code. It's not consuming a longer time. After the QR Code is generated, then display it.

I think this is the most appropriate solution for you.

You may need react-native-qrcode-generator for generate the QR Code.

Here is a sample code...

You can input key and value (at the top inputs) and press 'Save' button. When the 'Save' button is pressed, you have to store your key-value pair (data) to your database.

Then, input the key (at the bottom input) of which you want to download and press 'Download' button. Then you have to retrieve the data (value) associated with the given key.

State value is set after the value is successfully retrieved from the database. That state is given as a prop to the QRCode component.

import React, { useState } from 'react';
import { StyleSheet, View, Text, TextInput, TouchableOpacity, AsyncStorage } from 'react-native';
import QRCode from 'react-native-qrcode-generator';

export default function App() {
  const [key, setKey] = useState(null);
  const [value, setValue] = useState(null);
  const [downloadKey, setDownloadKey] = useState(null);
  const [qrCodeValue, setQRCodeValue] = useState('');

  const save = async () => {
    //You have to implement the function that saves your information into your database.
    //Here I'm saving data to AsyncStorage. (For sample)

    await AsyncStorage.setItem(key, value);
  }

  const download = async () => {
    //You have to implement the function that retrieves your information from your database for given key.
    //Here I'm retrieving data from AsyncStorage. (For sample)

    const qrValue = await AsyncStorage.getItem(downloadKey);
    setQRCodeValue(qrValue);
  }

  return (
    <View style={styles.container}>

      <View style={styles.row}>
        <TextInput placeholder={'Key'} value={key} onChangeText={(key) => setKey(key)} style={styles.textInput}/>
        <TextInput placeholder={'Value'} value={value} onChangeText={(value) => setValue(value)} style={styles.textInput}/>
      </View>
      <TouchableOpacity style={{ flexDirection: 'row', marginBottom: 50 }} onPress={save}>
        <Text style={styles.button}>Save</Text>
      </TouchableOpacity>

      {qrCodeValue ? <QRCode value={qrCodeValue} size={200} /> : null}

      <Text style={{ margin: 10 }}>{qrCodeValue}</Text>

      <View style={[styles.row, { marginTop: 50 }]}>
        <TextInput placeholder={'Key'} value={downloadKey} onChangeText={(downloadKey) => setDownloadKey(downloadKey)} style={styles.textInput}/>
        <TouchableOpacity style={{ flex: 1, flexDirection: 'row' }} onPress={download}>
          <Text style={styles.button}>Download</Text>
        </TouchableOpacity>
      </View>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    paddingTop: 50,
    paddingBottom: 50
  },
  row: {
    flexDirection: 'row',
  },
  textInput: {
    flex: 1,
    borderColor: '#808080',
    borderWidth: 1,
    borderRadius: 5,
    margin: 5,
    paddingLeft: 5,
    paddingRight: 5,
  },
  button: {
    flex: 1,
    borderColor: '#0040FF',
    backgroundColor: '#0080FF',
    borderWidth: 1,
    borderRadius: 5,
    margin: 5,
    textAlign: 'center',
    textAlignVertical: 'center',
    height: 30
  },
});

Here is a Demo...

Please go through this and feel free to ask me if you have any further problems. Good luck!

You can use rn-qr-generator to generate a QR code with a given string value. It will return a path or base64 representation of the image. Later you can use CameraRoll to save the the image.

import RNQRGenerator from 'rn-qr-generator';
 
RNQRGenerator.generate({
  value: 'string_value',
  height: 100,
  width: 100,
  base64: false,
  backgroundColor: 'black',
  color: 'white',
})
  .then(response => {
    const { uri, width, height, base64 } = response;
  })
  .catch(error => console.log('Error creating QR code image', error));

If you want to save the QR Code as an image to your device, you should convert the QRcode view component into a png image and then store it.

You may use react-native-view-shot to convert the QRcode view component into a png image and rn-fetch-blob to save the image to your gallery.