React-native-screens: Custom header component

[piotrfalba]

Description

It would be nice to be able to use a custom header component.

Motivation

Then you could easily add a search field, avatars, buttons etc.

[WoLewicki]

One of the native-stack's main goals is to leverage the usage of native components for header. You can always specify headerShown: false and add your own component as a header. Can I help you any more with this?

[juice49]

We are doing exactly this for our project. The biggest problem we've encountered is that we don't seem to be able to access the screen title option inside our custom header component.

I can see the screen options are exposed to the navigator, but I can't find a way to access them inside of screens.

Does anybody know if this is possible without creating our own custom navigator?

[WoLewicki]

We don't expose the header option in native-stack, so the solution seems to be not to use the options. You can also create a PR with header component or add a patch to your project with the descriptor.options.title exposed.

[juice49]

Thank you for replying so quickly @WoLewicki! 🙂

That makes sense. I wanted to check I wasn't missing a way to do this.

For now, we have worked around the issue by passing the screen options down to our custom header component. The one downside is that programmatic changes to the title (e.g. via setOptions) are not reflected.

I will definitely think about whether this can be nicely handled in a PR.

Thanks again for the help.

[WoLewicki]

I will move this to Discussions since it is rather a feature request.