Skip to main content
CodeSpeedTest
Languages
Start TypingJump into a test — pick any languageAdaptive TrainingUnlock chars as you master themPractice DrillsFocused sessions targeting weak spotsDaily ChallengesNew coding challenges every dayRace ModeCompete against others in real timeAI OpponentRace against an AI at your WPM levelTournamentsLive coding speed tournamentsArcade GamesZType, Overkill Survival, Glyphica & moreGamificationXP, coins, badges & quests
LeaderboardGlobal rankings for every languageCertificatesEarn verifiable Bronze / Silver / Gold certsActivityDaily streaks & historical analyticsProfileYour stats, badges & achievements
Browse Languages500+ languages with real code examplesBlogTips, guides & deep divesFree ToolsWPM calculator, typing speed report & moreFAQCommon questions answeredGetting StartedNew to CodeSpeedTest?AboutOur story & missionSupportGet help — Pro users get priorityContactGet in touch with the team
Pricing
  1. Home
  2. /
  3. Learn
  4. /
  5. React-native-reanimated

Learn React-native-reanimated - 9 Code Examples & CST Typing Practice Test

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.

View all 9 React-native-reanimated code examples →
Simple React Native Reanimated ExampleVertical Slide AnimationOpacity Fade AnimationScale Up AnimationRotation AnimationDiagonal Slide AnimationCombined Opacity and ScaleSpring Bounce AnimationDelayed Animation Start

Learn REACT-NATIVE-REANIMATED with Real Code Examples

Updated Nov 26, 2025

Explain

Reanimated uses 'worklets'-JavaScript functions that run on a separate UI runtime for native-speed animations.

Animations run on the UI thread, not the JS thread, avoiding frame drops during heavy JS operations.

Provides declarative APIs, shared values, gestures, transitions, and layout animations.

Integrates deeply with react-native-gesture-handler for fluid interactive gestures.

Allows building complex animations with interpolation, timing, spring, derived values, and event-driven updates.

Core Features

useSharedValue and useAnimatedStyle

Timing, spring, and decay animations

Derived values for reactive logic

Gesture integration (Pan, Tap, etc.)

Layout animations (entering, exiting, transitioning)

Basic Concepts Overview

Shared Values - reactive animated state

Worklets - JS functions run on UI thread

Animated Styles - output of worklets

Animation Functions - timing, spring, decay

Derived Values - computed reactive values

Project Structure

App.js - root RN component

animations/ - reusable shared animations

components/ - animated UI components

hooks/ - custom animation hooks

gesture/ - gesture-handler logic

Building Workflow

Create shared values

Attach animated styles

Trigger animations via gestures or events

Run worklets on UI thread for smoothness

Use layout animations for transitions

Difficulty Use Cases

Beginner: simple fade-in animation

Intermediate: spring-driven draggable card

Advanced: full swipe/gesture carousel

Expert: custom bottom sheet with gestures

Architect: orchestrated multi-screen transitions

Comparisons

Reanimated vs Animated API -> Reanimated is native-driven

Reanimated vs Moti -> Moti is built on Reanimated, simpler API

Reanimated vs Lottie -> Lottie is for prebuilt animations, Reanimated is dynamic

Reanimated vs GSAP -> GSAP is JS-driven; Reanimated is native-driven

Reanimated vs Flutter animations -> Comparable but different architecture

Versioning Timeline

2020 - Reanimated 2 alpha released

2021 - Stable Reanimated 2 with worklets

2022 - Reanimated 2.5 major performance upgrades

2023 - Layout animations and transitions

2024-2025 - Reanimated 3 with TurboModules & Fabric support

Glossary

Worklet - JS function executed on UI thread

Shared Value - reactive animation state

Derived Value - computed animation state

UI Thread - native rendering thread

Gesture Handler - native gesture detection

Installation Setup

Install: npm install react-native-reanimated

Enable Reanimated Babel plugin in babel.config.js

Add Reanimated's Babel plugin as last plugin

Ensure Hermes engine enabled for best performance

Add Reanimated's native code via pod install (iOS)

Environment Setup

React Native 0.70+ recommended

Hermes engine enabled

Gesture-handler installed

Correct Babel plugin placement

Developer mode animations disabled for production feel

