search

okwasniewski / react-native-bottom-tabs

Native Bottom Tabs for React Native
https://www.npmjs.com/package/react-native-bottom-tabs
MIT License
284 stars 9 forks source link

feat(WIP, iOS): transparent tabbar until content below #22

Open dylancom opened 6 days ago

dylancom commented 6 days ago

In many iOS apps such as the health app, the tabbar becomes transparent (without border). In this PR I am looking into how we can add this. It currently seems to bug at first render (as the comment also says: This causes issues with lazy loading making the TabView background blink.), but if you scroll once the effect comes in.

Transparent without content overlapping Content overlap
Simulator Screenshot - iPhone 16 Pro - 2024-10-09 at 08 24 45 Simulator Screenshot - iPhone 16 Pro - 2024-10-09 at 08 25 37
okwasniewski commented 6 days ago

Hey! Thanks for opening the PR.

I definitely want to support this but with lazy loading the tab bar was flashing before the content rendered.

I think we could make this into a prop, something like: showTabBarBackground (or something similar) and by default manipulate this setting on the JS side to prevent flashing if user is using lazy loading.

WDYT?