Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
react-native-reanimated
Advanced tools
More powerful alternative to Animated library for React Native.
react-native-reanimated is a powerful library for creating smooth animations and interactions in React Native applications. It provides a declarative API for animations, allowing developers to create complex animations with ease and high performance.
Basic Animations
This code demonstrates a basic fade-in animation using react-native-reanimated. The opacity value transitions from 0 to 1 over 500 milliseconds with an easing function.
import Animated, { Easing } from 'react-native-reanimated';
const { Value, timing } = Animated;
const opacity = new Value(0);
const fadeIn = timing(opacity, {
toValue: 1,
duration: 500,
easing: Easing.inOut(Easing.ease),
});
fadeIn.start();
Gesture-based Animations
This code demonstrates how to create a gesture-based animation using react-native-reanimated and react-native-gesture-handler. The view can be dragged horizontally and will spring back to its original position when released.
import Animated, { useAnimatedGestureHandler, useSharedValue, withSpring } from 'react-native-reanimated';
import { PanGestureHandler } from 'react-native-gesture-handler';
const translateX = useSharedValue(0);
const gestureHandler = useAnimatedGestureHandler({
onStart: (_, ctx) => {
ctx.startX = translateX.value;
},
onActive: (event, ctx) => {
translateX.value = ctx.startX + event.translationX;
},
onEnd: () => {
translateX.value = withSpring(0);
},
});
<PanGestureHandler onGestureEvent={gestureHandler}>
<Animated.View style={{ transform: [{ translateX: translateX.value }] }} />
</PanGestureHandler>;
Complex Animations with useAnimatedStyle
This code demonstrates how to create a complex animation using useSharedValue and useAnimatedStyle hooks. The scale of the view toggles between 1 and 1.5 when the button is pressed.
import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
import { Button } from 'react-native';
const scale = useSharedValue(1);
const animatedStyle = useAnimatedStyle(() => {
return {
transform: [{ scale: scale.value }],
};
});
<Button title="Animate" onPress={() => {
scale.value = withTiming(scale.value === 1 ? 1.5 : 1, { duration: 500 });
}} />
<Animated.View style={[{ width: 100, height: 100, backgroundColor: 'blue' }, animatedStyle]} />;
react-native-animatable provides a simple way to create animations in React Native. It offers a set of predefined animations and allows for custom animations. Compared to react-native-reanimated, it is easier to use but less powerful and flexible.
react-spring is a spring-physics-based animation library that works for both React and React Native. It provides a more physics-based approach to animations compared to react-native-reanimated, which can result in more natural-looking animations.
lottie-react-native allows you to use Adobe After Effects animations in your React Native app. It is great for complex animations created by designers, but it does not offer the same level of control and flexibility for custom animations as react-native-reanimated.
Reanimated 2 is here! Check out our documentation page for more information
React Native Reanimated provides a more comprehensive, low level abstraction for the Animated library API to be built on top of and hence allow for much greater flexibility especially when it comes to gesture based interactions.
Check out installation section of our docs for the detailed installation instructions.
Check out our dedicated documentation page for info about this library, API reference and more: https://docs.swmansion.com/react-native-reanimated/docs/
The source code for the example (showcase) app is under the Example/
directory.
If you want to play with the API but don't feel like trying it on a real app, you can run the example project. Clone the repo, go to the Example/ folder and run:
yarn install
Before running the app, install the cocoapods dependencies:
cd ios && pod install && cd ..
Now, you can start the app:
react-native run-ios
Run the react native's cli command:
react-native run-android
Important: You will need to have an Android or iOS device or emulator connected as well as react-native-cli package installed globally.
Reanimated library is licensed under The MIT License.
This project is supported by amazing people from Expo.io and Software Mansion
FAQs
More powerful alternative to Animated library for React Native.
The npm package react-native-reanimated receives a total of 825,261 weekly downloads. As such, react-native-reanimated popularity was classified as popular.
We found that react-native-reanimated demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.