Config Files

babel.config.js - Reanimated plugin setup

index.js - gesture handler & Reanimated setup

metro.config.js - optional optimizations

ios/android native configs as needed

tsconfig.json - type support for Reanimated

Cli Commands

npm install react-native-reanimated

npx pod-install (iOS)

npm run android / ios

npx expo prebuild (for bare native code with Expo)

yarn start for metro server

Internationalization

Animations unaffected by language

Gesture directions may differ (LTR/RTL)

Use adaptive transitions for RTL layouts

Text-containing components translate normally

No text in worklets unless necessary

Accessibility

Animations respect reduced motion settings

Gestures must be keyboard-accessible (where applicable)

Avoid essential content behind animations

Provide alternative interactions for critical flows

Screen readers unaffected by animations

Ui Styling

Animated styles modify transforms, opacity, layout

Works with standard RN styles

Supports smooth transitions and interpolation

Integrates with gesture-driven UI

Works with custom components and Skia

State Management

Shared values store animation state

Derived values compute reactive logic

Worklets manipulate state on UI thread

External React state interacts indirectly

Multiple animations can run in sync

Data Management

Animation states remain in UI runtime

JS data must be serializable for worklets

Shared values bridge UI and JS threads

Avoid large objects in worklets

Lightweight updates ensure 60fps

Architecture

Worklets executed in UI runtime

Shared values synchronize JS and UI threads

Native driver renders animations

Declarative animations reduce JS overhead

Gesture handlers communicate directly with UI thread

Rendering Model

Worklets compiled to UI runtime bytecode

UI thread executes animation logic

Shared values push updates to native

Rendering performed by native views

No dependency on JS frame timing

Architectural Patterns

Reactive shared value model

UI-thread computation

Gesture-driven state updates

Declarative animation pipelines

Separation between UI and JS logic

Real World Architectures

Material design motion systems

Custom iOS-like gesture-driven navigation

Bottom sheets with snap points

Swipeable gallery and carousels

Dynamic onboarding animations

Design Principles

Native-driven performance

Declarative animation logic

Minimal JS-thread involvement

Gesture-first architecture

Composable animation primitives

Scalability Guide

Reuse worklets for performance

Modularize gestures and animations

Avoid deeply nested animated components

Use layout transitions for dynamic UIs

Profile animation performance on devices

Migration Guide

Replace Animated API with shared values

Refactor JS animations to worklets

Migrate gestures to gesture-handler

Adopt layout animations for smoother transitions

Test UI thread interactions extensively

Performance Notes

Use shared values for realtime updates

Move heavy logic to worklets

Avoid JS thread interruptions

Offload gesture animations to UI thread

Reuse animated styles where possible

Security Notes

UI thread runs isolated worklets

No external code execution allowed

Animations cannot access sensitive data

Worklets are sandboxed from JS thread

Safe for production mobile apps

Monitoring Analytics

Monitor dropped frames on animations

Track JS thread load separately

Measure gesture responsiveness

Log animation durations

Profile device performance

Code Quality

Avoid side effects inside worklets

Keep shared values minimal

Use custom hooks for reuse

Document gesture logic

Test animations visually and on devices

Practical Examples

Draggable card with pan gesture

Swipeable action rows (like Gmail)

Bottom sheet with snap points

Parallax scrolling animation

Smooth onboarding transitions

Troubleshooting

Ensure Babel plugin is configured

Do not put console.log inside worklets

Avoid passing JS objects to worklets

Hermes must be enabled for best results

Wrap entry file with Reanimated's gesture handler fix

Testing Guide

Mock useSharedValue in Jest

Avoid running worklets in test environment

Test JS logic separately

Use debug mode only for state validation

Test layout animations on real devices

Deployment Options

Standard RN Android/iOS builds

Works with EAS builds for Expo

No special deployment required

Native code bundled automatically

Hermes optional but recommended

Tools Ecosystem

react-native-gesture-handler

Moti for simplified animated components

React Native Skia for custom drawing

React Navigation (Reanimated-based transitions)

Bottom sheet libraries powered by Reanimated

Integrations

react-native-gesture-handler

React Navigation shared transitions

Skia for custom animated canvases

Expo (Reanimated supported by default)

