react-nativeanimation

React Native Error: "Animated.event now requires a second argument for options"


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!


Solution

  • 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}
    ),