Event emitter to communicate between header and screen component

[plus-]

Is this pattern solved with v5.0? I'd like to use it but the emit function doesn't seem to be exposed in the useNavigation hook

[satya164]

You can use setOptions to directly access screen's state and props in your header. An event emitter is not needed.

https://reactnavigation.org/docs/en/navigation-prop.html#setoptions---update-screen-options-from-the-component

[plus-]

Right,

What about function calls should I pass the function in the options or use a forward ref on the screen?

[satya164]

Not sure what you mean. There's an example here https://reactnavigation.org/docs/en/headers.html#updating-options-with-setoptions

[plus-]

Say you have a screen with a form component, and the submit button is in the navigation header.

I don't want to pass the form content nor the submit function in the navigation params. My first though was to emit a submit event and listen it from the form, but it's not possible in v5 (no emit function available).

My current solution (not sure if it's the best) is to do a forward ref on the form component so the button can access the submit function (exposed with useImperativeHandle).

Is there a better pattern with v5 to handle this situation?

[satya164]

Have you actually checked the links I shared?

[plus-]

Yes, but it was still not clear to me. This other link though is pretty straightforward: https://reactnavigation.org/docs/en/header-buttons.html#header-interaction-with-its-screen-component

cheers