Skip to content

Conversation

@summxu
Copy link

@summxu summxu commented Jan 5, 2026

Checklist

  • Contains unit tests ❌
  • Contains breaking changes ❌
  • Compatible with: MX 8, 9, 10
  • Did you update version and changelog? ❌
  • PR title properly formatted (feat: barcode-scanner-native area scanning, flash, navigation switch reset active)? ✅
  • Works in Android ✅
  • Works in iOS ✅
  • Works in Tablet ✅

Feature specific

  • Comply with designs ✅
  • Comply with PM's requirements ✅

This PR contains

  • [x ] Bug fix
  • Feature
  • Refactor
  • Documentation
  • Other (describe)

What is the purpose of this PR?

This PR enhances the barcode-scanner-native widget by adding flashlight control capabilities and improving scanning precision. It implements a masking logic to restrict scanning to a specific area and improves the camera's lifecycle management regarding app state changes.

Relevant changes

Flashlight Support:

  • Implemented the flashlight switch button UI and interaction logic.
  • Integrated react-native-vector-icons library to display flashlight icons.
  • Updated component type definitions to include the new showFlashToggle property.

Scanning Area & Logic:

  • Implemented scanning area filtering logic to process only the QR/Barcodes located within the scanning mask.
  • Added proportional coordinate conversion to support accurate filtering across devices with different resolutions.

Refactor & Optimization:

  • Refactored the camera component layout by adding cameraWrapper and camera styles.
  • Implemented app state listening and page focus detection to ensure changes to the isActive property of the camera component are handled correctly (pausing/resuming camera).

What should be covered while testing?

  • Flashlight: Verify that the flashlight icon appears (if enabled via prop) and successfully toggles the device torch on/off.
  • Scanning Area: Try scanning a code positioned outside the designated mask area (it should not trigger). Then move it inside the mask (it should trigger).
  • Resolutions: Test on devices with different screen sizes/aspect ratios to ensure the scanning area calculation is accurate.
  • App State: Background the app and bring it back to the foreground; navigate away from the page and return. Ensure the camera pauses and resumes (previews correctly) without freezing.

Extra comments (optional)

N/A

- Implemented flashlight switch button UI and interaction logic
- Integrate react-native-vector-icons library to display flashlight icons
- Updated component type definitions to include new showFlashToggle properties
- Implement the scanning area filtering logic to process only the QR code within the scanning mask
- Add proportional conversion to support accurate filtering for devices with different resolutions
- Refactor the camera component layout to add cameraWrapper and camera styles
- Implement app state listening and page focus detection to ensure changes to the isActive property of the camera component
@summxu summxu requested a review from a team as a code owner January 5, 2026 08:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants