Generate QR Code in React Native Android iOS App Example Tutorial

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.

3. Import QRCode class from react-native-qrcode library module.

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.

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.

6. Create a Root View in render’s return block.

7. Create 1 TextInput and 1 Button using TouchableOpacity component.

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.

9. Create Style.

10. Complete source code for App.js File :

Screenshot in Android device:

Generate QR CodeScreenshots in iOS device :

4 Comments

  1. Can you make same like QR Code Reader

  2. 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?

Leave a Reply

Your email address will not be published. Required fields are marked *