Swipeable.js

import React from 'react';
import { View, StyleSheet, Platform } from 'react-native';
import PropTypes from 'prop-types';
import Interactable from 'react-native-interactable';

import Card from './Card'

export default class Swipeable extends React.Component {
  static propTypes = {
    cards: PropTypes.array.isRequired,
  };

  static HorizontalMargin = 10;
  static VerticalMargin = 20;
  static BoundaryPadding = 30;
  static BoundaryBounce = 0;
  static ContainerToCardWidthRatio = 1.35;

  state = {
    cardWidth: 0,
    swipeableWidth: 0,
    snapPoints: [],
    swipeableBoundary: 0,
  };

  onLayout = e => {
    const containerWidth = e.nativeEvent.layout.width;
    const { cards } = this.props;

    // calculate the width of a card
    const cardWidth = containerWidth / Swipeable.ContainerToCardWidthRatio;
    this.setState({ cardWidth });

    // calculate total swipeable width
    const swipeableWidth = cardWidth * cards.length;
    this.setState({ swipeableWidth });

    // calculate incrementation amount for snap points
    const incrementAmountForOuterCards =
      cardWidth - (containerWidth - cardWidth) / 2 + Swipeable.HorizontalMargin;
    const incrementAmountForInnerCards = cardWidth;

    // calculate snap points
    let x = 0;
    let snapPoints = cards.map((card, index) => {
      const snapPointForCard = { x };
      if (index === 0 || index === cards.length - 2) {
        x -= incrementAmountForOuterCards
      } else {
        x -= incrementAmountForInnerCards
      }
      return snapPointForCard
    });
    this.setState({ snapPoints });

    // calculate the swiping boundary
    const swipeableBoundary = snapPoints[cards.length - 1].x - Swipeable.BoundaryPadding;
    this.setState({ swipeableBoundary })
  };

  render() {
    const { cards } = this.props;
    let cardsToRender;

    if (this.state.cardWidth > 0) {
      cardsToRender = cards.map((card, index) =>
        <Card
          key={index}
          imageUrl={card.imageUrl}
          title={card.title}
          subtitle={card.subtitle}
          buttonText={card.buttonText}
          width={this.state.cardWidth} />
      )
    }

    return (
      <View onLayout={this.onLayout}>
        <Interactable.View
          snapPoints={this.state.snapPoints}
          // does not work on Android
          boundaries={
            Platform.OS === 'ios'
              ? {
                left: this.state.swipeableBoundary,
                right: Swipeable.BoundaryPadding,
                bounce: Swipeable.BoundaryBounce,
              }
              : { bounce: Swipeable.BoundaryBounce }
          }
          horizontalOnly={true}
          animatedNativeDriver={true}
          style={[
            styles.interactableContainer,
            { width: this.state.swipeableWidth }
          ]}
        >
          {cardsToRender}
        </Interactable.View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  interactableContainer: {
    flexDirection: 'row',
    marginHorizontal: Swipeable.HorizontalMargin,
    marginVertical: Swipeable.VerticalMargin,
  },
});