feat: add support for native animation on scroll

marcocesarato / react-native-big-list

This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement. This list implementation for big list rendering on React Native works with a recycler focused on performance and memory usage and so it permits processing thousands items on the list.

Apache License 2.0

525 stars 41 forks source link

This PR solves this issue: https://github.com/marcocesarato/react-native-big-list/issues/41

Using onScroll for setting an Animated.Value is very janky, because useNativeDriver has to be set to false. Setting it to true makes it not work at all.

I've introduced a new prop called nativeOffsetValues, which takes an object of {x: Animated.Value, y: Animated.Value }, and works like this:

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

return (
  <>
    <BigList
      nativeOffsetValues={{ y: props.scrollY }}
    />
    <Animated.View
      style={{
        opacity: scrollY.interpolate({
          inputRange: [0, 50],
          outputRange: [0, 1],
          extrapolate: "clamp",
        }),
      }}
    />
  </>
);

marcocesarato / react-native-big-list

feat: add support for native animation on scroll #273