Working demo app mrz scan screen #1232
Conversation
WalkthroughAdds Android UI resources (drawables and fonts), wires Android native package via React Native config and demo app setup, changes MRZScannerView to use SelfOCRViewManager on Android, updates demo build (dependencies, packaging, CAMERA permission), and adjusts DocumentCamera UI and styles. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant App as Demo App
participant RNHost as ReactNativeHost
participant PkgList as PackageList
participant MainApp as MainApplication
participant RNSelf as RNSelfPassportReaderPackage
App->>RNHost: Initialize
RNHost->>PkgList: Build default packages
PkgList-->>RNHost: packages
RNHost->>MainApp: getPackages()
MainApp->>MainApp: create mutable list from PackageList(this).packages
MainApp->>RNSelf: instantiate new RNSelfPassportReaderPackage()
MainApp-->>RNHost: return augmented package list
note right of RNHost: react-native.config.cjs now\nprovides Android autolinking metadata
sequenceDiagram
autonumber
participant JS as MRZScannerView (JS)
participant RCT as RCTFragment
participant Mgr as SelfOCRViewManager (Android)
participant View as Native OCR View
JS->>RCT: create fragment ("SelfOCRViewManager")
RCT->>Mgr: attach/instantiate manager
Mgr->>View: configure/start OCR
View-->>JS: onMRZDetected(data)
View-->>JS: onError(error)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 300000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
transphorm
changed the title
| @@ -0,0 +1,8 @@ | |||
| <shape xmlns:android="http://schemas.android.com/apk/res/android" | |||
There was a problem hiding this comment.
@seshanthS i was able to get the demo app mrz scan going...but I had to add these files to the msdk
transphorm
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (6)
packages/mobile-sdk-alpha/android/src/main/res/font/roboto_bold.ttfis excluded by!**/*.ttfpackages/mobile-sdk-alpha/android/src/main/res/font/roboto_bold_italic.ttfis excluded by!**/*.ttfpackages/mobile-sdk-alpha/android/src/main/res/font/roboto_italic.ttfis excluded by!**/*.ttfpackages/mobile-sdk-alpha/android/src/main/res/font/roboto_medium.ttfis excluded by!**/*.ttfpackages/mobile-sdk-alpha/android/src/main/res/font/roboto_medium_italic.ttfis excluded by!**/*.ttfpackages/mobile-sdk-alpha/android/src/main/res/font/roboto_regular.ttfis excluded by!**/*.ttf
📒 Files selected for processing (13)
packages/mobile-sdk-alpha/android/src/main/res/drawable/toggle_background_border.xml(1 hunks)packages/mobile-sdk-alpha/android/src/main/res/drawable/toggle_background_left.xml(1 hunks)packages/mobile-sdk-alpha/android/src/main/res/drawable/toggle_background_right.xml(1 hunks)packages/mobile-sdk-alpha/android/src/main/res/font/bold.xml(1 hunks)packages/mobile-sdk-alpha/android/src/main/res/font/medium.xml(1 hunks)packages/mobile-sdk-alpha/android/src/main/res/font/regular.xml(1 hunks)packages/mobile-sdk-alpha/react-native.config.cjs(1 hunks)packages/mobile-sdk-alpha/src/components/MRZScannerView.tsx(1 hunks)packages/mobile-sdk-demo/android/app/build.gradle(2 hunks)packages/mobile-sdk-demo/android/app/src/main/AndroidManifest.xml(1 hunks)packages/mobile-sdk-demo/android/app/src/main/java/com/selfxyz/demoapp/MainApplication.kt(1 hunks)packages/mobile-sdk-demo/android/settings.gradle(1 hunks)packages/mobile-sdk-demo/src/screens/DocumentCamera.tsx(6 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{js,ts,tsx,jsx,sol,nr}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{js,ts,tsx,jsx,sol,nr}: NEVER log sensitive data including PII (names, DOB, passport numbers, addresses), credentials, tokens, API keys, private keys, or session identifiers.
ALWAYS redact/mask sensitive fields in logs using consistent patterns (e.g.,***-***-1234for passport numbers,J*** D***for names).
Files:
packages/mobile-sdk-demo/src/screens/DocumentCamera.tsxpackages/mobile-sdk-alpha/src/components/MRZScannerView.tsx
packages/mobile-sdk-alpha/**/*.{ts,tsx}
📄 CodeRabbit inference engine (packages/mobile-sdk-alpha/AGENTS.md)
packages/mobile-sdk-alpha/**/*.{ts,tsx}: Use strict TypeScript type checking across the codebase
Follow ESLint TypeScript-specific rules
Avoid introducing circular dependencies
Files:
packages/mobile-sdk-alpha/src/components/MRZScannerView.tsx
packages/mobile-sdk-alpha/**/*.{ts,tsx,js,jsx}
⚙️ CodeRabbit configuration file
packages/mobile-sdk-alpha/**/*.{ts,tsx,js,jsx}: Review alpha mobile SDK code for:
- API consistency with core SDK
- Platform-neutral abstractions
- Performance considerations
- Clear experimental notes or TODOs
Files:
packages/mobile-sdk-alpha/src/components/MRZScannerView.tsx
🧠 Learnings (7)
📚 Learning: 2025-08-29T15:31:15.924Z
Learnt from: CR
PR: selfxyz/self#0
File: packages/mobile-sdk-alpha/AGENTS.md:0-0
Timestamp: 2025-08-29T15:31:15.924Z
Learning: Applies to packages/mobile-sdk-alpha/**/package.json : Ensure package exports are properly configured
Applied to files:
packages/mobile-sdk-alpha/react-native.config.cjs
📚 Learning: 2025-08-24T21:22:29.459Z
Learnt from: transphorm
PR: selfxyz/self#943
File: app/android/app/src/main/java/com/proofofpassportapp/MainApplication.kt:17-17
Timestamp: 2025-08-24T21:22:29.459Z
Learning: OpenSourceMergedSoMapping from com.facebook.react.soloader.OpenSourceMergedSoMapping is available and functional in React Native 0.75.x. It can be safely imported and used for SoLoader initialization in MainApplication.kt without causing build failures.
Applied to files:
packages/mobile-sdk-demo/android/app/src/main/java/com/selfxyz/demoapp/MainApplication.kt
📚 Learning: 2025-08-29T15:31:15.924Z
Learnt from: CR
PR: selfxyz/self#0
File: packages/mobile-sdk-alpha/AGENTS.md:0-0
Timestamp: 2025-08-29T15:31:15.924Z
Learning: Applies to packages/mobile-sdk-alpha/{**/*.test.{ts,tsx},**/__tests__/**/*.{ts,tsx}} : Verify extractMRZInfo() using published sample MRZ strings (e.g., ICAO examples)
Applied to files:
packages/mobile-sdk-alpha/src/components/MRZScannerView.tsx
📚 Learning: 2025-08-24T18:54:04.809Z
Learnt from: CR
PR: selfxyz/self#0
File: .cursor/rules/mobile-sdk-migration.mdc:0-0
Timestamp: 2025-08-24T18:54:04.809Z
Learning: Applies to packages/mobile-sdk-alpha/demo/** : Provide an in-SDK lightweight React Native demo under packages/mobile-sdk-alpha/demo/
Applied to files:
packages/mobile-sdk-demo/android/settings.gradle
📚 Learning: 2025-08-24T18:54:04.809Z
Learnt from: CR
PR: selfxyz/self#0
File: .cursor/rules/mobile-sdk-migration.mdc:0-0
Timestamp: 2025-08-24T18:54:04.809Z
Learning: Applies to packages/mobile-sdk-alpha/samples/** : Create sample applications under packages/mobile-sdk-alpha/samples/ (RN demo and web demo)
Applied to files:
packages/mobile-sdk-demo/android/settings.gradle
📚 Learning: 2025-08-24T18:54:04.809Z
Learnt from: CR
PR: selfxyz/self#0
File: .cursor/rules/mobile-sdk-migration.mdc:0-0
Timestamp: 2025-08-24T18:54:04.809Z
Learning: Update the app to consume the mobile-sdk-alpha package and replace local modules with SDK imports
Applied to files:
packages/mobile-sdk-demo/android/app/build.gradle
📚 Learning: 2025-08-24T18:54:04.809Z
Learnt from: CR
PR: selfxyz/self#0
File: .cursor/rules/mobile-sdk-migration.mdc:0-0
Timestamp: 2025-08-24T18:54:04.809Z
Learning: Applies to packages/mobile-sdk-alpha/src/artifacts/** : Place artifact and manifest management in packages/mobile-sdk-alpha/src/artifacts/
Applied to files:
packages/mobile-sdk-demo/android/app/build.gradle
🧬 Code graph analysis (1)
packages/mobile-sdk-demo/src/screens/DocumentCamera.tsx (1)
packages/mobile-sdk-demo/src/components/DocumentScanResultCard.tsx (1)
DocumentScanResultCard(14-66)
⏰ Context from checks skipped due to timeout of 300000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: type-check
- GitHub Check: build-deps
- GitHub Check: android-build-test
- GitHub Check: e2e-ios
- GitHub Check: analyze-ios
- GitHub Check: analyze-android
🔇 Additional comments (16)
packages/mobile-sdk-demo/src/screens/DocumentCamera.tsx (4)
85-88: Clear UI improvement for instruction visibility.Moving the instructions above the camera view (rather than as an overlay) improves readability and ensures users see the guidance before interacting with the scanner. The structured layout with separate title and text enhances scannability.
109-109: Good responsive layout handling.The conditional styling appropriately adds spacing when a scan result is present, ensuring visual separation between the action buttons and the result card below.
119-119: Logical content flow enhancement.Positioning the result card after the action buttons creates a natural top-to-bottom reading flow: instructions → scanner → status → actions → results. The conditional rendering ensures users only see the card when scan data is available.
133-146: Well-structured and consistent styling.The new styles demonstrate good practices:
- Clear typographic hierarchy (instructionsTitle at 16px/600 weight, instructionsText at 14px)
- Consistent color palette usage (#0f172a, #475569)
- Proper spacing values that align with the existing design system
- Centered status alignment improves visual polish
Also applies to: 162-163, 167-167, 187-189
packages/mobile-sdk-demo/android/app/src/main/AndroidManifest.xml (1)
4-4: LGTM - Camera permission correctly declared.The CAMERA permission declaration is properly placed and aligns with the PR objective to enable runtime permission requests for camera functionality.
packages/mobile-sdk-demo/android/settings.gradle (1)
8-9: LGTM - Module inclusion correctly configured.The mobile-sdk-alpha module is properly included with the correct relative path. This enables the demo app to use the native Android SDK components.
packages/mobile-sdk-alpha/android/src/main/res/drawable/toggle_background_border.xml (1)
7-7: Referenced color resource exists
@color/grey_2is defined in colors.xml:14.packages/mobile-sdk-alpha/android/src/main/res/font/medium.xml (1)
7-7: Font resource files are present. Bothroboto_medium.ttfandroboto_medium_italic.ttfexist inres/font, so no action required.packages/mobile-sdk-alpha/android/src/main/res/font/regular.xml (1)
7-7: Font files verified. Bothroboto_regular.ttfandroboto_italic.ttfare present inpackages/mobile-sdk-alpha/android/src/main/res/font/.packages/mobile-sdk-alpha/src/components/MRZScannerView.tsx (1)
128-128: Verify Android native ViewManager registration.
No occurrences ofSelfOCRViewManager(orPassportOCRViewManager) were found in the Android Java sources—confirm that the native code (Java/Kotlin) registers a ViewManager with the exact name"SelfOCRViewManager", or update accordingly to prevent runtime crashes.packages/mobile-sdk-alpha/android/src/main/res/font/bold.xml (1)
7-7: Referenced font files exist
Found bothroboto_bold.ttfandroboto_bold_italic.ttfinpackages/mobile-sdk-alpha/android/src/main/res/font/.packages/mobile-sdk-demo/android/app/src/main/java/com/selfxyz/demoapp/MainApplication.kt (1)
18-21: Enable Corepack and re-run autolinking to confirm package discovery
Due to the Yarn version mismatch, autolinking isn’t running; enable Corepack (or use Yarn 4.6.0) and runnpx react-native configinpackages/mobile-sdk-demo/androidto verify thatRNSelfPassportReaderPackageis auto-linked—then remove the manualpackages.add(RNSelfPassportReaderPackage())if it appears.packages/mobile-sdk-demo/android/app/build.gradle (3)
46-50: LGTM!The packaging exclusion for
META-INF/versions/9/OSGI-INF/MANIFEST.MFcorrectly resolves a common multi-module dependency conflict.
1-65: Inconsistency: Camera permission missing from review.The PR objective states "Declares the Android camera permission in the demo app manifest so runtime permission requests can succeed," but the
AndroidManifest.xmlfile is not included in this review. Please ensure the camera permission declaration is present.
62-64: All dependencies are secure
No vulnerabilities found forcom.google.android.material:material:1.12.0.packages/mobile-sdk-alpha/react-native.config.cjs (1)
17-21: LGTM!The Android platform configuration correctly wires the native module with proper sourceDir, packageImportPath, and packageInstance. This follows React Native best practices for native module integration.
Summary
Testing
https://chatgpt.com/codex/tasks/task_b_68e49b734270832dace1e57a3299630e
Summary by CodeRabbit
New Features
Style
Chores