{"library":"react-native-reanimated","title":"React Native Reanimated","description":"React Native Reanimated is a high-performance animation library for React Native, offering a powerful and flexible alternative to the built-in `Animated` API. It enables animations to run directly on the native UI thread, completely decoupling them from the JavaScript thread, which results in significantly smoother and more reliable user experiences, especially under heavy load or during complex interactions. The current stable version is 4.3.0, with frequent patch and minor updates. The library maintains a rapid release cadence, often introducing core infrastructure improvements via the tightly coupled `react-native-worklets` package, like the recent `Shareable` memory type. Key differentiators include its worklet-based architecture, allowing direct UI thread execution of JavaScript functions, and recent advancements such as CSS SVG animations for `Path`, `Image`, `LinearGradient`, `RadialGradient`, `Pattern`, and `Text` components, including advanced path morphing capabilities.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-reanimated"],"cli":null},"imports":["import { useSharedValue } from 'react-native-reanimated';","import { useAnimatedStyle } from 'react-native-reanimated';","import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';","import { runOnJS } from 'react-native-reanimated';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { Button, View, StyleSheet } from 'react-native';\nimport Animated, {\n  useSharedValue,\n  useAnimatedStyle,\n  withSpring,\n} from 'react-native-reanimated';\n\nconst Box = () => {\n  const offset = useSharedValue(0);\n\n  const animatedStyles = useAnimatedStyle(() => {\n    // Animations run on the UI thread here\n    return {\n      transform: [\n        { translateX: withSpring(offset.value * 255) },\n      ],\n    };\n  });\n\n  const handlePress = () => {\n    offset.value = Math.random(); // Update shared value from JS thread\n  };\n\n  return (\n    <View style={styles.container}>\n      <Animated.View style={[styles.box, animatedStyles]} />\n      <Button onPress={handlePress} title=\"Move\" />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  box: {\n    width: 100,\n    height: 100,\n    backgroundColor: 'purple',\n    borderRadius: 10,\n    marginBottom: 20,\n  },\n});\n\nexport default Box;","lang":"typescript","description":"This quickstart demonstrates a basic animation where a box's horizontal position is animated using `useSharedValue` and `useAnimatedStyle` with a spring effect upon button press. This showcases UI thread animation.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}