Socket
Socket
Sign inDemoInstall

react-native-reanimated

Package Overview
Dependencies
Maintainers
5
Versions
627
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-reanimated

More powerful alternative to Animated library for React Native.


Version published
Weekly downloads
904K
decreased by-5.48%
Maintainers
5
Weekly downloads
 
Created

What is react-native-reanimated?

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.

What are react-native-reanimated's main functionalities?

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]} />;

Other packages similar to react-native-reanimated

FAQs

Package last updated on 30 Nov 2023

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc