Open In App

Create a QR Code Generator App using React-Native

Last Updated : 25 May, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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.

Create-a--QR-Code-Generator

To give you a better idea of what we’re going to create, let’s watch a demo video.

Demo Video


Playground

Note: This Section is to interact with the app which you are going to build.


Prerequisites / Technologies Used

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app that is as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

  • For the Android users,
    • For the Android Emulator, press " a" as mentioned in the image below.
    • For the Physical Device, download the " Expo Go " app from the Play Store. Open the app, and you will see a button labeled " Scan QR Code. " Click that button and scan the QR code; it will automatically build the Android app on your device.
  • For iOS users, simply scan the QR code using the Camera app.
  • If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Install libraries

Package.json

{
  "dependencies": {
    "react-native-paper": "^5.14.0",
    "react-native-qrcode-svg": "^6.3.15"
  }
}

Now, run the below command.

npm install

Step 4: Start Coding

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

Let's dive into the code in detail.

- Import libraries:

Import required libraries at the top of the file.

JavaScript 
// Import useState hook from React
import { useState } from "react";
// Import required components from react-native
import {
    StyleSheet,      // For styling components
    Text,            // For displaying text
    TextInput,       // For user input
    TouchableOpacity,// For touchable button
    View             // For container views
} from "react-native";
// Import QRCode component from react-native-qrcode-svg
import QRCode from "react-native-qrcode-svg";


- StyleSheet:

Create a StyleSheet to style components like container, wrapper, title, etc.

JavaScript 
// Styles for the component
const styles = StyleSheet.create({
    container: {
        flex: 1, // Take full height
        justifyContent: 'center', // Center vertically
        alignItems: 'center', // Center horizontally
        backgroundColor: '#eee', // Light gray background
    },
    wrapper: {
        maxWidth: 300, // Max width of content
        backgroundColor: '#fff', // White background
        borderRadius: 7, // Rounded corners
        padding: 20, // Padding inside
        shadowColor: 'rgba(0, 0, 0, 0.1)', // Shadow color
        shadowOffset: { width: 0, height: 10 }, // Shadow offset
        shadowOpacity: 1, // Shadow opacity
        shadowRadius: 30, // Shadow blur radius
    },
    title: {
        fontSize: 21, // Title font size
        fontWeight: '500', // Title font weight
        marginBottom: 10, // Space below title
    },
    description: {
        color: '#575757', // Description text color
        fontSize: 16, // Description font size
        marginBottom: 20, // Space below description
    },
    input: {
        fontSize: 18, // Input text size
        padding: 17, // Padding inside input
        borderWidth: 1, // Border width
        borderColor: '#999', // Border color
        borderRadius: 5, // Rounded corners
        marginBottom: 20, // Space below input
    },
    button: {
        backgroundColor: '#3498DB', // Button background color
        borderRadius: 5, // Rounded corners
        padding: 15, // Padding inside button
        alignItems: 'center', // Center button text
    },
    buttonText: {
        color: '#fff', // Button text color
        fontSize: 18, // Button text size
    },
    qrCode: {
        marginTop: 20, // Space above QR code
        alignItems: 'center', // Center QR code horizontally
    },
});


- Title & Sub-Title:

This title and Subtitle explain what the app does. We use the text "QR Code Generator" as the title, "Paste a URL or enter text to create a QR code" as the subtitle, to show that the app is to generate QR Codes.

JavaScript 
<Text style={styles.title}>
    QR Code Generator {/* Title text */}
</Text>
<Text style={styles.description}>
    Paste a URL or enter text to create a QR code {/* Sub-title text */}
</Text>


- TextInput:

This TextInput is used to receive input from the user. We will show what the user types using a variable called "qrValue." When you type or change text in the TextInput, we will use the handleInputChange function to update the value. If the user clears the input in the TextInput, we will set the isActive state to false using the setIsActive function. This will help us decide whether to display the QR code or not.

JavaScript 
// State to hold the input value for QR code
const [qrValue, setQRValue] = useState("");
// State to control whether QR code is shown
const [isActive, setIsActive] = useState(false);
// Function to handle changes in TextInput
const handleInputChange = (text) => {
    // Update the input value state
    setQRValue(text);

    // If input is cleared, hide the QR code
    if (!text) {
        setIsActive(false);
    }
};

<TextInput
    style={styles.input} // Style for input
    placeholder="Enter text or URL" // Placeholder text
    value={qrValue} // Value bound to state
    onChangeText={handleInputChange} // Handle input changes
/>


- Generate QR Code Button:

This button is used to call the generateQRCode function when the user taps on it. It is made with the TouchableOpacity component, which makes the Text component interactive for the user.

JavaScript 
<TouchableOpacity
    style={styles.button} // Style for button
    onPress={generateQRCode} // Handle button press
>
    <Text style={styles.buttonText}>
        Generate QR Code {/* Button text */}
    </Text>
</TouchableOpacity>


- generateQRCode function:

