[Odometer] Image stitching#83556
Merged
Julesssss merged 28 commits intoExpensify:mainfrom Mar 13, 2026
Merged
Conversation
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
Contributor
|
Hey @jakubkalinski0, the linked PR was merged, is this ready for review? |
20 tasks
Contributor
Author
Yes it is. I will just test it and add videos to the PR description and we are good to go with the review |
melvin-bot
bot
requested review from
mjasikowski and
trjExpensify
and removed request for
a team
|
@mjasikowski Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
Contributor
🦜 Polyglot Parrot! 🦜Squawk! Looks like you added some shiny new English strings. Allow me to parrot them back to you in other tongues: View the translation diffdiff --git a/src/languages/de.ts b/src/languages/de.ts
index cf894701..fffbe2c3 100644
--- a/src/languages/de.ts
+++ b/src/languages/de.ts
@@ -1445,6 +1445,7 @@ const translations: TranslationDeepObject<typeof en> = {
endDateSameAsStartDate: 'Das Enddatum darf nicht mit dem Startdatum übereinstimmen',
manySplitsProvided: `Die maximale Anzahl zulässiger Aufteilungen beträgt ${CONST.IOU.SPLITS_LIMIT}.`,
dateRangeExceedsMaxDays: `Der Datumsbereich darf ${CONST.IOU.SPLITS_LIMIT} Tage nicht überschreiten.`,
+ stitchOdometerImagesFailed: 'Kilometerzählerbilder konnten nicht zusammengeführt werden. Bitte versuchen Sie es später noch einmal.',
},
dismissReceiptError: 'Fehler ausblenden',
dismissReceiptErrorConfirmation: 'Achtung! Wenn du diesen Fehler schließt, wird deine hochgeladene Quittung vollständig entfernt. Bist du sicher?',
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
index 90d1bc29..c01c3ada 100644
--- a/src/languages/fr.ts
+++ b/src/languages/fr.ts
@@ -1449,6 +1449,7 @@ const translations: TranslationDeepObject<typeof en> = {
endDateSameAsStartDate: 'La date de fin ne peut pas être identique à la date de début',
manySplitsProvided: `Le nombre maximal de répartitions autorisées est de ${CONST.IOU.SPLITS_LIMIT}.`,
dateRangeExceedsMaxDays: `La plage de dates ne peut pas dépasser ${CONST.IOU.SPLITS_LIMIT} jours.`,
+ stitchOdometerImagesFailed: 'Échec de la combinaison des images de l’odomètre. Veuillez réessayer plus tard.',
},
dismissReceiptError: 'Ignorer l’erreur',
dismissReceiptErrorConfirmation: 'Attention ! Ignorer cette erreur supprimera complètement votre reçu téléversé. Êtes-vous sûr ?',
diff --git a/src/languages/it.ts b/src/languages/it.ts
index f8387f93..89db03bc 100644
--- a/src/languages/it.ts
+++ b/src/languages/it.ts
@@ -1442,6 +1442,7 @@ const translations: TranslationDeepObject<typeof en> = {
endDateSameAsStartDate: 'La data di fine non può essere uguale alla data di inizio',
manySplitsProvided: `Il numero massimo di suddivisioni consentite è ${CONST.IOU.SPLITS_LIMIT}.`,
dateRangeExceedsMaxDays: `L’intervallo di date non può superare ${CONST.IOU.SPLITS_LIMIT} giorni.`,
+ stitchOdometerImagesFailed: 'Impossibile combinare le immagini del contachilometri. Riprova più tardi.',
},
dismissReceiptError: 'Ignora errore',
dismissReceiptErrorConfirmation: 'Attenzione! Chiudere questo errore rimuoverà completamente la ricevuta che hai caricato. Sei sicuro?',
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
index b0d71e2c..a47570b1 100644
--- a/src/languages/ja.ts
+++ b/src/languages/ja.ts
@@ -1433,6 +1433,7 @@ const translations: TranslationDeepObject<typeof en> = {
endDateSameAsStartDate: '終了日は開始日と同じにはできません',
manySplitsProvided: `分割できる最大数は${CONST.IOU.SPLITS_LIMIT}件です。`,
dateRangeExceedsMaxDays: `日付範囲は${CONST.IOU.SPLITS_LIMIT}日を超えることはできません。`,
+ stitchOdometerImagesFailed: '走行距離計の画像を結合できませんでした。後でもう一度お試しください。',
},
dismissReceiptError: 'エラーを閉じる',
dismissReceiptErrorConfirmation: 'ご注意ください！このエラーを閉じると、アップロード済みのレシートが完全に削除されます。本当に続行しますか？',
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
index 19e934b4..70d71a39 100644
--- a/src/languages/nl.ts
+++ b/src/languages/nl.ts
@@ -1440,6 +1440,7 @@ const translations: TranslationDeepObject<typeof en> = {
endDateSameAsStartDate: 'De einddatum mag niet gelijk zijn aan de startdatum',
manySplitsProvided: `Het maximale aantal toegestane splitsingen is ${CONST.IOU.SPLITS_LIMIT}.`,
dateRangeExceedsMaxDays: `Het datumbereik mag niet meer dan ${CONST.IOU.SPLITS_LIMIT} dagen zijn.`,
+ stitchOdometerImagesFailed: 'Odometerafbeeldingen combineren mislukt. Probeer het later opnieuw.',
},
dismissReceiptError: 'Foutmelding sluiten',
dismissReceiptErrorConfirmation: 'Let op! Dit foutbericht negeren verwijdert je geüploade bon volledig. Weet je het zeker?',
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
index 280523cb..be773c96 100644
--- a/src/languages/pl.ts
+++ b/src/languages/pl.ts
@@ -1439,6 +1439,7 @@ const translations: TranslationDeepObject<typeof en> = {
endDateSameAsStartDate: 'Data zakończenia nie może być taka sama jak data rozpoczęcia',
manySplitsProvided: `Maksymalna dozwolona liczba podziałów to ${CONST.IOU.SPLITS_LIMIT}.`,
dateRangeExceedsMaxDays: `Zakres dat nie może przekraczać ${CONST.IOU.SPLITS_LIMIT} dni.`,
+ stitchOdometerImagesFailed: 'Nie udało się połączyć zdjęć licznika kilometrów. Spróbuj ponownie później.',
},
dismissReceiptError: 'Odrzuć błąd',
dismissReceiptErrorConfirmation: 'Uwaga! Zamknięcie tego błędu spowoduje całkowite usunięcie przesłanego paragonu. Czy na pewno chcesz kontynuować?',
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
index ccc0a57f..55ea73c1 100644
--- a/src/languages/pt-BR.ts
+++ b/src/languages/pt-BR.ts
@@ -1437,6 +1437,7 @@ const translations: TranslationDeepObject<typeof en> = {
endDateSameAsStartDate: 'A data de término não pode ser igual à data de início',
manySplitsProvided: `O número máximo de divisões permitido é ${CONST.IOU.SPLITS_LIMIT}.`,
dateRangeExceedsMaxDays: `O intervalo de datas não pode exceder ${CONST.IOU.SPLITS_LIMIT} dias.`,
+ stitchOdometerImagesFailed: 'Falha ao combinar imagens do hodômetro. Tente novamente mais tarde.',
},
dismissReceiptError: 'Dispensar erro',
dismissReceiptErrorConfirmation: 'Atenção! Ignorar este erro removerá completamente o comprovante que você enviou. Tem certeza?',
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
index 8a754ecc..192f3125 100644
--- a/src/languages/zh-hans.ts
+++ b/src/languages/zh-hans.ts
@@ -1410,6 +1410,7 @@ const translations: TranslationDeepObject<typeof en> = {
endDateSameAsStartDate: '结束日期不能与开始日期相同',
manySplitsProvided: `允许的最大拆分数为 ${CONST.IOU.SPLITS_LIMIT}。`,
dateRangeExceedsMaxDays: `日期范围不能超过 ${CONST.IOU.SPLITS_LIMIT} 天。`,
+ stitchOdometerImagesFailed: '合并里程表图片失败。请稍后重试。',
},
dismissReceiptError: '忽略错误',
dismissReceiptErrorConfirmation: '提醒：关闭此错误将彻底删除你上传的收据。确定要继续吗？',
Note You can apply these changes to your branch by copying the patch to your clipboard, then running |
Contributor
Author
|
@DylanDylann Could you redo your review or maybe you @Julesssss want to do that? |
Contributor
|
I will review again totally. Thanks for the update |
Contributor
Author
|
@DylanDylann When it comes to this discussion I have already created a draft PR here so we will be able to go ahead with that when this image stitching PR gets merged to the corresponding branch (so probably tomorrow?). |
Contributor
Author
|
Failing job test is, as far as I can see, completely unrelated |
Contributor
|
Test passed on retry |
Julesssss
previously approved these changes
Mar 12, 2026
Contributor
We're down to hopefully a final review 🤞 |
Contributor
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppScreen.Recording.2026-03-13.at.18.42.51.movAndroid: mWeb ChromeScreen.Recording.2026-03-13.at.18.37.49.moviOS: HybridAppScreen.Recording.2026-03-13.at.18.41.06.moviOS: mWeb SafariScreen.Recording.2026-03-13.at.18.38.42.movMacOS: Chrome / SafariScreen.Recording.2026-03-13.at.18.30.00.mov |
Contributor
|
@Expensify/design Could you take a look at the stitching image below? Do you think we should display it smaller so users can see it fully? Currently, the preview is cut off, and users can only see the full image by clicking on it. Screen.Recording.2026-03-13.at.18.30.00.movAnother case on mobile where the second image is only partially displayed. Screen.Recording.2026-03-13.at.18.38.42.mov |
Contributor
|
@jakubkalinski0 The rest looks fine to me |
Contributor
Author
|
@DylanDylann Then I guess we wait for the designs decision. In the meantime I will implement the adjusted preview and have it ready on hand. |
Contributor
Author
|
If we are already in the topic of clarifying where do we want the preview adjusted then I would like to list all the places that could potentially look problematic. I think those are all places (if I missed any please correct me). Which ones would we like to adjust? Some/all/none of them? 
|
Contributor
Author
|
@DylanDylann I've caught one small issue/bug, so I fixed it already. It's a very small change |
Contributor
Author
|
@Julesssss Maybe we should move that discussion to the followup and get this PR going? |
Contributor
Yeah, exactly what I was thinking this morning. Unfortunately the failing test case does appear to be failng with the latest changes. Actually perhaps it's coincidentally related... Will rerun again 🤞 |
Julesssss
approved these changes
Mar 13, 2026
Contributor
Julesssss
left a comment
Julesssss
left a comment
There was a problem hiding this comment.
Approving the final commit
Contributor
|
Tests passing. We'll merge this final feature and can discuss the image stitching alignment separately. |
Contributor
Author
Yeah I think it is. This test job has been acting up this week |
Contributor
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
Contributor
|
🚧 @Julesssss has triggered a test Expensify/App build. You can view the workflow run here. |
Contributor
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
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
7 participants
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.
Explanation of Change
This PR implements the next part of the Odometer feature. It adds the image stitching/merging flow that automatically combines the start and end odometer photos into a single receipt image.
Image stitching library (
src/libs/stitchOdometerImages/):stitchLayout.ts- Calculates optimal layout: if both images are portrait (height > width), arrange vertically, if there is at least one landscape then we arrange them horizontally.index.ts(web) - Uses the HTML Canvas API to draw both images onto an offscreen canvas, exports as a blob URL. Revokes the previous blob URL to prevent memory leaks (only one URL is kept at a time).index.native.ts(native) - Uses@shopify/react-native-skiafor GPU-accelerated compositing. Fetches images as ArrayBuffers, renders to an offscreen Skia surface, encodes to base64, and writes to a temporary file. Deletes any previously stitched file before creating a new one to avoid accumulating temp files.IOURequestStepDistanceOdometer.tsxintegration:stitchOdometerImages(startImage, endImage)is called insidenavigateToNextPagesetMoneyRequestReceiptFixed Issues
$ #77267
PROPOSAL: N/A
Tests
Both images scenario:
FAB-> go to"Track distance"-> choose"Odometer"tab"Next"-> verify no error is shon and navigation proceeds normally"Save"-> verify the new stitched image now uses the updated start/end photoSingle image scenario:
"Next"-> verify navigation proceeds without errors and the single photo alone is used as the receiptDelete one image after adding both:
"Three dots menu"-> press"Delete"-> verify the thumbnail returns to the empty state -> press"Next"-> verify the end photo alone is used as the receiptOffline tests
Same as Tests
QA Steps
Same as Tests
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
iOS needs to be tested on a physcical device
Android: Native
1to6.webm
7.webm
8.webm
Android: mWeb Chrome
1to6mweb.webm
7mweb.webm
8mweb.webm
MacOS: Chrome / Safari
1to6.mov
7.mov
8.mov