How to add a second onScroll listener?
helloiamlukas opened this issue · 4 comments
I want to add a second action to the onScroll event of the Animated.FlatList
. So I tried this:
import { Animated } from 'react-native';
import { useCollapsibleStack } from 'react-navigation-collapsible';
const MyScreen = ({ navigation, route }) => {
const {
onScroll /* Event handler */,
containerPaddingTop /* number */,
scrollIndicatorInsetTop /* number */,
/* Animated.AnimatedInterpolation by scrolling */
translateY /* 0.0 ~ -headerHeight */,
progress /* 0.0 ~ 1.0 */,
opacity /* 1.0 ~ 0.0 */,
} = useCollapsibleStack();
const secondAction = () => console.log('action');
const onListScroll = (event) => {
secondAction();
return onScroll(event);
}
return (
<Animated.FlatList
onScroll={onListScroll}
contentContainerStyle={{ paddingTop: containerPaddingTop }}
scrollIndicatorInsets={{ top: scrollIndicatorInsetTop }}
/* rest of my stuff */
/>
);
};
Unfortunately that doesn't work. I'm getting the following error:
TypeError: onScroll is not a function. (In 'onScroll(event)', 'onScroll' is an instance of AnimatedEvent)
Is this expected behaviour? and if so - please help me out how to do it the correct way
https://github.com/benevbright/react-navigation-collapsible/tree/v3-4#default-header
// if you want to use 'onScroll' callback.
// onScroll={Animated.event(
// [{nativeEvent: {contentOffset: {y: animatedY}}}],
// {useNativeDriver:true, listener:this.onScroll})}
Is that what you want?
It was possible with v3
but I haven't implemented it on v5
.
I think I have to update it. (feel free to open PR meanwhile)
We need access to animatedY
here.
That's exactly what I need! Would be really nice if that could be implemented
It's supported in v5.1.0.
Please check out updated README https://github.com/benevbright/react-navigation-collapsible#1-default-header
Thanks @benevbright for this support! It's exactly that I need too. Well done!