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.
Screenshot after successfully installed the react-native-qrcode library:
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 Upload Image to Server using PHP MySQL iOS Android Tutorial
React Native Create Rounded Corners Button Android iOS Tutorial
React Native Create Beautiful Social Icons Button using React Native Elements Example Tutorial
React Native Animated Placeholder – Android iOS Example
React Native WebView Android iOS Installation Example Tutorial
