Repository navigation
New Feature: Headers #104
Description
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:
- 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.
- 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?
Activity
okwasniewski commentedon Oct 31, 2024
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 commentedon Nov 1, 2024
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 commentedon Nov 1, 2024
Awesome!!! Is it able to animate when navigating? Bottom Tab Screen -> Another Screen?
gunnartorfis commentedon Nov 3, 2024
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 commentedon Nov 3, 2024
Hey @gunnartorfis try with ignoresTopSafeArea then your view will stretch above it
gunnartorfis commentedon Nov 3, 2024
@okwasniewski Thanks it works, not sure how I missed that
okwasniewski commentedon Nov 3, 2024
@gunnartorfis Im thinking about making it the default in next release so that the initial experience is smoother 😄
[-]Support `Header related options`?[/-][+]New Feature: Headers[/+]a-eid commentedon Nov 9, 2024
a much needed feature.
okwasniewski commentedon Dec 17, 2024
I'm moving this to discussions because all feature requests will now be under the "Ideas 💡" tab in GitHub discussions.