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:
Being the only difference here: