Event emitter to communicate between header and screen component
brentvatne opened this issue · 7 comments
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
You can use setOptions to directly access screen's state and props in your header. An event emitter is not needed.
Right,
What about function calls should I pass the function in the options or use a forward ref on the screen?
Not sure what you mean. There's an example here https://reactnavigation.org/docs/en/headers.html#updating-options-with-setoptions
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?
Have you actually checked the links I shared?
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