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
FeatureTrainingModal is a generic educational overlay used in 12+ render sites across 11+ files with non-serializable configuration (children, video/SVG/Lottie content, custom callbacks), making it complex to migrate to @react-navigation.
Migration approach (Group 4 — Complex, consider deferring inline usages)
- File:
src/components/FeatureTrainingModal.tsx (534 lines)
- Used by: 11+ files, 12+ render sites. 3 are already navigation pages via
FeatureTrainingModalNavigator; the rest are CENTERED overlays.
- Complexity: Generic educational overlay with video/SVG/Lottie, "don't show again" preference, help/skip buttons, and custom children. Inline usages (HoldOrReject, HoldSubmitter, multi-scan popup) are contextual overlays that would change UX if moved to a navigation route.
Suggested migration approach
- Evaluate whether the
CENTERED inline usages genuinely need navigation migration or can remain as-is (they are not currently causing animation bugs).
- Focus on the usages that animate in from right-to-left (screen-like) and are causing animation inconsistencies.
- For those usages, create dedicated
@react-navigation modal routes and pass any required configuration via Onyx rather than props.
- Keep the
CENTERED overlay usages as-is where the UX change is not justified.
Reference
Issue Owner
Current Issue Owner: @parasharrajat
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
FeatureTrainingModalis a generic educational overlay used in 12+ render sites across 11+ files with non-serializable configuration (children, video/SVG/Lottie content, custom callbacks), making it complex to migrate to@react-navigation.Migration approach (Group 4 — Complex, consider deferring inline usages)
src/components/FeatureTrainingModal.tsx(534 lines)FeatureTrainingModalNavigator; the rest areCENTEREDoverlays.Suggested migration approach
CENTEREDinline usages genuinely need navigation migration or can remain as-is (they are not currently causing animation bugs).@react-navigationmodal routes and pass any required configuration via Onyx rather than props.CENTEREDoverlay usages as-is where the UX change is not justified.Reference
@react-navigation#53493 (comment)@react-navigation#53493Issue Owner
Current Issue Owner: @parasharrajat