CODEWITHSUNDEEP
reactjsreact-nativeqr-code
Notation
Notation

Reputation: 325

Generate random QR in react-native

I have generated QR Code manually by asking user to input value but what I'm trying is to generate QR Code random(Qr should be generated from number) without asking input from user so how can I generate random QR Code by pressing button only? I'm working on project that requires random QR Code every time when they open their mobile app.

Here is my code:

import React, { Component } from "react";

import {
  StyleSheet,
  View,
  TextInput,
  TouchableOpacity,
  Text,
} from "react-native";

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

class QrGenerator extends Component {
  
  constructor() {
    super();
    this.state = {
      // Default Value of the TextInput
      inputValue: "",

      // Default value for the QR Code
      valueForQRCode: "",
    };
  }

  getTextInputValue = () => {
    this.setState({
      valueForQRCode: this.state.inputValue,
    });
  };

  render() {
    return (
      <View style={styles.MainContainer}>
        <QRCode
          //Setting the value of QRCode
          value={"ComputerGen" + this.state.valueForQRCode}

          //Size of QRCode
          size={250}

          //Background Color of QRCode
          bgColor="#000"

          //Front Color of QRCode
          fgColor="#fff"

          getRef={(ref) => (this.svg = ref)}
          onPress={() => {}}
        />
        <TextInput  // Input to get the value to set on QRCode
          style={styles.TextInputStyle}
          onChangeText={(text) => this.setState({ inputValue: text })}
          underlineColorAndroid="transparent"
          placeholder="Enter text to Generate QR Code"
        />

        <TouchableOpacity
          onPress={this.getTextInputValue}
          activeOpacity={0.7}
          style={styles.button}
        >
          <Text style={styles.TextStyle}> Generate QR Code </Text>
        </TouchableOpacity>
      </View>
    );
  }
}
export default QrGenerator;
const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    margin: 10,
    alignItems: "center",
    paddingTop: 40,
  },

  TextInputStyle: {
    width: "100%",
    height: 40,
    marginTop: 20,
    borderWidth: 1,
    textAlign: "center",
  },

  button: {
    width: "100%",
    paddingTop: 8,
    marginTop: 10,
    paddingBottom: 8,
    backgroundColor: "#F44336",
    marginBottom: 20,
  },

  TextStyle: {
    color: "#fff",
    textAlign: "center",
    fontSize: 18,
  },
});

Upvotes: 0

Views: 608

Answers (1)

Yasin Tazeoglu
Yasin Tazeoglu

Reputation: 1004

What you want to do is to make a random string "inputValue" if it is empty.

getTextInputValue = () => {
    if (this.state.inputValue.length === 0) {
        const randomInputValue = Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
        this.setState({
            valueForQRCode: randomInputValue,
            inputValue: randomInputValue,
        });
    } else {
        this.setState({
            valueForQRCode: this.state.inputValue,
        });
    }
};

Upvotes: 1

Related Questions