okwasniewski / react-native-bottom-tabs

Native Bottom Tabs for React Native
https://okwasniewski.github.io/react-native-bottom-tabs/
MIT License
619 stars 24 forks source link

New Feature: Headers #104

Open shovel-kun opened 3 weeks ago

shovel-kun commented 3 weeks ago

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)

Thoughts?

okwasniewski commented 3 weeks ago

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 commented 2 weeks ago

Small update:

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

https://github.com/user-attachments/assets/109cfe10-6f00-4ea4-8b73-7f9dd25008d0

I will investigate what we need to support Android

shovel-kun commented 2 weeks ago

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

gunnartorfis commented 2 weeks ago

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
okwasniewski commented 2 weeks ago

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

gunnartorfis commented 2 weeks ago

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

okwasniewski commented 2 weeks ago

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

a-eid commented 1 week ago

a much needed feature.