-
Notifications
You must be signed in to change notification settings - Fork 103
-
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:
image
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 5 comments 4 replies
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
Thanks for your reply. This is not ideal as this would render in case of an anchored banner ad a new banner per screen.
Beta Was this translation helpful? Give feedback.
All reactions
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
I saw this in the iOS 26 videos with the .tabViewBottomAccessory modifier.
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 2
-
I was able to get a react native view passed into the tabViewBottomAccessory spot, but I couldn't consistently get the tabViewBottomAccessoryPlacement variable over. Might be a memoization issue in my implementation, it fires decently using an onChange(of:) modifier in SwiftUI
Beta Was this translation helpful? Give feedback.
All reactions
-
anyone working on this? @hennessyevan did you manage to implement this? Otherwise I would like to give it a go
Beta Was this translation helpful? Give feedback.
All reactions
-
I switched to the react-native-screens implementation since that's what expo-router uses now. They're also working on this so I'm just waiting to see.
Beta Was this translation helpful? Give feedback.
All reactions
-
Beta Was this translation helpful? Give feedback.
All reactions
-
I was able to add support for tabViewBottomAccessory in this PR #446
Beta Was this translation helpful? Give feedback.