[HOLD for payment 2024-01-18] [HOLD for payment 2023-10-23] Refactor Form to a custom hook

[luacmartins]

Problem

Although our Form component has been working great so far, the migration to functional components has surfaced some issues with our design. Coming from this thread, our existing Form component either causes child functional components with hooks to crash the App or functional components without hooks don't work. Given that we're migrating the whole codebase to use hooks, we need to redesign Form to play nicely with child components with/without hooks.

Why is this important

We migrated to functional components and we need Form to work with child functional components that have hooks.

Solution

Redesign Form into a custom hook. This will be worked on by an external agency.

[melvin-bot]

Triggered auto assignment to @strepanier03 (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @shawnborton (NewFeature)

[luacmartins]

No design changes are necessary here. Removing @shawnborton as an assignee

[lukemorawski]

Hi it's Lucas from Callstack. Happy to have a go on that one :) I assume, given the app is currently being migrated to TS, this new custom form hook should be written in TS too?

[luacmartins]

Thanks @lukemorawski! Assigned you to the issue. Writing it in TS sounds good.

[lukemorawski]

Cool! Thanks @luacmartins. Starting the research :)