-
Notifications
You must be signed in to change notification settings - Fork 70
New Feature: Headers #210
-
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?
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 3
Replies: 10 comments 1 reply
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 2
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
🚀 7
-
Awesome!!! Is it able to animate when navigating? Bottom Tab Screen -> Another Screen?
Beta Was this translation helpful? Give feedback.
All reactions
-
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?
Screenshot 2024年11月03日 at 12 17 48
Beta Was this translation helpful? Give feedback.
All reactions
-
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?
Screenshot 2024年11月03日 at 12 17 48
Hey @gunnartorfis try with ignoresTopSafeArea then your view will stretch above it
Beta Was this translation helpful? Give feedback.
All reactions
-
@okwasniewski Thanks it works, not sure how I missed that
Beta Was this translation helpful? Give feedback.
All reactions
-
🚀 1
-
@gunnartorfis Im thinking about making it the default in next release so that the initial experience is smoother 😄
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 5
-
a much needed feature.
Beta Was this translation helpful? Give feedback.
All reactions
-
I'm moving this to discussions because all feature requests will now be under the "Ideas 💡" tab in GitHub discussions.
Beta Was this translation helpful? Give feedback.
All reactions
-
Was this actually released?
Beta Was this translation helpful? Give feedback.
All reactions
-
@okwasniewski (sorry for the ping), I was wondering if the header feature has been released yet? It’s the only thing that’s holding me back from using this library. 🙂
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1