PedroBern / react-native-collapsible-tab-view

A cross-platform Collapsible Tab View component for React Native
MIT License
875 stars 171 forks source link

Support fade header out #170

Open likeSo opened 3 years ago

likeSo commented 3 years ago

Feature request

Please Support fade header out, that is, when we scrolling up, the header component's opacity fade out

Another, could we make the tab bar transparent too? I tried set backgroundColor: 'transparent' but it always white. Here is our UI design: image

Current behavior

For now, when our headers are transparent, the content overlapped with the header

Screenshots (if applicable)

image

andreialecu commented 3 years ago

There's an example in the repo that shows how to animate the header: https://github.com/PedroBern/react-native-collapsible-tab-view/blob/main/example/src/AnimatedHeader.tsx

To make the tab bar transparent, you need to make the header's background transparent:

Example:

<Tabs.Container headerContainerStyle={{backgroundColor: "transparent"}} ...
likeSo commented 3 years ago

There's an example in the repo that shows how to animate the header: https://github.com/PedroBern/react-native-collapsible-tab-view/blob/main/example/src/AnimatedHeader.tsx

To make the tab bar transparent, you need to make the header's background transparent:

Example:

<Tabs.Container headerContainerStyle={{backgroundColor: "transparent"}} ...

Thank you but You may have misunderstood my meaning. What i need is that tab bar absolute positioned on the Header, So i can change the header background with tabbar together When i change backgroundColor using headerContainerStyle={{backgroundColor: "transparent"}}, i got this:

image

i need tabbar and header on the same view!