React Native - Unfold collapsed header when user moves this

user_5767156 0
Viewed 406

I have a header that is collapsed when scrolling in a flatlist, I achieved this with the following code

 const positionY = React.useRef(new Animated.Value(0)).current;

  const onScroll = Animated.event(
    [{ nativeEvent: { contentOffset: { y: positionY } } }],
    {
      useNativeDriver: true,
    }
  );

  const translateY = positionY.interpolate({
    inputRange: [0, headerHeight],
    outputRange: [0, -(headerHeight - 64)],
    extrapolate: 'clamp',
  });

snack whit complete code https://snack.expo.io/@gustperz/collapsible-header

I would like to be able to unfold the header on demand when the user pull down on the sticky header, without scrolling over the list.
pull header

react-animated react-native-flatlist react-native
1 Answers

I did Double animation By scrolling + drawer behavior

 const beyondLength = 100000

 const onScroll = Animated.event(
    [{ nativeEvent: { contentOffset: { y: positionY.current } } }],
    { useNativeDriver: true },
  );

  const translateY = positionY.current.interpolate({
    inputRange: [0, headerHeight + 100, beyondLength, beyondLength+1, beyondLength+150],
    outputRange: [
      0,
      -(headerHeight - 64),
      -(headerHeight - 64),
      -(headerHeight - 65),
      0,
    ],
    extrapolate: 'clamp',
  });

  const panResponder = React.useMemo(
    () =>
      PanResponder.create({
        onMoveShouldSetPanResponder: () => true,
        onPanResponderMove: (event, gestureState) => {
          positionY.current.setValue(gestureState.dy + beyondLength);
        },
      }),
    [],
  );

expo

user_91614780
Related