-
|
Hi, I've a React Native Animated API with this: const fadeAnim = useRef(new Animated.Value(0.5)).current;
const animationLastStyle = {
opacity: fadeAnim,
transform: [
{
translateY: fadeAnim.interpolate({
inputRange: [0, 1],
outputRange: [-100, 0],
}),
},
],
};After upgrade Expo SDK, I'm bound to use Reanimated 2. But when I change |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 4 replies
-
|
Check which package the Animated has been imported from. Look like from 'react-native', not from 'react-native-reanimated'. |
Beta Was this translation helpful? Give feedback.
-
|
The strange thing is that I've import the react-native package. I've never import react-native-reanimated, I was unaware of its existence until today. |
Beta Was this translation helpful? Give feedback.
-
|
Ok. If you want to rewrite this animation on the reanimated v2, then your code will be look like: import Animated, { useSharedValue, withTiming, useAnimatedStyle, interpolate, Easing } from 'react-native-reanimated';
....
const fadeAnim = useSharedValue(0.5); // initial value 0.5
const animationLastStyle = useAnimatedStyle(() => {
return {
opacity: fadeAnim.value,
transform: [
{
translateY: interpolate(
fadeAnim.value, // first argument - shared value
[0, 1], // second argument is array - input range
[-100, 0], // third argument is array - output range
),
},
],
};
}, [fadeAnim]);
...
// run timing animation on mount, for example
useEffect(() => {
fadeAnim.value = withTiming(1, { duration: 500, easing: Easing.linear }); // change fadeAnim from 0.5 to 1 in 500 milliseconds
}, [])
...
return <Animated.View style={animationLastStyle} /> For more information and explanations, you can see code in the Example folder in Reanimated repo, read official docs and see video tutorials by William Candillion and video tutorials by evening kid |
Beta Was this translation helpful? Give feedback.
-
Could you explain why it is so? You don't have to use Reanimated if you don't want to, RN Animated API should work just fine. Instructions on migration are for people using Reanimated 1. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you @NikitaDudin and @jakub-gonet for your replies. I've removed the views in my project where I use Animated (not Reanimated). I've relodaded the app... and the interpolate error is still there! Maybe is an issue of React Navigation 4. |
Beta Was this translation helpful? Give feedback.
-
|
React Navigation 4 uses interpolate (since when it was released Reanimated 2 didn't exist). You can ignore this warning via import { LogBox } from 'react-native';
LogBox.ignoreLogs(['Reanimated 2']);in App.js We use the correct version when it's called and this warning is only informational. |
Beta Was this translation helpful? Give feedback.
-
|
Perfect! It was that. Thank you for your reply and be so fast! |
Beta Was this translation helpful? Give feedback.
Thank you @NikitaDudin and @jakub-gonet for your replies.
I've removed the views in my project where I use Animated (not Reanimated). I've relodaded the app... and the interpolate error is still there!