search

JungHsuan / react-native-collapsible-tabview

This is only an implementation of tabview with collapsible header.
MIT License
284 stars 60 forks source link

SafeAreaView on iOS scrolls with the tabs #28

Closed deshika94 closed 2 years ago

deshika94 commented 2 years ago

I have no issue with this on android, it works perfectly. But on iOS, when I scroll up, the status bar becomes transparent and I can see the header and other components being scrolled behind the status bar. I did wrap everything inside a SafeAreaView with a background color, but when I scroll, the background color of the SafeAreaView also scrolls up. The weird thing is, when I add a navigation header, the tab contents scroll behind it so that works well. Any idea on how I can fix this?

JungHsuan commented 2 years ago

Hi @deshika94, would you like to share your code or screenshots?

deshika94 commented 2 years ago

@JungHsuan Thank you for the quick response. For now, I was able to solve it by including overflow:'hidden' inside the view. Seems to be working fine on iOS now! :) Before -> simulator_screenshot_CEF170D9-44CB-4D4C-8A82-508747D60C2B

Code ->

Screen Shot 2022-03-16 at 11 56 31 AM fff0-eba2-4f64-b46e-0adfa019f310.png)

deshika94 commented 2 years ago

Result ->

simulator_screenshot_90B2186C-DE4B-485A-B9C9-23D0392F9BA4

JungHsuan commented 2 years ago

Oh! I see your point. That's because the header is set to absolute. Thanks for the great solution by using overflow:'hidden'