New Feature: Headers

[shovel-kun]

As stated in the React Navigation docs (6.x and 7.x), @react-navigation/bottom-tabs allows for headers to be displayed and configured alongside the screen content.

However, as @react-navigation/bottom-tabs is a JS implementation, so too are the headers.

Does react-native-bottom-tabs plan to support headers?

If so, there are two ways to approach this:

1. Use the JS implementation of headers (simpler):
   • We can reuse the same implementation for headers as seen in BottomTabView.tsx.
   • Since we're using the same API as JS Bottom Tabs, headers should work the same way especially animations, etc.
   • However, we might want to make it clear that unlike the bottom tab, headers are JS implementation.
2. Use native implementation of headers (harder)
   • @react-navigation/native-stack has a native implementation of headers.
   • However, that means we might have to consume react-native-screens's ScreenStack and ScreenStackItem API, or something like it, as seen in React Navigation's NativeStackView.native.tsx

Thoughts?

[okwasniewski]

Hey!

Thanks for opening this issue, I think it's a valid feature request.

I would prefer to keep this library native so I guess the only viable option is to add native headers support.

SwiftUI should be fairly simple but Android needs a second native component to render the top bar.

We can keep the options limited as JS tabs did.

[okwasniewski]

Small update:

I got iOS to work with just few lines of code and it looks great!

CleanShot.2024-11-01.at.15.18.30.mp4

I will investigate what we need to support Android

[shovel-kun]

Awesome!!! Is it able to animate when navigating? Bottom Tab Screen -> Another Screen?

[gunnartorfis]

Not sure if this is related, but would it be possible to add an option to completely hide the header, or at least add a background color to it?

[okwasniewski]

Not sure if this is related, but would it be possible to add an option to completely hide the header, or at least add a background color to it?

Hey @gunnartorfis try with ignoresTopSafeArea then your view will stretch above it

[gunnartorfis]

@okwasniewski Thanks it works, not sure how I missed that

[okwasniewski]

@gunnartorfis Im thinking about making it the default in next release so that the initial experience is smoother 😄

[a-eid]

a much needed feature.

[okwasniewski]

I'm moving this to discussions because all feature requests will now be under the "Ideas 💡" tab in GitHub discussions.