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 :
React Native QR Code Scanner App using Camera Android iOS Example
React Native Get Android iOS Device Unique ID Dynamically Example
React Native Change Activity Action Bar Title Text Color StackNavigator
React Native Simple Custom GridView Layout Android iOS Tutorial
Dynamically Generate Random Color on Button Click in React Native
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.