How to share react-final-form between pages/screens

Question

• react-native
• react-final-form
• rect-navigation

I need to split up my form into subforms. The subforms will be rendered on separate screens in React-Native, but I need them to be part of the same form handling object. From each sub form I need access to the complete form state (for all fields), but each subform will only render some fields.

Is there a way to pass the form object to another screen/component and continue to use the state handling/validation from the main form?

Example:

MainForm
  FieldX
  FieldY
  Button to open subform A
    SubFormA
      FieldA1
      FieldA2
      FieldX <- reused from main form, might be readonly in subform A
      Button to go back to main form
  Button to open subform B
    SubFormB
      FieldB1
      Button to go back to main form

The actual submit of the form can only be preformed from the MainForm. I have this setup with an older form library, but I'm using Modals to show the subforms, which are inlined in the main form. But I'd like to stop using modals and instead push a separate screen (using react-navigation) with subform capabilities by somehow passing the form object.

Answer 1

I fiddled around some more and found a way. Thought I'd answer this for others to find.

• The render property of the Form component actually gets the form instance as an argument.

• The Form component also takes a form instance as a prop

These two features makes it possible to simply pass the form instance to another Form component. I tried this within the same screen and it works like a charm. I hope I won't get into trouble with the main Form getting unmounted when I push the next screen with react-navigation.

---

edit: It works perfectly between screens as well. I send the form instance to the subform via react-navigations params object.