benevbright/react-navigation-collapsible

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!