RN - useSharedValue

useSharedValue는 React Native Reanimated 2 라이브러리에서 제공하는 훅으로,
애니메이션에 사용되는 값을 JS 스레드가 아니라 UI 스레드에서 직접 관리할 수 있게 해주는 기능

 

🚀 요약

• useSharedValue는 Reanimated 전용 상태 저장 변수
• 값이 바뀌면 UI 스레드에서 즉시 반영 → 부드럽고 끊김 없는 애니메이션
• sharedValue.value 형태로 값을 읽고 설정
• 값을 UI 스레드로 넘겨서 JS 스레드와 독립적으로 애니메이션을 계산하게 하여 더 자연스럽고 빠른 애니메이션을 구현

import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';

export default function Box() {
  const offset = useSharedValue(0);   // 공유 값 생성

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: offset.value }],
    };
  });

  return (
    <Animated.View
      style={[{ width: 100, height: 100, backgroundColor: 'blue' }, animatedStyle]}
      onTouchStart={() => {
        offset.value = withTiming(200);   // UI 스레드에서 애니메이션 실행
      }}
    />
  );
}