📱 React Native QR Scanner

A modern QR scanner built using React Native Vision Camera.
Features a modal-based camera view, clean permission handling screen, scan result alert popup, and displays last scanned value on the home screen.

---

✨ Features

• 📷 High-performance camera using react-native-vision-camera
• 🔍 QR Code scanning
• 💡 Modal-based camera UI
• 🔐 Smooth camera permission handling screen
• 🔔 Alert popup after successful scan
• 📝 Displays last scanned result on screen
• 🚫 Prevents multiple scan triggers
• 🎨 Clean and minimal UI

---

🛠️ Tech Stack

• React Native
• TypeScript
• react-native-vision-camera

---

⚙️ Installation

1️⃣ Clone the repository

git clone https://github.com/dev78ashish/react-native-qr-code-scanner.git
cd react-native-qr-code-scanner

2️⃣ Install dependencies

npm install
# or
yarn install

3️⃣ Install iOS pods (iOS only)

cd ios && pod install && cd ..

4️⃣ Configure camera permissions

iOS (Info.plist)

Add the following to your Info.plist:

<key>NSCameraUsageDescription</key>
<string>We need camera access to scan QR codes</string>

Android (AndroidManifest.xml)

Add the following to your AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />

---

🚀 Running the App

iOS

npx react-native run-ios

Android

npx react-native run-android

---

📖 Usage

1. Launch the app
2. Tap the "Grant Permission" button
3. Grant camera permissions
4. Tap the "Open Camera" button
5. Point the camera at a QR code
6. View the scanned result in an alert and on the home screen

---

📂 Project Structure

react-native-qr-code-scanner/
├── src/
│   ├── components/
│   │   ├── CameraComponent.tsx      # Main camera scanner component
│   └── screens/
│       └── HomeScreen.tsx      # Home screen with scan button
│   
├── android/                    # Android native code
├── ios/                        # iOS native code
├── package.json
└── App.tsx                     # Root component

---

Styling

Modify styles in each component file to match your app's design system.

---

📦 Key Dependencies

{
  "react-native-vision-camera": "^4.7.3",
}

---

🐛 Troubleshooting

Camera not working on Android

• Ensure permissions are granted in app settings
• Check that AndroidManifest.xml includes camera permission
• Verify that the device has a working camera

Build errors on iOS

• Run cd ios && pod install && cd ..
• Clean build folder in Xcode: Product > Clean Build Folder
• Delete ios/Pods and ios/Podfile.lock, then reinstall pods

Frame processor errors

• Ensure you're using the correct version of react-native-vision-camera
• Rebuild the app after installing the vision camera package
• Check that Reanimated worklets are properly configured

---

🙏 Acknowledgments

• react-native-vision-camera - Amazing camera library

---

📞 Support

If you have any questions or need help, please open an issue on GitHub.

Happy Scanning! 📱✨