Combined Opacity and Scale - React-native-reanimated Typing CST Test
Loading…
Combined Opacity and Scale — React-native-reanimated Code
Animates both opacity and scale simultaneously.
# 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>
)
}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.
Quick 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)
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
Practical Examples
- ▸Draggable card with pan gesture
- ▸Swipeable action rows (like Gmail)
- ▸Bottom sheet with snap points
- ▸Parallax scrolling animation
- ▸Smooth onboarding 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
Strengths
- ▸Ultra-smooth 60fps animations
- ▸No frame drops under JS thread load
- ▸Powerful declarative syntax
- ▸Full gesture integration
- ▸Native-performance layout transitions
Limitations
- ▸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
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)
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
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.
30-Day Skill 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
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.
Project Structure
- ▸App.js - root RN component
- ▸animations/ - reusable shared animations
- ▸components/ - animated UI components
- ▸hooks/ - custom animation hooks
- ▸gesture/ - gesture-handler logic
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
Productivity Tips
- ▸Use Moti for rapid development
- ▸Create animation presets
- ▸Group related animations in hooks
- ▸Use interpolation smartly
- ▸Write reusable gesture handlers
Basic Concepts
- ▸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