Create a QR Code Generator App using React-Native

In this article, we will walk you through the process of building a QR Code Generator app using React Native. A QR Code Generator App is a mobile application that allows users to create QR codes from text or URLs. It generates QR codes, which can store information such as website links, contact details, or other data, for easy sharing and scanning by others.

Let’s take a look at how our completed project will look:

Prerequisites / Technologies Used

• Introduction to React Native
• React Native Components
• React Hooks
• Node.js and Npm

Steps to Create React Native Application

Step 1: Create a React Native Application

Create a new React Native project for QRCodeGeneratorApp

npx create-expo-app QRCodeGeneratorApp

Step 2: ​Change the directory to the project folder:

cd QRCodeGeneratorApp

Step 3: Install Required Packages

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

Project Structure

Package.json

{
  "dependencies": {
    "react-native-paper": "4.9.2",
    "@expo/vector-icons": "^13.0.0",
    "react-native-qrcode-svg": "*",
    "react-native-svg": "13.4.0"
  }
}

Approach/ Functionalities

In this approach,The React Native code defines

• Functional Component: a functional component named QRCodeGenerator. It uses React Hooks, including useState, to manage component state.State Management: The component uses useState to manage state variables for the QR code value (qrValue) and its activation (isActive).
• User Input Handling: It captures and updates user input in the TextInput field and toggles isActive when input is present.
• QR Code Generation: A QR code is generated using the react-native-qrcode-svg package when the “Generate QR Code” button is pressed.
• Styling: The app is styled with CSS-in-JS using StyleSheet.create for consistent design, including shadows, text, and button styles.
• Component Structure: The app’s UI is structured into a container with a title, description, input field, button, and conditional rendering of the QR code display based on user interaction.

Example: In this example we are using the above-explained apporach.

Javascript

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity,
    Image, StyleSheet } from 'react-native';
import QRCode from 'react-native-qrcode-svg';

export default function QRCodeGenerator() {
    const [qrValue, setQRValue] = useState('');
    const [isActive, setIsActive] = useState(false);

    const generateQRCode = () => {
        if (!qrValue) return;

        setIsActive(true);
    };

    const handleInputChange = (text) => {
        setQRValue(text);

        if (!text) {
            setIsActive(false);
        }
    };

    return (
        <View style={styles.container}>
            <View style={styles.wrapper}>
                <Text style={styles.title}>
                    QR Code Generator
                </Text>
                <Text style={styles.description}>
                    Paste a URL or enter text to create a QR code
                </Text>
                <TextInput
                    style={styles.input}
                    placeholder="Enter text or URL"
                    value={qrValue}
                    onChangeText={handleInputChange}
                />
                <TouchableOpacity
                    style={styles.button}
                    onPress={generateQRCode}
                >
                    <Text style={styles.buttonText}>
                        Generate QR Code
                    </Text>
                </TouchableOpacity>
                {isActive && (
                    <View style={styles.qrCode}>
                        <QRCode
                            value={qrValue}
                            size={200}
                            color="black"
                            backgroundColor="white"
                        />
                    </View>
                )}
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#eee',
    },
    wrapper: {
        maxWidth: 300,
        backgroundColor: '#fff',
        borderRadius: 7,
        padding: 20,
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowOffset: { width: 0, height: 10 },
        shadowOpacity: 1,
        shadowRadius: 30,
    },
    title: {
        fontSize: 21,
        fontWeight: '500',
        marginBottom: 10,
    },
    description: {
        color: '#575757',
        fontSize: 16,
        marginBottom: 20,
    },
    input: {
        fontSize: 18,
        padding: 17,
        borderWidth: 1,
        borderColor: '#999',
        borderRadius: 5,
        marginBottom: 20,
    },
    button: {
        backgroundColor: '#3498DB',
        borderRadius: 5,
        padding: 15,
        alignItems: 'center',
    },
    buttonText: {
        color: '#fff',
        fontSize: 18,
    },
    qrCode: {
        marginTop: 20,
        alignItems: 'center',
    },
});

Steps to Run:

To run react native application use the following command:

npx expo start

• To run on Android:

npx react-native run-android

• To run on iOS:

npx react-native run-ios

Output: