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