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.