React Native - Generate QR Code - Mobile Application development

Congratulations! You are standing in the right place! In this article, we are making a TextInput to get the value for QR Code and after clicking on “Generate QR Code” it will engender the QR Code.

QR Code withal kenned as Quick Response Code is a trademark for the two-dimensional barcode. QR Code is a machine-readable block enabled code for encoding numeric value and alphabetic value. The QR Code stores information within a block of images and can store multiple types of information, They are very expeditious responsible and can be readable expeditiously and decoded.

Screenshot


Implementation:

First, You must set up your local development environment. Follow the below link to set up your local environment.


After executing the commands mentioned in this link, a folder with a specified name is created with the following contents.


Install react-native-svg and react-native-qrcode-svg package, which will provide <QRCode/> component to make QRCode.

npm install react-native-svg --save

npm install react-native-qrcode-svg --save


Next, we are going to edit the  App.js file and write the below code. 

Import React in our code

import React, { useState } from 'react';

Import all the components we are going to use

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

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

View

return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
<Text style={styles.textStyle}>
Please insert any value to generate QR code
</Text>
<TextInput
style={styles.textInputStyle}
onChangeText={
(inputText) => setInputText(inputText)
}
placeholder="Enter Any Value"
value={inputText}
/>
<TouchableOpacity
style={styles.buttonStyle}
onPress={() => setQrvalue(inputText)}>
<Text style={styles.buttonTextStyle}>
Generate QR Code
</Text>
</TouchableOpacity>

<Text>{`\n`}</Text>
<QRCode
//QR code value
value={qrvalue ? qrvalue : 'NA'}
//size of QR Code
size={250}
//Color of the QR Code (Optional)
color="purple"
//Background Color of the QR Code (Optional)
backgroundColor="white"

/>
</View>
</SafeAreaView>
);
};

Style Sheet

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
padding: 10,
},
textStyle: {
textAlign: 'center',
margin: 10,
},
textInputStyle: {
flexDirection: 'row',
height: 40,
marginTop: 20,
marginLeft: 35,
marginRight: 35,
margin: 10,
},
buttonStyle: {
backgroundColor: 'purple',
borderWidth: 0,
color: 'white',
borderColor: '#51D8C7',
alignItems: 'center',
borderRadius: 5,
marginTop: 15,
padding: 10,
},
buttonTextStyle: {
color: '#FFFFFF',
paddingVertical: 10,
fontSize: 16,
},
});

Complete source code for App.js File

import React, { useState } from 'react';

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

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

const App = () => {
const [inputText, setInputText] = useState('');
const [qrvalue, setQrvalue] = useState('');

return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
<Text style={styles.textStyle}>
Please insert any value to generate QR code
</Text>
<TextInput
style={styles.textInputStyle}
onChangeText={
(inputText) => setInputText(inputText)
}
placeholder="Enter Any Value"
value={inputText}
/>
<TouchableOpacity
style={styles.buttonStyle}
onPress={() => setQrvalue(inputText)}>
<Text style={styles.buttonTextStyle}>
Generate QR Code
</Text>
</TouchableOpacity>

<Text>{`\n`}</Text>
<QRCode
value={qrvalue ? qrvalue : 'NA'}
size={250}
color="purple"
backgroundColor="white"

/>
</View>
</SafeAreaView>
);
};
export default App;

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
padding: 10,
},
textStyle: {
textAlign: 'center',
margin: 10,
},
textInputStyle: {
flexDirection: 'row',
height: 40,
marginTop: 20,
marginLeft: 35,
marginRight: 35,
margin: 10,
},
buttonStyle: {
backgroundColor: 'purple',
borderWidth: 0,
color: 'white',
borderColor: '#51D8C7',
alignItems: 'center',
borderRadius: 5,
marginTop: 15,
padding: 10,
},
buttonTextStyle: {
color: '#FFFFFF',
paddingVertical: 10,
fontSize: 16,
},
});

Run

sibinmuhammed@ladmin-H310M-S2:~$ react-native start
sibinmuhammed@ladmin-H310M-S2:~/knf-reactnative/KnowledgeFactoryDemo$ react-native run-android


More...

Popular posts from this blog

Learn Java 8 streams with an example - print odd/even numbers from Array and List

Java Stream API - How to convert List of objects to another List of objects using Java streams?

Registration and Login with Spring Boot + Spring Security + Thymeleaf

Java, Spring Boot Mini Project - Library Management System - Download

ReactJS, Spring Boot JWT Authentication Example

Top 5 Java ORM tools - 2024

Java - Blowfish Encryption and decryption Example

Spring boot video streaming example-HTML5

Google Cloud Storage + Spring Boot - File Upload, Download, and Delete