React Navigation 5 - Native Stack Navigator with custom header which has a searchbar

Question

I'm currently in a project for which we are using React Navigation 5 with the native stack navigator due to its increased performance. We are needing to add a searchbar to the header cause the client isn't gonna like it to be somewhere else. Is there any way to make a custom header? using options={{ headerShown: false }} is not an option cause inside the native stack navigator we have a bottom stack navigator and inside this bottom tab navigator we have a top stack navigator with the screens inside it. So using headerShown: false and a custom header inside the screens would only render it below the top tabs and that would not be acceptable. Any ideas on how to make this? is using the common stack navigator with a custom react element as the header prop the only solution?

Greatly appreciate any ideas on how to solve this.

Answer 1

Solved it using the headerRight option and passing it a full custom header component.