[React Native] react-native-gesture-handler 사용법

- 환경

react-native: 0.61.5

 

- 라이브러리

https://software-mansion.github.io/react-native-gesture-handler/docs/getting-started.html

Getting Started · React Native Gesture Handler

- 목적

어떠한 뷰가 있을 때 그 뷰를 왼쪽 오른쪽으로 swipe하면 새로운 view가 보이는걸 해볼 것이다.

 

- 설치

  yarn add react-native-gesture-handler
  or
  npm install --save react-native-gesture-handler

 

 

[iOS]

 pod install

 

 

[Android] 

android/app/src/main/java/MainActivity.java

package com.swmansion.gesturehandler.react.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

 

설치 끝!

 

- 사용법

1) Swiper

https://software-mansion.github.io/react-native-gesture-handler/docs/component-swipeable.html

Swipeable · React Native Gesture Handler

예시 코드를 보고 따라하면 됨! 아주 쉽다. 조금 쉽게 바꿔보면

import React from 'react';
import {Animated} from 'react-native';
import {RectButton} from 'react-native-gesture-handler';
import Swipeable from 'react-native-gesture-handler/Swipeable';
import {SSafeAreaView} from '../components/StyledComponents/Basic';
import {cWidth} from '../utils/constants';

export default () => {
  const renderLeftActions = (progress, dragX) => {
    const trans = dragX.interpolate({
      inputRange: [0, 50, 100, 101],
      outputRange: [-20, 0, 0, 1],
    });
    return (
      <RectButton
        style={{
          // flex: 1,
          width: cWidth,
          backgroundColor: 'cyan',
          justifyContent: 'center',
        }}
        onPress={console.log('Pressed')}>
        <Animated.Text
          style={[
            {
              color: 'black',
              fontSize: 16,
              transform: [{translateX: trans}],
            },
          ]}>
          Swiped!!
        </Animated.Text>
      </RectButton>
    );
  };
  return (
    <SSafeAreaView>
      <Swipeable renderLeftActions={renderLeftActions}>
        <RectButton
          style={{
            width: '100%',
            height: 80,
            backgroundColor: 'blue',
          }}
        />
      </Swipeable>
    </SSafeAreaView>
  );
};

 

renderLeftActions가 왼쪽으로 스와이프하면 보여지는 View를 그려준다!

 

 

[출처]

https://reactnativeforyou.com/how-to-create-a-swipeable-component-in-react-native/