React-native – React Native Error: “Animated.event now requires a second argument for options”

animationreact-native

Does anyone know why the following error appears when I run the below code?

Error reported by React Native Expo in the command line:

Animated.event now requires a second argument for options
- node_modules/react-native/Libraries/LogBox/LogBox.js:117:10 in registerWarning
- node_modules/react-native/Libraries/LogBox/LogBox.js:63:8 in warnImpl
- node_modules/react-native/Libraries/LogBox/LogBox.js:36:4 in console.warn
- node_modules/expo/build/environment/react-native-logs.fx.js:18:4 in warn
- node_modules/react-native/Libraries/Animated/src/AnimatedEvent.js:141:6 in constructor 
- node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:520:24 in event
* src/screens/ImageScreen.js:21:24 in ImageScreen

… a lot more of the same output for many lines … I can post the full output if people think it's needed.

This is the code – it's not complicated:

import React, {useState, useRef} from 'react';
import { Animated, PanResponder, View, Image, StyleSheet } from 'react-native';

const style = StyleSheet.create({
  mainView: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "red"
  },  
  moviePoster_posterStyle: {
    resizeMode: "cover"
  }
});

const ImageScreen = () => {

  const pan = useRef(new Animated.ValueXY()).current;

  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        pan.setOffset({
          x: pan.x._value,
          y: pan.y._value
        });
      },
      onPanResponderMove: Animated.event(
        [
          null,
          { dx: pan.x, dy: pan.y }
        ]
      ),
      onPanResponderRelease: () => {
        pan.flattenOffset();
      }
    })
  ).current;

    return (
      <View style={style.mainView}
        onStartShouldSetResponderCapture={() => {return false}}>
        <Animated.View
          style={{
            transform: [{ translateX: pan.x }, { translateY: pan.y }]
          }}
          {...panResponder.panHandlers}
        >
          <Image
              style={style.moviePoster_posterStyle}
              source={require("../../assets/This_Gun_for_Hire_(1942)_poster.jpg")}
          />
        </Animated.View>
      </View>
    )


};

export default ImageScreen;

Thank you!

Best Answer

As said here, you need to specify useNativeDriver on your code (Set it to true or false, depending on your use)

Your code should now look like this:

import React, {useState, useRef} from 'react';
import { Animated, PanResponder, View, Image, StyleSheet } from 'react-native';

const style = StyleSheet.create({
  mainView: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "red"
  },  
  moviePoster_posterStyle: {
    resizeMode: "cover"
  }
});

const ImageScreen = () => {

  const pan = useRef(new Animated.ValueXY()).current;

  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        pan.setOffset({
          x: pan.x._value,
          y: pan.y._value
        });
      },
      onPanResponderMove: Animated.event(
        [
          null,
          { dx: pan.x, dy: pan.y }
        ],
        {useNativeDriver: false}
      ),
      onPanResponderRelease: () => {
        pan.flattenOffset();
      }
    })
  ).current;

    return (
      <View style={style.mainView}
        onStartShouldSetResponderCapture={() => {return false}}>
        <Animated.View
          style={{
            transform: [{ translateX: pan.x }, { translateY: pan.y }]
          }}
          {...panResponder.panHandlers}
        >
          <Image
              style={style.moviePoster_posterStyle}
              source={require("../../assets/This_Gun_for_Hire_(1942)_poster.jpg")}
          />
        </Animated.View>
      </View>
    )


};

export default ImageScreen;

Being the only difference here:

onPanResponderMove: Animated.event(
  [
    null,
    { dx: pan.x, dy: pan.y }
  ],
  {useNativeDriver: false}
),