Security News
pnpm 9.5 Introduces Catalogs: Shareable Dependency Version Specifiers
pnpm 9.5 introduces a Catalogs feature, enabling shareable dependency version specifiers, reducing merge conflicts and improving support for monorepos.
react-native-reanimated
Advanced tools
Package description
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.
Readme
If you want to publish the lib as a maven dependency, follow these steps before publishing a new version to npm:
local.properties
file in this folder that points to the Android SDK and NDKndk.dir=/Users/{username}/Library/Android/sdk/ndk-bundle
sdk.dir=/Users/{username}/Library/Android/sdk
maven
foldersudo ./gradlew installArchives
FAQs
Unknown package
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
pnpm 9.5 introduces a Catalogs feature, enabling shareable dependency version specifiers, reducing merge conflicts and improving support for monorepos.
Security News
A threat actor on BreachForums is selling an unverified npm vulnerability for account takeover, but npm has not officially confirmed the existence of this security concern.
Security News
Cyber insurance rates are dropping as the market matures, according to a new report projecting global premiums to reach $43 billion by 2030, driven by international market uptake and growth in the SME sector.