الحركات والانتقالات: Animated

import { useRef, useEffect } from 'react';import { Animated, Text, StyleSheet } from 'react-native'; export default function App() {  const opacity = useRef(new Animated.Value(0)).current;   useEffect(() => {    Animated.timing(opacity, {      toValue: 1,      duration: 900,      useNativeDriver: true,    }).start();  }, []);   return (    <Animated.View style={[styles.card, { opacity }]}>      <Text style={styles.t}>ظهرتُ بتدرّج ✨</Text>    </Animated.View>  );} const styles = StyleSheet.create({  card: { margin: 20, padding: 24, backgroundColor: '#FFF3E0', borderRadius: 14 },  t: { fontSize: 20, fontWeight: 'bold', color: '#E8820C', textAlign: 'center' },});

import { useRef } from 'react';import { Animated, Pressable, Text, StyleSheet } from 'react-native'; export default function App() {  const scale = useRef(new Animated.Value(1)).current;  const to = (v) => Animated.spring(scale, { toValue: v, useNativeDriver: true }).start();   return (    <Pressable onPressIn={() => to(0.9)} onPressOut={() => to(1)} style={{ padding: 30, alignItems: 'center' }}>      <Animated.View style={[styles.btn, { transform: [{ scale }] }]}>        <Text style={styles.t}>اضغطني</Text>      </Animated.View>    </Pressable>  );} const styles = StyleSheet.create({  btn: { backgroundColor: '#E8820C', paddingVertical: 14, paddingHorizontal: 28, borderRadius: 14 },  t: { color: 'white', fontSize: 18, fontWeight: 'bold' },});