Gesture-based UI frameworks

Productivity Tips

Use Moti for rapid development

Create animation presets

Group related animations in hooks

Use interpolation smartly

Write reusable gesture handlers

Challenges

Understanding worklet serialization

Debugging UI thread issues

Managing complex gesture logic

Avoiding JS thread bottlenecks

Building reusable animation architecture

Learning Path

Learn basic animations with useSharedValue

Master animated styles and interpolation

Understand gestures and PanGestureHandler

Build complex controls like carousels

Create layout transitions and custom gestures

Skill Improvement Plan

Week 1: Learn worklets & shared values

Week 2: Create gesture-driven components

Week 3: Build custom animations with interpolation

Week 4: Implement layout animations

Week 5: Build complete animated UI system

Interview Questions

How do worklets work and why are they important?

Difference between shared values and React state?

Why do animations run smoother on UI thread?

Explain gesture-driven animations using PanGestureHandler.

What are layout animations and how do they work?

Cheat Sheet

const x = useSharedValue(0);

x.value = withSpring(100);

const style = useAnimatedStyle(() => ({ transform: [{ translateX: x.value }] }));

<Animated.View style={style} />

Use worklets for UI-thread performance

Books

Mastering React Native Animations

Advanced React Native Architecture

Gesture-powered UI Interactions

Practical Reanimated for Mobile Apps

Motion Design in React Native

Tutorials

Official Reanimated 2/3 guides

Gesture + Reanimated tutorials

Bottom sheet implementations

React Navigation Reanimated transitions

Moti animation tutorials

Official Docs

https://docs.swmansion.com/react-native-reanimated/

https://reactnative.dev/docs/

Community Links

React Native Discord

Software Mansion GitHub

React Native EU conference talks

YouTube animation tutorials

StackOverflow react-native-reanimated tag

Community Support

GitHub discussions (Software Mansion)

React Native Discord

Expo community forums

React Native EU conference talks

YouTube tutorials by community creators

Monetization

Premium UI animations for apps

High-quality bottom sheets and interactions

Animated onboarding for paid apps

Interactive premium features

Consulting for motion design systems

Future Roadmap

Full Fabric renderer integration

Web support for Reanimated 3

More layout animation primitives

Better TypeScript support

Improved debugging for worklets

When Not To Use

Simple static animations (Animated API may suffice)

Animations not requiring gestures

Apps without complex UI interactions

Pure SVG animations (use React Native SVG + Skia)

Cross-platform web animations (Reanimated is mobile-first)

Final Summary

Reanimated delivers native-speed animations in React Native.

Uses worklets running on UI thread for maximum smoothness.

Best choice for gesture-heavy, fluid mobile interactions.

Powerful, declarative, and optimized for real-time motion.

Ideal for professional-grade mobile UX animations.

Faq

Is Reanimated faster than Animated? -> Yes, runs on UI thread.

Does it work with Expo? -> Yes, fully supported.

Do I need Hermes? -> Recommended but not required.

Can I mix with Lottie? -> Yes, but separate concerns.

Can I animate SVGs? -> Yes with Reanimated + Skia.

Code Sample Descriptions

1

Simple React Native Reanimated Example

# 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>
    )
}

A basic React Native Reanimated example that moves a box horizontally using a spring animation.

Let’s Try →
2

Vertical Slide Animation

# react_native_reanimated/demo/VerticalSlide.jsx
import React from 'react';
import { View, Button } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';

export default function VerticalSlide() {
    const offset = useSharedValue(0)
    const style = useAnimatedStyle(() => ({ transform: [{ translateY: offset.value }] }))
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Animated.View style={[{ width: 100, height: 100, backgroundColor: 'green' }, style]} />
        <Button title="Move" onPress={() => { offset.value = withSpring(200) }} />
        </View>
    )
}

Animates a box vertically using Reanimated spring.

Let’s Try →
3

Opacity Fade Animation

# react_native_reanimated/demo/Fade.jsx
import React from 'react';
import { View, Button } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';

export default function Fade() {
    const opacity = useSharedValue(0)
    const style = useAnimatedStyle(() => ({ opacity: opacity.value }))
    return (
        <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
        <Animated.View style={[{ width:100, height:100, backgroundColor:'purple' }, style]} />
        <Button title="Fade In" onPress={() => { opacity.value = withTiming(1) }} />
        </View>
    )
}

