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:
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:
Contact Us