React Native ReTween
Blazing fast and easy tween animation.
Installation
Open a Terminal in the project root and run:
yarn add react-native-retween
Now we need to install react-native-reanimated
.
If you are using Expo (this might work slower with latest Expo SDK 35 than vanilla RN, since it has outdated version of reanimated with no proces), to ensure that you get the compatible versions of the libraries, run:
expo install react-native-reanimated
If you are not using Expo, run the following:
yarn add react-native-reanimated
If you are using Expo, you are done. Otherwise, continue to the next steps.
Next, we need to link these libraries. The steps depends on your React Native version:
-
React Native 0.60 and higher
On newer versions of React Native, linking is automatic.
To complete the linking on iOS, make sure you have Cocoapods installed. Then run:
cd ios pod install cd ..
-
React Native 0.59 and lower
If you're on an older React Native version, you need to manually link the dependencies. To do that, run:
react-native link react-native-reanimated
Quick overview
You can find this in the example folder.
function TweenExample() {
const { play, values, stop } = useTween(() => ({
timing: {
duration: 400,
},
// otherwise you can use spring
// spring: {
// mass: 1,
// },
from: {
width: 50,
height: 50,
left: 20,
borderRadius: 0,
},
to: {
width: 200,
height: 200,
left: windowWidth - 20 - 200,
borderRadius: 2,
},
}));
const [backward, setBackward] = React.useState(false);
function onPress() {
play(backward);
setBackward((val) => !val);
}
return (
<View style={s.animationContainer}>
<View style={s.row}>
<Button onPress={onPress} title="Toggle animation" />
<Button onPress={stop} title="Stop" />
</View>
<Animated.View style={[s.animatedView, values]} />
</View>
);
}