Animates a box fading in using shared value.

Let’s Try →
4

Scale Up Animation

# react_native_reanimated/demo/ScaleUp.jsx
import React from 'react';
import { View, Button } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';

export default function ScaleUp() {
    const scale = useSharedValue(0.5)
    const style = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }))
    return (
        <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
        <Animated.View style={[{ width:100, height:100, backgroundColor:'red' }, style]} />
        <Button title="Scale" onPress={() => { scale.value = withSpring(1) }} />
        </View>
    )
}

Animates a box scaling up using spring animation.

Let’s Try →
5

Rotation Animation

# 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>
    )
}

Rotates a box using spring physics.

Let’s Try →
6

Diagonal Slide Animation

# react_native_reanimated/demo/DiagonalSlide.jsx
import React from 'react';
import { View, Button } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';

export default function DiagonalSlide() {
    const x = useSharedValue(0)
    const y = useSharedValue(0)
    const style = useAnimatedStyle(() => ({ transform: [{ translateX: x.value }, { translateY: y.value }] }))
    return (
        <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
        <Animated.View style={[{ width:100, height:100, backgroundColor:'blue' }, style]} />
        <Button title="Move" onPress={() => { x.value = withSpring(150); y.value = withSpring(150) }} />
        </View>
    )
}

Moves a box diagonally using two shared values.

Let’s Try →
7

Combined Opacity and Scale

# react_native_reanimated/demo/OpacityScale.jsx
import React from 'react';
import { View, Button } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';

export default function OpacityScale() {
    const scale = useSharedValue(0.5)
    const opacity = useSharedValue(0)
    const style = useAnimatedStyle(() => ({ transform:[{ scale: scale.value }], opacity: opacity.value }))
    return (
        <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
        <Animated.View style={[{ width:100, height:100, backgroundColor:'cyan' }, style]} />
        <Button title="Animate" onPress={() => { scale.value = withSpring(1); opacity.value = withSpring(1) }} />
        </View>
    )
}

Animates both opacity and scale simultaneously.

Let’s Try →
8

Spring Bounce Animation

# react_native_reanimated/demo/Bounce.jsx
import React from 'react';
import { View, Button } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';

export default function Bounce() {
    const y = useSharedValue(0)
    const style = useAnimatedStyle(() => ({ transform:[{ translateY: y.value }] }))
    return (
        <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
        <Animated.View style={[{ width:100, height:100, backgroundColor:'pink' }, style]} />
        <Button title="Bounce" onPress={() => { y.value = withSpring(100, { damping: 2, stiffness: 100 }) }} />
        </View>
    )
}

A bouncing box effect using custom spring config.

Let’s Try →
9

Delayed Animation Start

# 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>
    )
}

Starts the animation with a delay using setTimeout.

Let’s Try →

Frequently Asked Questions about React-native-reanimated

What is React-native-reanimated?

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.

What are the primary use cases for React-native-reanimated?

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

What are the strengths of React-native-reanimated?

Ultra-smooth 60fps animations. No frame drops under JS thread load. Powerful declarative syntax. Full gesture integration. Native-performance layout transitions

What are the limitations of React-native-reanimated?

Requires Babel plugin setup. Some debugging is harder due to worklets. Not identical to React Native's Animated API. Worklet context restrictions. Must avoid referencing non-serializable objects

How can I practice React-native-reanimated typing speed?

CodeSpeedTest offers 9+ real React-native-reanimated code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

CReactPythonC++RustTypeScriptKotlinPHPJavaC#RubyMqlCqlN1qlCypherGremlinPartiqlHaskellElixirFsharpView all languages →
CodeSpeedTest

Improve your coding speed, code accuracy, and programming syntax WPM with practice sessions across 500+ programming languages.

Quick Links

HomeAboutFeaturesGetting StartedLanguages

Legal & Support

Pro ⚡ PricingContactPrivacy PolicyTerms of Service

Connect

CodeSpeedTest on GitHubCodeSpeedTest on TwitterEmail CodeSpeedTest

© 2026 CodeSpeedTest. All rights reserved.