React Native Animated with useNativeDriver - _reactNative.Animated.event(...) is not a function

Question

I want to use the native driver for dealing animation in React Native app. I'm using Animated.FlatList, and I want to define onScroll outside the render function. Here's the code snippet.

class FlatListWithAnimation extends React.PureComponent {
  [...]

  onScroll = (event) => Animated.event(
    [{
      nativeEvent: {
        contentOffset: { y: this.state.scrollY },
      },
    }],
    {
      useNativeDriver: true,
      listener: (event, gestureState) => console.log(event, gestureState),
    },
  )(event);


  render() {
  [...]
    return (
      [...]
      <Animated.FlatList
        key="FlatList"
        data={placeHolderData}
        renderItem={this.renderPlaceHolder}
        onScroll={this.onScroll}
      />
      [...]
    );
  }
}

However, this produce _reactNative.Animated.event(...) is not a function error. When I put Animated.event inside directly onScroll={...}, then it works. But I want to know how I can use Animated.event outside the render function.

Thanks.

Answer 1

Short answer: it isn't possible. You can use native driver only by passing Animated.event into onScroll handler.

PanResponder doesn't support native animations yet, because it's implemented in pure JS.

You can write it like this, but it will work like useNativeDriver: false

onScroll = (event) => Animated.event(
  [{
    nativeEvent: {
      contentOffset: { y: this.state.scrollY },
    },
  }],
  {
    useNativeDriver: true,
    listener: ({ nativeEvent }) => this.state.scrollY.setValue(nativeEvent.contentOffset.y),
  },
).__getHandler()(event);