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

Question

I'm trying to build an app generator and scanner QR code in react native using hooks. I want a solution to save/download the QR code in the device after generating them. I need help plz, thanks

react-native-qrcode-generator Can anyone give me suggestions on how to save this generated QR Code? Any help much appreciated

Answer 1

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!