Open
Conversation
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds a DataConfirmation screen and InputField (with date picker), MRZ date-parsing helpers and re-exports in the SDK, new analytics events, navigation wiring to DataConfirmation, utilities/tests for string diffing, and the Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant DataConfirmation as "DataConfirmationScreen"
participant InputField as "InputField"
participant MRZStore as "MRZ Store"
participant Analytics as "Analytics"
participant Navigation as "Navigation"
User->>DataConfirmation: open (after MRZ read)
DataConfirmation->>MRZStore: read MRZ data
MRZStore-->>DataConfirmation: initial fields
User->>InputField: edit fields (number / dates)
InputField-->>DataConfirmation: onChangeText / onDateChange
User->>DataConfirmation: tap Continue
DataConfirmation->>DataConfirmation: calculateFirstDifference(original, modified)
alt changes detected
DataConfirmation->>Analytics: track MRZ_DATA_MODIFIED
DataConfirmation->>MRZStore: setMRZForNFC(updatedData)
else no changes
DataConfirmation->>Analytics: track DATA_CONFIRMATION_COMPLETED (had_changes: false)
end
DataConfirmation->>Navigation: navigate to DocumentNFCScan
Navigation-->>User: show NFC scan
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
📝 Coding Plan
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 Tip CodeRabbit can enforce grammar and style rules using `languagetool`.Configure the |
Collaborator
Author
|
@coderabbitai review |
- change date picker library
|
| GitGuardian id | GitGuardian status | Secret | Commit | Filename | |
|---|---|---|---|---|---|
| 19414827 | Triggered | Generic Password | acdb573 | app/ios/PassportReaderCore.swift | View secret |
🛠 Guidelines to remediate hardcoded secrets
- Understand the implications of revoking this secret by investigating where it is used in your code.
- Replace and store your secret safely. Learn here the best practices.
- Revoke and rotate this secret.
- If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.
To avoid such incidents in the future consider
- following these best practices for managing and storing secrets including API keys and other credentials
- install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.
🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 6
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/src/components/InputField.tsx`:
- Around line 164-175: The shared text style object textInput in InputField.tsx
includes the web-only property outlineStyle which is not part of React Native's
TextStyle and causes TS2769; remove outlineStyle from the textInput style (or
move it behind a web-only conditional) and ensure any web-specific focus styling
is applied only in a platform-specific path (e.g., a separate web-only style or
Platform.select) so TextInput and its typing accept the style without error.
In `@app/src/screens/documents/scanning/DataConfirmationScreen.test.tsx`:
- Around line 55-57: The test currently creates a nested require('react-native')
inside the jest.mock callback which is banned; fix by removing the nested
require and instead import View and Text at the top of the test file via
top-level ES imports (e.g., import { View, Text } from 'react-native') and then
use those imported symbols inside the jest.mock('@/components/InputField', ...)
mock implementation so the mock reuses the hoisted View and Text instead of
requiring react-native at runtime.
- Around line 55-77: The current jest.mock for InputField replaces the real
component with a passive stub that doesn't forward edits, hiding the MRZ
confirmation behavior; replace the stub with a minimal mock that preserves
behavior by rendering a TextInput (or a component that calls the provided
onChangeText prop) and binds value and onChangeText so tests can drive and
observe actual user edits. Locate the mocked InputField in
DataConfirmationScreen.test.tsx (the jest.mock block) and change it to render an
interactive element that uses the onChangeText prop (and the same testID scheme)
or simply import the real InputField component for the test so
fireEvent.changeText triggers the same prop wiring the production code uses.
Ensure inputFieldCallbacks are no longer used to simulate edits; instead drive
edits via fireEvent.changeText on the rendered testID to validate real prop
forwarding.
In `@app/src/screens/documents/scanning/DataConfirmationScreen.tsx`:
- Around line 73-78: handleDateChange currently calls
formatDateToYYMMDD(date.toISOString()) which shifts the day for non-UTC users;
instead generate a local-date ISO (using date.getFullYear(), date.getMonth()+1,
date.getDate() with zero-padding) or otherwise convert the Date to a local
YYYY-MM-DD string and pass that into formatDateToYYMMDD before calling
setFields, so the MRZ YYMMDD preserves the user's selected local day while
InputField can still display its selectedDate. Ensure you update only
handleDateChange (and keep formatDateToYYMMDD usage) so setFields([... ,
[field]: mrzFormattedDate]) receives the corrected local-based MRZ value.
- Around line 89-121: The code currently sends raw MRZ characters because
calculateFirstDifference(...) results are placed into diffs and forwarded to
trackEvent(PassportEvents.MRZ_DATA_MODIFIED); replace that behavior by redacting
or replacing the diff values before sending (e.g., store only field names,
indices/positions of differences, masked snippets like first/last character or
length, or a boolean), i.e., transform filteredDiffs so values do NOT contain
actual MRZ/PII (use calculateFirstDifference only to compute metadata, then map
its output to a non-PII representation) and pass that sanitized object and
counts to trackEvent instead of raw diffs.
In `@packages/mobile-sdk-alpha/src/processing/mrz.ts`:
- Around line 341-350: parseMRZDateComponents currently only checks length and
allows non-numeric/impossible YYMMDD values through; update it to reject
malformed dates by (1) ensuring all 6 characters are digits, (2) parsing
year/month/day into numbers, (3) mapping two‑digit year to a full year the code
expects (keep existing YY->YYYY logic if present elsewhere), (4) constructing a
Date (use UTC or consistent timezone) and then verifying the Date's
year/month/day match the parsed components (to catch overflow like month=13 or
day=32); if any check fails return null. Apply the same stricter
validation/verification logic to parseMRZExpiryDate so both helpers only return
valid date objects or null.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 1a2045ba-c697-4fe5-8dc1-30f825b4bb32
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (15)
app/package.jsonapp/src/components/InputField.tsxapp/src/navigation/documents.tsapp/src/navigation/types.tsapp/src/providers/selfClientProvider.tsxapp/src/screens/documents/scanning/DataConfirmationScreen.test.tsxapp/src/screens/documents/scanning/DataConfirmationScreen.tsxapp/src/utils/diffCalculator.test.tsapp/src/utils/diffCalculator.tsapp/src/utils/documentAttributes.tspackages/mobile-sdk-alpha/src/constants/analytics.tspackages/mobile-sdk-alpha/src/index.tspackages/mobile-sdk-alpha/src/mrz/index.tspackages/mobile-sdk-alpha/src/processing/mrz.tspackages/mobile-sdk-alpha/tests/processing/mrz.test.ts
Comment on lines
+73
to
+78
| const handleDateChange = (field: keyof DocumentData, date: Date) => { | ||
| const mrzFormattedDate = formatDateToYYMMDD(date.toISOString()); | ||
| setFields(prev => ({ | ||
| ...prev, | ||
| [field]: mrzFormattedDate, | ||
| })); |
Contributor
There was a problem hiding this comment.
Preserve the selected local day when formatting MRZ dates.
toISOString() converts the picker value to UTC before formatDateToYYMMDD() slices out the date part, so users east of UTC can have DOB/expiry saved one day early. Because InputField also keeps its own selectedDate, the UI can still show the user’s chosen day while fields already contains the shifted YYMMDD that gets sent into the NFC flow.
💡 Suggested fix
const handleDateChange = (field: keyof DocumentData, date: Date) => {
- const mrzFormattedDate = formatDateToYYMMDD(date.toISOString());
+ const localDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+ const mrzFormattedDate = formatDateToYYMMDD(localDate);
setFields(prev => ({
...prev,
[field]: mrzFormattedDate,
}));
};🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@app/src/screens/documents/scanning/DataConfirmationScreen.tsx` around lines
73 - 78, handleDateChange currently calls formatDateToYYMMDD(date.toISOString())
which shifts the day for non-UTC users; instead generate a local-date ISO (using
date.getFullYear(), date.getMonth()+1, date.getDate() with zero-padding) or
otherwise convert the Date to a local YYYY-MM-DD string and pass that into
formatDateToYYMMDD before calling setFields, so the MRZ YYMMDD preserves the
user's selected local day while InputField can still display its selectedDate.
Ensure you update only handleDateChange (and keep formatDateToYYMMDD usage) so
setFields([... , [field]: mrzFormattedDate]) receives the corrected local-based
MRZ value.
Collaborator
Author
There was a problem hiding this comment.
what would be an alternative here? formatting the date not in ISO format?
Contributor
There was a problem hiding this comment.
@shazarre, yes — the core problem is that toISOString() always emits a UTC timestamp string, so any date-string slicing done inside formatDateToYYMMDD operates on the UTC date, not the one the user tapped in the picker.
There are a few alternatives, all of which avoid going through UTC:
Option 1 — Build the local ISO string manually (recommended, shown in the fix):
const localDate = [
date.getFullYear(),
String(date.getMonth() + 1).padStart(2, '0'),
String(date.getDate()).padStart(2, '0'),
].join('-');
const mrzFormattedDate = formatDateToYYMMDD(localDate); // still YYMMDDThis keeps formatDateToYYMMDD in place and is explicit about using local time.
Option 2 — Use toLocaleDateString with the en-CA locale:
const localDate = date.toLocaleDateString('en-CA'); // → "YYYY-MM-DD" in local time
const mrzFormattedDate = formatDateToYYMMDD(localDate);Shorter, but technically relies on locale formatting being available on the device.
Option 3 — Skip formatDateToYYMMDD and compute YYMMDD directly:
const yy = String(date.getFullYear()).slice(-2);
const mm = String(date.getMonth() + 1).padStart(2, '0');
const dd = String(date.getDate()).padStart(2, '0');
const mrzFormattedDate = `${yy}${mm}${dd}`;Most direct, but duplicates the slicing logic that formatDateToYYMMDD already handles.
Option 1 is the cleanest since it reuses the existing utility without introducing locale dependencies or duplicating logic.
🧠 Learnings used
Learnt from: shazarre
Repo: selfxyz/self PR: 1236
File: packages/mobile-sdk-alpha/src/flows/onboarding/document-nfc-screen.tsx:356-378
Timestamp: 2025-10-23T12:08:55.529Z
Learning: In packages/mobile-sdk-alpha/src/flows/onboarding/document-nfc-screen.tsx, the NFC native events emitted via NativeEventEmitter are generic status strings (e.g., "PACE succeeded", "BAC failed", "Reading DG1 succeeded") and do not contain sensitive MRZ data or passport numbers, so they do not require sanitization before logging.
Learnt from: seshanthS
Repo: selfxyz/self PR: 1497
File: app/src/screens/verification/ProveScreen.tsx:125-161
Timestamp: 2025-12-13T18:00:46.963Z
Learning: In app/src/screens/verification/ProveScreen.tsx: The document expiration check using checkDocumentExpiration() is UX-only to prevent wasted gas and provide better user experience. The authoritative expiration validation is enforced in the circuits and smart contracts using trusted time sources (block timestamps), not device clock.
Learnt from: CR
Repo: selfxyz/self PR: 0
File: packages/mobile-sdk-alpha/AGENTS.md:0-0
Timestamp: 2026-02-23T23:10:18.287Z
Learning: Applies to packages/mobile-sdk-alpha/**/*.test.{ts,tsx} : Test `isPassportDataValid()` with realistic, synthetic passport data instead of real user PII
Learnt from: shazarre
Repo: selfxyz/self PR: 1767
File: packages/mobile-sdk-alpha/src/processing/mrz.ts:341-350
Timestamp: 2026-03-10T22:04:14.033Z
Learning: In packages/mobile-sdk-alpha/src/processing/mrz.ts, parseMRZBirthDate and parseMRZExpiryDate (and the internal parseMRZDateComponents helper) are only called after MRZ data has already been fully validated by extractMRZInfo, which runs ICAO 9303 format checks and check-digit verification. The date fields are guaranteed to be valid 6-digit numeric strings at that call site, so additional input guards in these helpers are redundant.
Learnt from: CR
Repo: selfxyz/self PR: 0
File: .cursor/rules/compliance-verification.mdc:0-0
Timestamp: 2025-11-25T14:07:28.188Z
Learning: Applies to **/{compliance,ofac,verification,identity}/**/*.{ts,tsx,js,py} : Implement three-tier OFAC verification system: Passport Number Check (direct passport validation), Name + DOB Check (full name with exact date of birth), and Name + Year Check (name with year of birth, defaulting to Jan-01)
Learnt from: seshanthS
Repo: selfxyz/self PR: 1686
File: app/src/stores/pendingKycStore.ts:14-14
Timestamp: 2026-02-04T09:33:30.563Z
Learning: In app/src/stores/pendingKycStore.ts: The VERIFICATION_TIMEOUT_MS (48 hours) and related Date.now() usage for createdAt/timeoutAt/expiry checks are UX-only for managing retry logic when fetching verification status. This is not security-sensitive; authoritative verification enforcement happens server-side or on-chain, not in this client-side timeout mechanism.
Learnt from: CR
Repo: selfxyz/self PR: 0
File: .cursor/rules/compliance-verification.mdc:0-0
Timestamp: 2025-11-25T14:07:28.188Z
Learning: Applies to **/{compliance,ofac,verification,identity,age}/**/*.{ts,tsx,js,py} : Use ISO 8601 format (YYYY-MM-DD) for all date inputs in compliance verification
Learnt from: CR
Repo: selfxyz/self PR: 0
File: .cursor/rules/compliance-verification.mdc:0-0
Timestamp: 2025-11-25T14:07:28.188Z
Learning: Applies to **/{age,verification,identity,compliance}/**/*.{ts,tsx,js,py} : Implement age verification with day-level precision for 'olderThan' checks accepting ISO 8601 date inputs
Learnt from: CR
Repo: selfxyz/self PR: 0
File: packages/mobile-sdk-alpha/AGENTS.md:0-0
Timestamp: 2026-02-23T23:10:18.287Z
Learning: Applies to packages/mobile-sdk-alpha/**/*.test.{ts,tsx} : Verify `extractMRZInfo()` using published sample MRZ strings (e.g., ICAO examples) instead of real user data
Learnt from: CR
Repo: selfxyz/self PR: 0
File: .cursor/rules/compliance-verification.mdc:0-0
Timestamp: 2025-11-25T14:07:28.188Z
Learning: Applies to **/{compliance,verification,identity,age,country}/**/*.{ts,tsx,js,py} : Use UTC timestamps only for all compliance verification operations
Learnt from: CR
Repo: selfxyz/self PR: 0
File: .cursor/rules/compliance-verification.mdc:0-0
Timestamp: 2025-11-25T14:07:28.188Z
Learning: Applies to **/{compliance,verification,identity,age,country}/**/*.{ts,tsx,js,py} : Allow ±5 minutes clock drift tolerance in timestamp validation for compliance checks
Learnt from: CR
Repo: selfxyz/self PR: 0
File: app/AGENTS.md:0-0
Timestamp: 2026-02-23T23:09:49.023Z
Learning: Document complex native module changes in PR description
Learnt from: seshanthS
Repo: selfxyz/self PR: 1337
File: packages/mobile-sdk-alpha/src/processing/mrz.ts:189-194
Timestamp: 2025-11-18T12:17:14.819Z
Learning: In packages/mobile-sdk-alpha/src/processing/mrz.ts, the checkScannedInfo function and related TD1 extraction/validation logic are only reached on Android. iOS uses native Swift parsing (LiveMRZScannerView.swift) that bypasses this TypeScript layer.
Learnt from: CR
Repo: selfxyz/self PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-03-03T03:53:13.788Z
Learning: Address CodeRabbitAI feedback or document why not during post-PR review
Learnt from: transphorm
Repo: selfxyz/self PR: 1670
File: packages/mobile-sdk-alpha/tests/data/country-data-sync.integration.test.ts:16-19
Timestamp: 2026-01-30T18:25:54.862Z
Learning: Guideline: The import alias '@/'' for src and 'tests/' for tests should be applicable only within the app directory. In code reviews, enforce that imports use these aliases exclusively in app/**/*.{ts,tsx,js,jsx} files. Do not apply this alias convention in non-app packages (e.g., packages/mobile-sdk-alpha) where relative imports are used. This pattern covers all relevant application files; exclude non-app packages by scope.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/src/components/InputField.tsx`:
- Around line 14-15: The file imports the native DatePicker unconditionally and
renders it inside the InputField component, which breaks web; change to a
platform split by removing the top-level import of DatePicker and instead
require/import the native picker only on native platforms (use Platform.OS or
Platform.select) and render a web-safe fallback (e.g., an HTML input type="date"
or react-native-web compatible component) inside InputField's render/return
path; specifically, replace the unconditional DatePicker import with a
conditional lazy require (or dynamic import) and update the JSX in InputField
(the block that currently renders DatePicker) to choose between the native
DatePicker and the web input based on Platform.OS === 'web'.
- Around line 42-44: InputField currently constructs selectedDate once with
useState and formats it using local getters which causes timezone shifts, and it
imports react-native-date-picker unconditionally breaking web builds; update
InputField to (1) resync selectedDate whenever the value prop changes by adding
a useEffect that calls setSelectedDate(new Date(value)) (ensure you
normalize/parse the incoming ISO as UTC if needed), (2) when producing display
strings or extracting year/month/day use UTC getters
(getUTCFullYear/getUTCMonth/getUTCDate) instead of local getters to avoid
midnight-UTC shifts, and (3) make the react-native-date-picker import/platform
usage conditional (use Platform.OS !== 'web' or a dynamic require) and render a
web-safe fallback (e.g., input type="date" or a web picker) when on web so the
native-only library is not imported on web. Ensure references to selectedDate,
setSelectedDate, InputField, and the date formatting code are updated
accordingly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 8a061e26-5b2d-40fa-b198-3664fc47381f
📒 Files selected for processing (1)
app/src/components/InputField.tsx
Comment on lines
+42
to
+44
| const [selectedDate, setSelectedDate] = useState<Date>( | ||
| value ? new Date(value) : new Date(), | ||
| ); |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
fd -t f "InputField.tsx" --exec cat -n {} \;Repository: selfxyz/self
Length of output: 5260
🏁 Script executed:
head -120 app/src/components/InputField.tsx | tail -80Repository: selfxyz/self
Length of output: 2028
🏁 Script executed:
cat -n app/src/components/InputField.tsx | sed -n '1,110p'Repository: selfxyz/self
Length of output: 3339
🏁 Script executed:
cat -n app/src/screens/documents/scanning/DataConfirmationScreen.tsx | sed -n '150,180p'Repository: selfxyz/self
Length of output: 1323
🏁 Script executed:
rg -B 5 -A 5 "parseMRZBirthDate|parseMRZExpiryDate" app/src/screens/documents/scanning/DataConfirmationScreen.tsxRepository: selfxyz/self
Length of output: 1050
🏁 Script executed:
rg "Platform.OS|web|Web" app/src/components/InputField.tsx app/src/screens/documents/scanning/DataConfirmationScreen.tsxRepository: selfxyz/self
Length of output: 38
🏁 Script executed:
rg "react-native-date-picker" --type ts --type tsx -lRepository: selfxyz/self
Length of output: 83
🏁 Script executed:
grep -r "createStaticNavigation\|initialRouteName.*web\|platform.*web" app/src --include="*.ts" --include="*.tsx" | head -20Repository: selfxyz/self
Length of output: 591
🏁 Script executed:
rg "Platform\\.OS" app/src/components -A 2 -B 2Repository: selfxyz/self
Length of output: 1381
🏁 Script executed:
fd "\.web\." app/src --type f | head -20Repository: selfxyz/self
Length of output: 661
🏁 Script executed:
cat package.json | grep -A 2 "react-native-date-picker"Repository: selfxyz/self
Length of output: 38
🏁 Script executed:
cat package.json | head -100Repository: selfxyz/self
Length of output: 4973
🏁 Script executed:
cat app/package.json | grep -i "react-native-date-picker"Repository: selfxyz/self
Length of output: 98
🏁 Script executed:
fd "InputField" app/src --type fRepository: selfxyz/self
Length of output: 89
🏁 Script executed:
rg "formatDate.*getMonth|getDate.*getFullYear" -A 3Repository: selfxyz/self
Length of output: 50370
🏁 Script executed:
rg "handleConfirm.*date" app/src/screens/documents/scanning/DataConfirmationScreen.tsx -A 5Repository: selfxyz/self
Length of output: 38
🏁 Script executed:
cat -n app/src/screens/documents/scanning/DataConfirmationScreen.tsx | sed -n '160,185p'Repository: selfxyz/self
Length of output: 1081
🏁 Script executed:
rg "useEffect" app/src/components/InputField.tsxRepository: selfxyz/self
Length of output: 38
🏁 Script executed:
rg "Platform.OS" app/src/components/InputField.tsxRepository: selfxyz/self
Length of output: 38
🏁 Script executed:
grep -n "react-native-date-picker" app/package.jsonRepository: selfxyz/self
Length of output: 102
🏁 Script executed:
rg "\.web\.(tsx|ts)" app/src/components --type-listRepository: selfxyz/self
Length of output: 445
🏁 Script executed:
fd "\.web\." app/src/componentsRepository: selfxyz/self
Length of output: 204
Fix date timezone handling, resync value changes, and add platform-specific date picker.
The component rehydrates ISO timestamps with new Date(value) and formats them using local-time getters (getMonth(), getDate(), getFullYear()), which can shift the calendar day by timezone—a midnight UTC value could display as the previous day. Additionally, selectedDate is only initialized once; parent-side value updates won't be reflected. Finally, react-native-date-picker is a native-only library with no web support but is imported unconditionally in this shared component, breaking web builds.
💡 Suggested fix
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
import {
Pressable,
StyleSheet,
Text,
TextInput,
View,
type ViewStyle,
} from 'react-native';
-import DatePicker from 'react-native-date-picker';
+import { Platform } from 'react-native';
+
+const DatePicker = Platform.OS === 'web' ? null : require('react-native-date-picker').default;
import { colors } from '@selfxyz/euclid';
@@
const [showDatePicker, setShowDatePicker] = useState(false);
- const [selectedDate, setSelectedDate] = useState<Date>(
- value ? new Date(value) : new Date(),
- );
+
+ const parseDateValue = (raw?: string): Date => {
+ if (!raw) {
+ return new Date();
+ }
+
+ const parsed = new Date(raw);
+ return new Date(
+ parsed.getUTCFullYear(),
+ parsed.getUTCMonth(),
+ parsed.getUTCDate(),
+ );
+ };
+
+ const [selectedDate, setSelectedDate] = useState<Date>(parseDateValue(value));
+
+ useEffect(() => {
+ setSelectedDate(parseDateValue(value));
+ }, [value]);
const formatDate = (date: Date): string => {
const months = [
@@ -100,6 +122,9 @@ export const InputField: React.FC<InputFieldProps> = ({
'Dec',
];
return `${months[date.getMonth()]} ${date.getDate()} ${date.getFullYear()}`;
+ };
+
+ if (Platform.OS === 'web' || type !== 'date') {
};
if (type === 'date') {
const displayValue = formatDate(selectedDate);
return (
<Pressable style={[styles.container, style]} onPress={handleDatePress}>
<Text style={styles.label}>{label}</Text>
<Text style={styles.value}>{displayValue}</Text>
+ {Platform.OS !== 'web' && DatePicker && (
<DatePicker
modal
open={showDatePicker}
date={selectedDate}
mode="date"
title={label}
confirmText="Confirm"
cancelText="Cancel"
onConfirm={handleConfirm}
onCancel={handleCancel}
theme="light"
/>
+ )}
</Pressable>
);
}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@app/src/components/InputField.tsx` around lines 42 - 44, InputField currently
constructs selectedDate once with useState and formats it using local getters
which causes timezone shifts, and it imports react-native-date-picker
unconditionally breaking web builds; update InputField to (1) resync
selectedDate whenever the value prop changes by adding a useEffect that calls
setSelectedDate(new Date(value)) (ensure you normalize/parse the incoming ISO as
UTC if needed), (2) when producing display strings or extracting year/month/day
use UTC getters (getUTCFullYear/getUTCMonth/getUTCDate) instead of local getters
to avoid midnight-UTC shifts, and (3) make the react-native-date-picker
import/platform usage conditional (use Platform.OS !== 'web' or a dynamic
require) and render a web-safe fallback (e.g., input type="date" or a web
picker) when on web so the native-only library is not imported on web. Ensure
references to selectedDate, setSelectedDate, InputField, and the date formatting
code are updated accordingly.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR adds support for confirming MRZ data needed for later NFC scanning utilizing euclid DataConfirmation screen.
Tested
Tested on an example MRZ data (https://www.idenfy.com/blog/machine-readable-zone/) and a real passport.
How to QA
Scan MRZ data, compare with the result on the screen (change something and observe analytics data).
Blocked by https://github.com/selfxyz/euclid/pull/71
TODO
Summary by CodeRabbit
New Features
Tests
Chores