Rotation Animation - React-native-reanimated Typing CST Test
Loading…
Rotation Animation — React-native-reanimated Code
Rotates a box using spring physics.
# react_native_reanimated/demo/Rotate.jsx
import React from 'react';
import { View, Button } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
export default function Rotate() {
const rotation = useSharedValue(0)
const style = useAnimatedStyle(() => ({ transform: [{ rotateZ: `${rotation.value}deg` }] }))
return (
<View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
<Animated.View style={[{ width:100, height:100, backgroundColor:'orange' }, style]} />
<Button title="Rotate" onPress={() => { rotation.value = withSpring(360) }} />
</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.