[POTENTIAL BUG] Collapsible header with FlashList bugs out, works fine in regular FlatList.

[Mathius17]

I managed to get this animation working with a regular FlatList.

But for some reason this is what happens when we try the same approach with FlashList.

I'm struggling to understand why is this happening so that's why I marked is as potential bug, but it might just be ignorance from my end regarding FlashList. It looks like this is a challenge that RecyclerListView (which being used under the hood) accounted for as noted in their docs.

Here's a simplification of the problem/code that I'm having:

import { useEffect, useRef } from 'react';
import { Animated, View } from 'react-native';
import { AnimatedFlashList } from '@shopify/flash-list';

const HEADER_HEIGHT = 120;

function getCloser(value: number, checkOne: number, checkTwo: number) {
  return Math.abs(value - checkOne) < Math.abs(value - checkTwo)
    ? checkOne
    : checkTwo;
}

export function ListV2() {
  const shootsListRef = useRef<{ scrollToIndex; scrollToOffset }>();
  const { items, refetch, isLoading } = fetchItems();

  const scrollY = useRef(new Animated.Value(0)).current;
  const scrollYClamped = Animated.diffClamp(scrollY, 0, HEADER_HEIGHT);

  const translateY = scrollYClamped.interpolate({
    inputRange: [0, HEADER_HEIGHT],
    outputRange: [0, HEADER_HEIGHT * -1],
  });

  const translateYNumber = useRef<number>();

  useEffect(() => {
    const translateYListener = translateY.addListener(({ value }) => {
      translateYNumber.current = value;
    });

    return () => {
      translateY.removeListener(translateYListener);
    };
  }, [translateY]);

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

  function handleSnap({
    nativeEvent,
  }: NativeSyntheticEvent<NativeScrollEvent>) {
    const offsetY = nativeEvent.contentOffset.y;

    if (
      translateYNumber.current == null ||
      translateYNumber.current === 0 ||
      translateYNumber.current === HEADER_HEIGHT * -1
    ) {
      return;
    }

    const offset =
      getCloser(
        translateYNumber.current,
        HEADER_HEIGHT * -1,
        HEADER_HEIGHT * (3 / 4) * -1
      ) ===
      HEADER_HEIGHT * -1
        ? offsetY + HEADER_HEIGHT
        : offsetY - HEADER_HEIGHT;

    shootsListRef.current?.scrollToOffset({ offset });
  }

  return (
    <View style={{ flex: 1 }}>
      <AnimatedFlashList
        ref={(_ref) => (shootsListRef.current = _ref as any)}
        data={items}
        estimatedItemSize={120}
        refreshing={isLoading}
        scrollEventThrottle={16}
        bounces={false}
        contentContainerStyle={{
          paddingTop: HEADER_HEIGHT,
        }}
        progressViewOffset={HEADER_HEIGHT}
        renderItem={({ item }) => (
          <Row item={item} onPress={(item) => doSomething(item.id)} />
        )}
        onRefresh={refetch}
        onScroll={handleScroll}
        onScrollEndDrag={handleSnap}
        onMomentumScrollEnd={handleSnap}
      />

      {/*
      <Animated.FlatList
        ref={(_ref) => (shootsListRef.current = _ref as any)}
        data={items}
        refreshing={isLoading}
        scrollEventThrottle={16}
        bounces={false}
        contentContainerStyle={{
          paddingTop: HEADER_HEIGHT,
        }}
        renderItem={({ item }) => <Row item={item} onPress={(item) => doSomething(item.id)} />}
        onScroll={handleScroll}
        onScrollEndDrag={handleSnap}
        onMomentumScrollEnd={handleSnap}
      />
      */}

      <Animated.View
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          transform: [{ translateY }],
        }}
      >
        <Header height={HEADER_HEIGHT} />
      </Animated.View>
    </View>
  );
}

Versions of the relevant packages I'm using:

"dependencies": {
  "@shopify/flash-list": "1.1.0",
  "expo": "^46.0.0",
  "react": "18.0.0",
  "react-dom": "18.0.0",
  "react-native": "0.69.6"
}

[mwmcode]

This does not address your question directly but I have recently implemented similar behavior with regular FlashList, below snippet might be of help.

items.mov

export function CountriesWithFlashList() {
  const { animationStyles, scrollToTop, animationListProps } =
    useToggleHeaderOnScroll<CountryT>({
      height: 55,
    });

  const onFilterTextChange = useCallback((text: string) => {
    scrollToTop(); // to show matching items that might have been scrolled away/up
    setFilterTerm(text);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

return (
    <View>
      <Animated.View style={animationStyles.container}>
        <InputSearch
          onTextChange={onFilterTextChange}
          style={animationStyles.header}
        />
      </Animated.View>
      <AppFlashList<CountryT>
        {...animationListProps}
        estimatedItemSize={55}
       //... data, renderItem ...etc
      />
    </View>
  );

export function useToggleHeaderOnScroll<T>({ height }: { height: number }) {
  const listRef = useRef<FlashList<T>>(null);
  const scrollY = useRef(new Animated.Value(0));
  const diffClamp = Animated.diffClamp(scrollY.current, 0, height);
  const translateY = diffClamp.interpolate({
    inputRange: [0, height],
    outputRange: [0, -height],
  });

  const scrollToTop = useCallback(() => {
    listRef.current?.scrollToOffset({
      animated: true,
      offset: 0,
    });
  }, []);

  const animationListProps: Omit<
    AppFlashListProps<T>,
    'data' | 'renderItem'
  > = useMemo(
    () => ({
      listRef,
      bounces: false, // 👀 overwrite to true if pullToRefresh is needed :\ 
      onScroll: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
        const yOffset = e.nativeEvent.contentOffset.y; // y-offset is negative when list bounces
        scrollY.current.setValue(yOffset > 0 ? yOffset : 0); 
      },
      onScrollBeginDrag: Keyboard.dismiss,
      contentContainerStyle: { paddingTop: height },
    }),
    [height],
  );

  return {
    animationStyles: {
      container: {
        transform: [{ translateY }],
        zIndex: 10,
        elevation: 5,
      },
      header: animationStyles.header,
    },
    scrollToTop, 
    animationListProps,
  };
}

const animationStyles = StyleSheet.create({
  header: {
    position: 'absolute',
    top: 0,
    start: 0,
    end: 0,
    backgroundColor: ThemeColor.white,
    borderBottomWidth: 1,
    borderBottomColor: ThemeColor.lightBlue,
  },
});

credit: https://www.youtube.com/watch?v=mvxgWuxwnik