animate on scroll using reanimate lib

[jittuu]

Overview

Animated using Reanimated Lib on FlashList's scroll,

// ..
// other imports here...
// ..

import Animated, {
  Extrapolation,
  interpolate,
  useAnimatedScrollHandler,
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';

// create AnimatedFlashList to work with reanimated lib
const AnimatedFlashList = Animated.createAnimatedComponent(FlashList); 

export default function ReanimatedFlashListScreen() {
  const scrollY = useSharedValue(0);
  // ..
  // other code here...
  // ..


  const scrollHandler = useAnimatedScrollHandler({
    onScroll: event => {
      scrollY.value = event.contentOffset.y; // bind scroll offset to shared value
    },
  });

  // animate using share value
  const headerAnimatedStyle = useAnimatedStyle(() => {
    return {
      opacity: interpolate(
        scrollY.value,
        [0, 100],
        [1, 0],
        Extrapolation.CLAMP,
      ),
      transform: [
        {
          scale: interpolate(
            scrollY.value,
            [-100, 0, 100],
            [3, 1, 0],
            Extrapolation.CLAMP,
          ),
        },
      ],
    };
  });
  // ..
  // other code here...
  // ..

  return (
    <>
      <Stack.Screen options={{ title: 'Animate onScroll' }} />
      <ThemedView style={styles.container}>
        <AnimatedFlashList
          data={names}
          renderItem={({ item }) => (
            <View style={styles.item}>
              <Text>{item as string}</Text>
            </View>
          )}
          estimatedItemSize={50}
          ListHeaderComponent={renderParallaxHeader}
          onScroll={scrollHandler}  // <-- scrollHandler
          scrollEventThrottle={16}
        />
      </ThemedView>
    </>
  );
}

Bugs

Code is broken as of Reanimated package 3.10.1 - which is recommended version of expo 51. We have to upgrade to 3.15.2 to work with onScroll event handler.

• Animations in recycled components seem to be broken from v3.9.0 and up (Animations in recycled components seem to be broken from v3.9.0 and up software-mansion/react-native-reanimated#6203)