react native reanimated, react native gesture handler

React Native Reanimated와 React Native Gesture Handler는 모두 React Native에서 애니메이션과 제스처 처리를 개선하기 위해 사용되는 라이브러리입니다. 이 두 모듈은 모두 Software Mansion이라는 회사에서 관리하고 있습니다. 그러나 이 두 라이브러리는 서로 다른 목적과 기능을 가지고 있습니다.

React Native Reanimated : 주로 애니메이션을 처리하는 데 사용

React Native Reanimated는 React Native 애니메이션 라이브러리로, 성능이 뛰어나고 복잡한 애니메이션을 구현할 수 있도록 설계되었습니다. Reanimated는 애니메이션 로직을 JavaScript 스레드가 아닌 UI 스레드에서 실행할 수 있도록 하여, 애니메이션의 성능을 크게 향상시킵니다.

주요 특징

1. Declarative API: Reanimated는 선언형 API를 사용하여 애니메이션을 정의할 수 있습니다. 이는 React의 철학과 잘 맞습니다.
2. Worklets: Worklets는 애니메이션 로직을 UI 스레드에서 실행할 수 있게 하는 작은 JavaScript 함수입니다.
3. 종속성: 애니메이션을 구성 요소의 종속성으로 처리하여, 상태와 애니메이션 로직을 깔끔하게 분리할 수 있습니다.
4. 강력한 구성: Reanimated는 복잡한 애니메이션을 쉽게 구성할 수 있는 유연한 API를 제공합니다.
5. 기본적인 성능: 애니메이션 로직이 UI 스레드에서 실행되기 때문에, JavaScript 스레드의 부하가 높은 경우에도 애니메이션이 부드럽게 실행됩니다.

import React from 'react';
import { View, Text } from 'react-native';
import Animated, { Easing, useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';

const App = () => {
  const offset = useSharedValue(0);

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

  React.useEffect(() => {
    offset.value = withTiming(100, {
      duration: 1000,
      easing: Easing.inOut(Easing.ease),
    });
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Animated.View style={[{ width: 100, height: 100, backgroundColor: 'blue' }, animatedStyles]} />
    </View>
  );
};

export default App;

React Native Gesture Handler : 주로 제스처를 처리하는 데 사용

React Native Gesture Handler는 React Native에서 터치 및 제스처 처리를 개선하기 위해 사용되는 라이브러리입니다. 기본 제공 제스처 시스템의 한계를 극복하고, 복잡한 제스처를 효율적으로 처리할 수 있도록 설계되었습니다.

주요 특징

1. 성능 최적화: 기본 제공 제스처 시스템보다 더 높은 성능을 제공합니다.
2. 간편한 제스처 관리: 다양한 제스처(탭, 팬, 핀치, 회전 등)를 쉽게 관리할 수 있는 API를 제공합니다.
3. 제스처 구성 요소: 각종 제스처를 감지할 수 있는 구성 요소를 제공합니다.
4. 네이티브 통합: 네이티브 수준에서 제스처를 처리하여 더욱 부드럽고 빠른 응답성을 제공합니다.
5. 호환성: 다른 애니메이션 라이브러리와 쉽게 통합할 수 있습니다.

import React from 'react';
import { View, Text } from 'react-native';
import { GestureHandlerRootView, PanGestureHandler } from 'react-native-gesture-handler';
import Animated, { useAnimatedGestureHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';

const App = () => {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

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

  const panGestureEvent = useAnimatedGestureHandler({
    onStart: (event, context) => {
      context.startX = translateX.value;
      context.startY = translateY.value;
    },
    onActive: (event, context) => {
      translateX.value = context.startX + event.translationX;
      translateY.value = context.startY + event.translationY;
    },
    onEnd: () => {
      // handle gesture end
    },
  });

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <PanGestureHandler onGestureEvent={panGestureEvent}>
        <Animated.View style={[{ width: 100, height: 100, backgroundColor: 'red' }, animatedStyles]} />
      </PanGestureHandler>
    </GestureHandlerRootView>
  );
};

export default App;