This function checks if the qrvalue is false. If it is false, it doesn't do anything. If it's not false, it updates the isActive value by calling setIsActive with true as the argument.

JavaScript 
// State to control whether QR code is shown
const [isActive, setIsActive] = useState(false);

// Function to handle QR code generation
const generateQRCode = () => {
    // If input is empty, do nothing
    if (!qrValue)
        return;

    // Set isActive to true to display QR code
    setIsActive(true);
};


- Display QR Code:

We will display the QR Code only when the value of isActive is true using the QRCode component.

JavaScript 
{isActive && ( // Conditionally render QR code
<View style={styles.qrCode}> {/* QR code container */}
    <QRCode
        value={qrValue} // Value to encode in QR code
        size={200} // Size of QR code
        color="black" // Foreground color
        backgroundColor="white" // Background color
    />
</View>
)}


Now, wrap all design code with a View component, return it from the App component, and place all methods and useStates within the App component. Ensure to export the App.

Complete Source Code

App.js:

App.js 
// Import useState hook from React
import { useState } from "react";
// Import required components from react-native
import {
    StyleSheet,      // For styling components
    Text,            // For displaying text
    TextInput,       // For user input
    TouchableOpacity,// For touchable button
    View             // For container views
} from "react-native";
// Import QRCode component from react-native-qrcode-svg
import QRCode from "react-native-qrcode-svg";

// Main functional component for QR Code Generator
export default function QRCodeGenerator() {
    // State to hold the input value for QR code
    const [qrValue, setQRValue] = useState("");
    // State to control whether QR code is shown
    const [isActive, setIsActive] = useState(false);

    // Function to handle QR code generation
    const generateQRCode = () => {
        // If input is empty, do nothing
        if (!qrValue)
            return;

        // Set isActive to true to display QR code
        setIsActive(true);
    };

    // Function to handle changes in TextInput
    const handleInputChange = (text) => {
        // Update the input value state
        setQRValue(text);

        // If input is cleared, hide the QR code
        if (!text) {
            setIsActive(false);
        }
    };

    // Render the UI
    return (
        <View style={styles.container}> {/* Main container */}
            <View style={styles.wrapper}> {/* Wrapper for content */}
                <Text style={styles.title}>
                    QR Code Generator {/* Title text */}
                </Text>
                <Text style={styles.description}>
                    Paste a URL or enter text to create a QR code {/* Sub-title text */}
                </Text>
                <TextInput
                    style={styles.input} // Style for input
                    placeholder="Enter text or URL" // Placeholder text
                    value={qrValue} // Value bound to state
                    onChangeText={handleInputChange} // Handle input changes
                />
                <TouchableOpacity
                    style={styles.button} // Style for button
                    onPress={generateQRCode} // Handle button press
                >
                    <Text style={styles.buttonText}>
                        Generate QR Code {/* Button text */}
                    </Text>
                </TouchableOpacity>
                {isActive && ( // Conditionally render QR code
                    <View style={styles.qrCode}> {/* QR code container */}
                        <QRCode
                            value={qrValue} // Value to encode in QR code
                            size={200} // Size of QR code
                            color="black" // Foreground color
                            backgroundColor="white" // Background color
                        />
                    </View>
                )}
            </View>
        </View>
    );
}

// Styles for the component
const styles = StyleSheet.create({
    container: {
        flex: 1, // Take full height
        justifyContent: 'center', // Center vertically
        alignItems: 'center', // Center horizontally
        backgroundColor: '#eee', // Light gray background
    },
    wrapper: {
        maxWidth: 300, // Max width of content
        backgroundColor: '#fff', // White background
        borderRadius: 7, // Rounded corners
        padding: 20, // Padding inside
        shadowColor: 'rgba(0, 0, 0, 0.1)', // Shadow color
        shadowOffset: { width: 0, height: 10 }, // Shadow offset
        shadowOpacity: 1, // Shadow opacity
        shadowRadius: 30, // Shadow blur radius
    },
    title: {
        fontSize: 21, // Title font size
        fontWeight: '500', // Title font weight
        marginBottom: 10, // Space below title
    },
    description: {
        color: '#575757', // Description text color
        fontSize: 16, // Description font size
        marginBottom: 20, // Space below description
    },
    input: {
        fontSize: 18, // Input text size
        padding: 17, // Padding inside input
        borderWidth: 1, // Border width
        borderColor: '#999', // Border color
        borderRadius: 5, // Rounded corners
        marginBottom: 20, // Space below input
    },
    button: {
        backgroundColor: '#3498DB', // Button background color
        borderRadius: 5, // Rounded corners
        padding: 15, // Padding inside button
        alignItems: 'center', // Center button text
    },
    buttonText: {
        color: '#fff', // Button text color
        fontSize: 18, // Button text size
    },
    qrCode: {
        marginTop: 20, // Space above QR code
        alignItems: 'center', // Center QR code horizontally
    },
});

Output



Next Article
Create a QR Code Generator App using React-Native

S
saurabhkumarsharma05
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox