QR Code also known as Quick Response Code is a trademark for two-dimensional barcode. QR Code is machine(Camera) 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 type of information, They are very quick responsible and can be readable quickly and decoded. The QR Code consist black square blocks on a grid format. In mobile application development QR Code is used to share information like ID, Website URL, App URL and different type of data. So in this tutorial we would going to make a react native app that Get value from TextInput and Generate QR Code Image from entered value in both android and iOS application. So let’s get started :).
Contents in this project Generate QR Code in React Native Android iOS App Example Tutorial:
1. We are using the GitHub NPM library react-native-qrcode in this tutorial to generate QR Code, So we need install this library in our react native project. To install first goto your react native project folder and execute the npm install react-native-qrcode --save command.
2. Import StyleSheet, View, TextInput, TouchableOpacity and Text, Platform component in your project.
|
1 2 3 |
import React, { Component } from 'react'; import {StyleSheet, View, TextInput, TouchableOpacity, Text, Platform} from 'react-native'; |
3. Import QRCode class from react-native-qrcode library module.
|
1 |
import QRCode from 'react-native-qrcode'; |
4. Create constructor() in your class. We are creating 2 State named as Text_Holder_1 and Text_Holder_2.
Text_Holder_1 : Is used to store TextInput entered value.
Text_Holder_2 : Is used to store Text_Holder_1 value on button click event. The Text_Holder_2 value is used to Generate QR Code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
constructor(){ super(); this.state={ Text_Holder_1 : '', Text_Holder_2 : '' } } |
5. Create a function named as getTextInputValue(). This function would store the Text_Holder_1 State value into Text_Holder_2 state. We would call this function on button onPress event.
|
1 2 3 4 5 |
getTextInputValue=()=>{ this.setState({Text_Holder_2 : this.state.Text_Holder_1}); } |
6. Create a Root View in render’s return block.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
render() { return ( <View style={styles.MainContainer}> </View> ); } |
7. Create 1 TextInput and 1 Button using TouchableOpacity component.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
render() { return ( <View style={styles.MainContainer}> <TextInput style={styles.TextInputStyle} onChangeText={(text) => this.setState({Text_Holder_1: text})} underlineColorAndroid = "transparent" placeholder="Enter URL to Generate QR Code" /> <TouchableOpacity onPress={this.getTextInputValue} activeOpacity={0.7} style={styles.button} > <Text style={styles.TextStyle}> Click Here To Generate QR Code </Text> </TouchableOpacity> </View> ); } |
8. Create QR Code component inside Root View.
Props of QR Code generator component:
value : Value of QR Code.
size : Size of QR Code image.
bgColor : Block color of QR Code image.
fgColor : Background color of QR Code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
render() { return ( <View style={styles.MainContainer}> <TextInput style={styles.TextInputStyle} onChangeText={(text) => this.setState({Text_Holder_1: text})} underlineColorAndroid = "transparent" placeholder="Enter URL to Generate QR Code" /> <TouchableOpacity onPress={this.getTextInputValue} activeOpacity={0.7} style={styles.button} > <Text style={styles.TextStyle}> Click Here To Generate QR Code </Text> </TouchableOpacity> <QRCode value={this.state.Text_Holder_2} size={250} bgColor='#000' fgColor='#fff'/> </View> ); } |
9. Create Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, margin: 10, alignItems: 'center', paddingTop: (Platform.OS === 'ios') ? 20 : 0 }, TextInputStyle: { width: '100%', height: 40, borderRadius: 10, marginBottom: 10, borderWidth: 1, borderColor: '#F44336', textAlign: 'center' }, button: { width: '100%', paddingTop:8, paddingBottom:8, backgroundColor: '#009688', borderRadius:7, marginBottom: 20 }, TextStyle:{ color:'#fff', textAlign:'center', fontSize: 18 } }); |
10. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
import React, { Component } from 'react'; import {StyleSheet, View, TextInput, TouchableOpacity, Text} from 'react-native'; import QRCode from 'react-native-qrcode'; export default class App extends Component<{}> { constructor(){ super(); this.state={ Text_Holder_1 : '', Text_Holder_2 : '' } } getTextInputValue=()=>{ this.setState({Text_Holder_2 : this.state.Text_Holder_1}); } render() { return ( <View style={styles.MainContainer}> <TextInput style={styles.TextInputStyle} onChangeText={(text) => this.setState({Text_Holder_1: text})} underlineColorAndroid = "transparent" placeholder="Enter URL to Generate QR Code" /> <TouchableOpacity onPress={this.getTextInputValue} activeOpacity={0.7} style={styles.button} > <Text style={styles.TextStyle}> Click Here To Generate QR Code </Text> </TouchableOpacity> <QRCode value={this.state.Text_Holder_2} size={250} bgColor='#000' fgColor='#fff'/> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, margin: 10, alignItems: 'center', paddingTop: (Platform.OS === 'ios') ? 20 : 0 }, TextInputStyle: { width: '100%', height: 40, borderRadius: 10, marginBottom: 10, borderWidth: 1, borderColor: '#F44336', textAlign: 'center' }, button: { width: '100%', paddingTop:8, paddingBottom:8, backgroundColor: '#009688', borderRadius:7, marginBottom: 20 }, TextStyle:{ color:'#fff', textAlign:'center', fontSize: 18 } }); |
Screenshot in Android device:
Screenshots in iOS device :
Also Read :
Wish You All a Very Very Happy New Year 2018
React Native NetInfo Example to Detect Internet Connection Android iOS
React Native Create Auto Image Slider Gallery Android iOS with Page Indicator
Example of Creating Pre Populated SQLite Database For React Native
React Native Show SVG Image from Online URL and Local Resource Android iOS Example Tutorial
Can you make same like QR Code Reader
Sure Subrat we will post this tutorial on Sunday 🙂 .
hi admin, how to adjust the QRCode position? Because I follow the step above and my QRCode is cover the text holder and button. How i adjust my QRCode to bottom limit or how to solve this problem?
Just wrap the QR code component in View component and apply any style on View and set the QR code.
Hi How to scan Bar Code and QR Code in React-Native
Nitin here is the link of my tutorial on Scanning QR code : https://reactnativecode.com/qr-code-scanner-app-using-camera/ and i have yet not make any tutorial on BAR CODE. But soon i will post tutorial on bar code scanner.
what i do when i want to add in QR real time and date and accesToken without taking any input text