리스트 목록을 스와이프 해봅시다! (swipeable row)

React Native로 모바일 앱 만들기 공부하고 있는데요.

 

Gmail 같은 앱에서 많이 사용하는 기능으로 스와이프 하면 버튼이 나타나는 것을 구현해 보았습니다.

 

 

아래와 같은 동작입니다.

 

 

 

 

 

React Native Gesture Handler의 Swipeable 컴포넌트를 사용해서 쉽게 구현할 수 있었습니다.

 

제공되는 예제(데모) 코드를 참고해서 최소한 기능만 구현해 보았습니다.  

 

제 코드와 데모는 여기로(expo demo).

 

class SampleSwipe extends Component {
  renderRightActions = progress => {
    const pressAction = () => {
      this.close();
      alert("TEST");
    }
    return (
      <RectButton style={styles.rightAction} onPress={pressAction}>
        <Text>TEST</Text>
      </RectButton>
    );
  }

  updateRef = ref => {
    this._swipeableRow = ref;
  };

  close = () => {
    this._swipeableRow.close();
  };

  render() {
    const {children} = this.props;

    return(
      <Swipeable
        ref={this.updateRef}
        friction={2}
        rightThreshold={30}
        overshootRight={false}
        renderRightActions={this.renderRightActions}
      >
        {children}
      </Swipeable>
    )
  }
}

 

Swipeable 컴포넌트를 사용하는 위 코드가 가장 핵심입니다. 

 

컴포넌트 프로퍼티 몇 개 설정해 주면 스와이프 기능 구현 끝입니다.

 

* friction

- 패널이 열리는 속도(?)를 조절하는 프로퍼티인데요, 3이상 주니까 잘 안 되는 것 같습니다.

 

* rightThreshold

- 스와이프를 인식하는 거리입니다. 맨 오른쪽 엣지에서 부터 지정된 거리만큼 스와이프 액션을 취해야 패널이 열립니다.

 

* overshootRight

- 스와이프로 열린 패널에 바운스 속성을 비활성화 시킬때 사용합니다.

 

* renderRightActions

- 패널에 사용할 리액트 컴포넌트를 반환할 함수를 지정해야 합니다. 이것을 지정 안하면 스와이프 안 됩니다.

 

 

검색해보면, 오픈소스로 다양한 프로젝트가 있지만,

 

이렇게 간단하게 최소한의 기능만 구현해서 사용하는 것도 나쁘지 않을 것 같습니다.