search

kanelloc / react-native-animated-header-scroll-view

React native animated header ScrollView & FlatList. Animates an image or a custom component into a navbar header.
https://www.npmjs.com/package/@kanelloc/react-native-animated-header-scroll-view
MIT License
253 stars 21 forks source link

Header not clickable #83

Open ParthDev96 opened 1 year ago

ParthDev96 commented 1 year ago

@kanelloc-deploy Please check the video, header is not clickable may be some overlapping on there, please let me know if I am doing something wrong.

https://github.com/kanelloc/react-native-animated-header-scroll-view/assets/124288110/3cb330c0-5394-466c-8eb3-bb0eb2253d28

dcnxx1 commented 5 months ago

did you get around this? Facing the same issue rn

ParthDev96 commented 4 months ago

hi @dcnxx1,

OverflowHeaderComponent is overlapping on it so.

I solved it by adding a condition while rendering the OverflowHeaderComponent in the library's source (src/components/AnimatedNavbar.tsx), and I added a patch to the library.

Before

`<Animated.View style={[ styles.container, styles.overflowHeader, { zIndex: overflowHeaderOpacity, height: headerHeight, opacity: overflowHeaderOpacity, }, ]}

{OverflowHeaderComponent} </Animated.View>`

After `{OverflowHeaderComponent && <Animated.View style={[ styles.container, styles.overflowHeader, { zIndex: overflowHeaderOpacity, height: headerHeight, opacity: overflowHeaderOpacity, }, ]}

{OverflowHeaderComponent} </Animated.View>}`