[Due for payment 2026-07-17] Migrate AvatarCropModal to @react-navigation modal screen

[mountiny]

Context

This is a sub-issue of #53493 (Replace modal screens with modals from @react-navigation).

For full background and migration approach, see the triage analysis comment and the sub-issue breakdown comment.

Problem

AvatarCropModal animates in from right-to-left like a screen but uses react-native-modal, causing inconsistent animations. The migration is complex due to binary image data and Reanimated state.

Migration approach (Group 4 — Complex)

• File: src/components/AvatarCropModal/AvatarCropModal.tsx (471 lines)
• Used by: AvatarWithImagePicker.tsx (15+ screens) + AvatarPage.tsx
• Complexity:
  • Binary image data (File | CustomRNImageManipulatorResult) is not serializable to route params.
  • Complex Reanimated state: pan, zoom, rotate gestures.
  • maskImage differs between usage sites.

Suggested migration approach

1. When an image is picked, store the image URI (not the binary data) in a temporary Onyx key.
2. The crop navigation page reads the image URI from Onyx, performs cropping/rotation via Reanimated, and writes the result URI back to a separate Onyx key.
3. The parent component (AvatarWithImagePicker) reads the result Onyx key reactively and triggers the upload API.
4. Ensure each usage site cleans up the temporary Onyx keys after upload or cancellation.
5. Test across all 15+ screens that use AvatarWithImagePicker on iOS and Android.

Reference

• Triage analysis: Replace modal screens with modals from @react-navigation #53493 (comment)
• Parent tracking issue: Replace modal screens with modals from @react-navigation #53493

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

@jmusial Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@parasharrajat Eep! 4 days overdue now. Issues have feelings too...

[parasharrajat]

No updated yet.