Custom component above native tabbar

[dylancom]

Is it possible to render a custom component above the native (iOS) tabbar?
For e.g. an Audio Player that stays fixed on top of the tabbar as you see in may Music Player applications.
Or an Adaptive Banner ad that sits on top.

This works with a custom tabbar:

tabBar={(props) => (
  <>
    <Player />
    <BottomTabBar {...props} />
  </>
)}

But I'd like to keep the native tabbar instead of a JS implementation.

Examples:

[okwasniewski]

Hey, you can achieve this by putting the component on per screen basis (or doing some kind of HOC that would place it there) and use the useBottomTabBarHeight() hook to offset this "accessory view" from the bottom

[dylancom]

Thanks for your reply. This is not ideal as this would render in case of an anchored banner ad a new banner per screen.

[lovegaoshi]

maybe you can set screens height to be Dimensions.height - bottom tab height; component below bottom tab, but with a translateY of the bottom tab height so it's always above it

I happen to have the exact UI need (music app musicplayer) and my approach is a screen nav without bottom tabs, and a bottom tab nav with only the bottom tabs, then the component sandwiched between them. its a bit more costly but easier to manage layouts