Simple React Native Reanimated Example - React-native-reanimated Typing CST Test
Loading…
Simple React Native Reanimated Example — React-native-reanimated Code
A basic React Native Reanimated example that moves a box horizontally using a spring animation.
# react_native_reanimated/demo/App.jsx
import React from 'react';
import { View, Button } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
export default function App() {
const offset = useSharedValue(0)
const animatedStyle = useAnimatedStyle(() => ({
transform: [{ translateX: offset.value }]
}))
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Animated.View style={[{ width: 100, height: 100, backgroundColor: 'blue' }, animatedStyle]} />
<Button title="Move" onPress={() => { offset.value = withSpring(200) }} />
</View>
)
}React-native-reanimated Language Guide
React Native Reanimated is a high-performance, declarative animation library for React Native that enables smooth, native-driven animations using a powerful worklet-based architecture. It allows complex gesture, layout, and transition animations to run directly on the UI thread for maximum performance.
Primary Use Cases
- ▸Gesture-driven UI interactions
- ▸Smooth, hardware-accelerated animations
- ▸Bottom sheets, carousels, sliders, swipers
- ▸Custom scroll-based or parallax animations
- ▸Layout transitions and shared element effects
Notable Features
- ▸Worklets - JS functions running on UI thread
- ▸Shared values - reactive animated state
- ▸Native driver for zero-lag animations
- ▸Layout animations with automatic transitions
- ▸Gesture interactions through gesture-handler
Origin & Creator
React Native Reanimated was originally developed by the Software Mansion team, with major upgrades in Reanimated 2 (2021) introducing the worklets API and a complete UI runtime.
Industrial Note
Reanimated is heavily used in high-performance mobile apps with complex gestures and animations like scroll-based interactions, carousels, bottom sheets, draggable views, onboarding flows, and fluid UX transitions.