Using Swiper.js

PullToUpdate.js

import * as React from 'react';
import { Loader } from 'path-to-loader';
import { Swiper } from 'path-to-swiper';

class PullToUpdate extends React.PureComponent {
  state = {
    translate: 0
  };

  rootNode = null;

  setRootNode = (node) => {
    this.rootNode = node;
  };

  onMove = ({ event, y, direction }) => {
    if (direction === 'Y' && this.rootNode && this.rootNode.scrollTop === 0) {
      event.stopPropagation();
      this.setTranslate(y);
    }
  };

  onMoveEnd = async ({ y, direction }) => {
    if (direction === 'Y') {
      if (y >= MAX_TRANSFORM_SIZE) {
        await this.props.onToggleDown();
        this.setTranslate(0);
      } else {
        this.setTranslate(0);
      }
    }
  };

  setTranslate = (translate) => {
    this.setState({ translate });
  };

  render() {
    return (
      <Swiper
        onMove={this.onMove}
        onMoveEnd={this.onMoveEnd}
      >
        <div ref={this.setRootNode}>
          {this.state.translate > 0 && <Loader />}
          {this.props.children}
        </div>
      </Swiper>
    );
  }
}

export { PullToUpdate };