Delayed Animation Start - React-native-reanimated Typing CST Test
Loading…
Delayed Animation Start — React-native-reanimated Code
Starts the animation with a delay using setTimeout.
# react_native_reanimated/demo/DelayedStart.jsx
import React, { useState, useEffect } from 'react';
import { View, Button } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
export default function DelayedStart() {
const x = useSharedValue(0)
const [start, setStart] = useState(false)
useEffect(() => { setTimeout(() => setStart(true), 1000) }, [])
const style = useAnimatedStyle(() => ({ transform:[{ translateX: x.value }] }))
useEffect(() => { if(start) x.value = withSpring(200) }, [start])
return (
<View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
<Animated.View style={[{ width:100, height:100, backgroundColor:'brown' }, style]} />
</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.