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
Dependencies
| Package | Version |
|---|---|
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"