QRCode scanner bounding box

Description

This component uses `expo-camera` to scan QR codes in real time and leverages `react-native-reanimated` to animate the bounding box that highlights detected codes on screen. The bounding box appears and moves smoothly using Reanimated's layout animations, enhancing the visual feedback for users.When a QR code is detected, the bounding box is dynamically rendered and animated into view. If no QR code is detected, the component gracefully hides the bounding box, either through animation or by not rendering it at all, depending on the state.This approach ensures a responsive and visually polished scanning experience, with minimal flicker or jank during detection transitions.

Installation

bunx @animatereactnative/cli@latest add qrcode-scanner-bounding-box

npx @animatereactnative/cli@latest add qrcode-scanner-bounding-box

yarn @animatereactnative/cli@latest add qrcode-scanner-bounding-box

pnpm dlx @animatereactnative/cli@latest add qrcode-scanner-bounding-box

Preview

Dependencies

PackageVersion
expo-camera~17.0.8
react-native-reanimated~4.1.0

To install these dependencies, you can use the following command:

bun add expo-camera@"~17.0.8" react-native-reanimated@"~4.1.0"

npm install expo-camera@"~17.0.8" react-native-reanimated@"~4.1.0"

yarn install expo-camera@"~17.0.8" react-native-reanimated@"~4.1.0"

pnpm install expo-camera@"~17.0.8" react-native-reanimated@"~4.1.0"

Source code