initial commit taken from gitlab.lrz.de

node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableFlatList.js

@@ -0,0 +1,187 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule SwipeableFlatList
+ * @flow
+ * @format
+ */
+'use strict';
+
+import type {Props as FlatListProps} from 'FlatList';
+import type {renderItemType} from 'VirtualizedList';
+
+const PropTypes = require('prop-types');
+const React = require('React');
+const SwipeableRow = require('SwipeableRow');
+const FlatList = require('FlatList');
+
+type SwipableListProps = {
+  /**
+   * To alert the user that swiping is possible, the first row can bounce
+   * on component mount.
+   */
+  bounceFirstRowOnMount: boolean,
+  // Maximum distance to open to after a swipe
+  maxSwipeDistance: number | (Object => number),
+  // Callback method to render the view that will be unveiled on swipe
+  renderQuickActions: renderItemType,
+};
+
+type Props<ItemT> = SwipableListProps & FlatListProps<ItemT>;
+
+type State = {
+  openRowKey: ?string,
+};
+
+/**
+ * A container component that renders multiple SwipeableRow's in a FlatList
+ * implementation. This is designed to be a drop-in replacement for the
+ * standard React Native `FlatList`, so use it as if it were a FlatList, but
+ * with extra props, i.e.
+ *
+ * <SwipeableListView renderRow={..} renderQuickActions={..} {..FlatList props} />
+ *
+ * SwipeableRow can be used independently of this component, but the main
+ * benefit of using this component is
+ *
+ * - It ensures that at most 1 row is swiped open (auto closes others)
+ * - It can bounce the 1st row of the list so users know it's swipeable
+ * - Increase performance on iOS by locking list swiping when row swiping is occurring
+ * - More to come
+ */
+
+class SwipeableFlatList<ItemT> extends React.Component<Props<ItemT>, State> {
+  props: Props<ItemT>;
+  state: State;
+
+  _flatListRef: ?FlatList<ItemT> = null;
+  _shouldBounceFirstRowOnMount: boolean = false;
+
+  static propTypes = {
+    ...FlatList.propTypes,
+
+    /**
+     * To alert the user that swiping is possible, the first row can bounce
+     * on component mount.
+     */
+    bounceFirstRowOnMount: PropTypes.bool.isRequired,
+
+    // Maximum distance to open to after a swipe
+    maxSwipeDistance: PropTypes.oneOfType([PropTypes.number, PropTypes.func])
+      .isRequired,
+
+    // Callback method to render the view that will be unveiled on swipe
+    renderQuickActions: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    ...FlatList.defaultProps,
+    bounceFirstRowOnMount: true,
+    renderQuickActions: () => null,
+  };
+
+  constructor(props: Props<ItemT>, context: any): void {
+    super(props, context);
+    this.state = {
+      openRowKey: null,
+    };
+
+    this._shouldBounceFirstRowOnMount = this.props.bounceFirstRowOnMount;
+  }
+
+  render(): React.Node {
+    return (
+      <FlatList
+        {...this.props}
+        ref={ref => {
+          this._flatListRef = ref;
+        }}
+        onScroll={this._onScroll}
+        renderItem={this._renderItem}
+      />
+    );
+  }
+
+  _onScroll = (e): void => {
+    // Close any opens rows on ListView scroll
+    if (this.state.openRowKey) {
+      this.setState({
+        openRowKey: null,
+      });
+    }
+
+    this.props.onScroll && this.props.onScroll(e);
+  };
+
+  _renderItem = (info: Object): ?React.Element<any> => {
+    const slideoutView = this.props.renderQuickActions(info);
+    const key = this.props.keyExtractor(info.item, info.index);
+
+    // If renderQuickActions is unspecified or returns falsey, don't allow swipe
+    if (!slideoutView) {
+      return this.props.renderItem(info);
+    }
+
+    let shouldBounceOnMount = false;
+    if (this._shouldBounceFirstRowOnMount) {
+      this._shouldBounceFirstRowOnMount = false;
+      shouldBounceOnMount = true;
+    }
+
+    return (
+      <SwipeableRow
+        slideoutView={slideoutView}
+        isOpen={key === this.state.openRowKey}
+        maxSwipeDistance={this._getMaxSwipeDistance(info)}
+        onOpen={() => this._onOpen(key)}
+        onClose={() => this._onClose(key)}
+        shouldBounceOnMount={shouldBounceOnMount}
+        onSwipeEnd={this._setListViewScrollable}
+        onSwipeStart={this._setListViewNotScrollable}>
+        {this.props.renderItem(info)}
+      </SwipeableRow>
+    );
+  };
+
+  // This enables rows having variable width slideoutView.
+  _getMaxSwipeDistance(info: Object): number {
+    if (typeof this.props.maxSwipeDistance === 'function') {
+      return this.props.maxSwipeDistance(info);
+    }
+
+    return this.props.maxSwipeDistance;
+  }
+
+  _setListViewScrollableTo(value: boolean) {
+    if (this._flatListRef) {
+      this._flatListRef.setNativeProps({
+        scrollEnabled: value,
+      });
+    }
+  }
+
+  _setListViewScrollable = () => {
+    this._setListViewScrollableTo(true);
+  };
+
+  _setListViewNotScrollable = () => {
+    this._setListViewScrollableTo(false);
+  };
+
+  _onOpen(key: any): void {
+    this.setState({
+      openRowKey: key,
+    });
+  }
+
+  _onClose(key: any): void {
+    this.setState({
+      openRowKey: null,
+    });
+  }
+}
+
+module.exports = SwipeableFlatList;

node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableListView.js

@@ -0,0 +1,211 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule SwipeableListView
+ * @flow
+ */
+'use strict';
+
+const ListView = require('ListView');
+const PropTypes = require('prop-types');
+const React = require('React');
+const SwipeableListViewDataSource = require('SwipeableListViewDataSource');
+const SwipeableRow = require('SwipeableRow');
+
+type DefaultProps = {
+  bounceFirstRowOnMount: boolean,
+  renderQuickActions: Function,
+};
+
+type Props = {
+  bounceFirstRowOnMount: boolean,
+  dataSource: SwipeableListViewDataSource,
+  maxSwipeDistance: number | (rowData: any, sectionID: string, rowID: string) => number,
+  onScroll?: ?Function,
+  renderRow: Function,
+  renderQuickActions: Function,
+};
+
+type State = {
+  dataSource: Object,
+};
+
+/**
+ * A container component that renders multiple SwipeableRow's in a ListView
+ * implementation. This is designed to be a drop-in replacement for the
+ * standard React Native `ListView`, so use it as if it were a ListView, but
+ * with extra props, i.e.
+ *
+ * let ds = SwipeableListView.getNewDataSource();
+ * ds.cloneWithRowsAndSections(dataBlob, ?sectionIDs, ?rowIDs);
+ * // ..
+ * <SwipeableListView renderRow={..} renderQuickActions={..} {..ListView props} />
+ *
+ * SwipeableRow can be used independently of this component, but the main
+ * benefit of using this component is
+ *
+ * - It ensures that at most 1 row is swiped open (auto closes others)
+ * - It can bounce the 1st row of the list so users know it's swipeable
+ * - More to come
+ */
+class SwipeableListView extends React.Component<Props, State> {
+  props: Props;
+  state: State;
+
+  _listViewRef: ?React.Element<any> = null;
+  _shouldBounceFirstRowOnMount: boolean = false;
+
+  static getNewDataSource(): Object {
+    return new SwipeableListViewDataSource({
+      getRowData: (data, sectionID, rowID) => data[sectionID][rowID],
+      getSectionHeaderData: (data, sectionID) => data[sectionID],
+      rowHasChanged: (row1, row2) => row1 !== row2,
+      sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
+    });
+  }
+
+  static propTypes = {
+    /**
+     * To alert the user that swiping is possible, the first row can bounce
+     * on component mount.
+     */
+    bounceFirstRowOnMount: PropTypes.bool.isRequired,
+    /**
+     * Use `SwipeableListView.getNewDataSource()` to get a data source to use,
+     * then use it just like you would a normal ListView data source
+     */
+    dataSource: PropTypes.instanceOf(SwipeableListViewDataSource).isRequired,
+    // Maximum distance to open to after a swipe
+    maxSwipeDistance: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.func,
+    ]).isRequired,
+    // Callback method to render the swipeable view
+    renderRow: PropTypes.func.isRequired,
+    // Callback method to render the view that will be unveiled on swipe
+    renderQuickActions: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    bounceFirstRowOnMount: false,
+    renderQuickActions: () => null,
+  };
+
+  constructor(props: Props, context: any): void {
+    super(props, context);
+
+    this._shouldBounceFirstRowOnMount = this.props.bounceFirstRowOnMount;
+    this.state = {
+      dataSource: this.props.dataSource,
+    };
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps: Props): void {
+    if (this.state.dataSource.getDataSource() !== nextProps.dataSource.getDataSource()) {
+      this.setState({
+        dataSource: nextProps.dataSource,
+      });
+    }
+  }
+
+  render(): React.Node {
+    return (
+      <ListView
+        {...this.props}
+        ref={(ref) => {
+          this._listViewRef = ref;
+        }}
+        dataSource={this.state.dataSource.getDataSource()}
+        onScroll={this._onScroll}
+        renderRow={this._renderRow}
+      />
+    );
+  }
+
+  _onScroll = (e): void => {
+    // Close any opens rows on ListView scroll
+    if (this.props.dataSource.getOpenRowID()) {
+      this.setState({
+        dataSource: this.state.dataSource.setOpenRowID(null),
+      });
+    }
+    this.props.onScroll && this.props.onScroll(e);
+  }
+
+  /**
+   * This is a work-around to lock vertical `ListView` scrolling on iOS and
+   * mimic Android behaviour. Locking vertical scrolling when horizontal
+   * scrolling is active allows us to significantly improve framerates
+   * (from high 20s to almost consistently 60 fps)
+   */
+  _setListViewScrollable(value: boolean): void {
+    if (this._listViewRef && typeof this._listViewRef.setNativeProps === 'function') {
+      this._listViewRef.setNativeProps({
+        scrollEnabled: value,
+      });
+    }
+  }
+
+  // Passing through ListView's getScrollResponder() function
+  getScrollResponder(): ?Object {
+    if (this._listViewRef && typeof this._listViewRef.getScrollResponder === 'function') {
+      return this._listViewRef.getScrollResponder();
+    }
+  }
+
+  // This enables rows having variable width slideoutView.
+  _getMaxSwipeDistance(rowData: Object, sectionID: string, rowID: string): number {
+    if (typeof this.props.maxSwipeDistance === 'function') {
+      return this.props.maxSwipeDistance(rowData, sectionID, rowID);
+    }
+
+    return this.props.maxSwipeDistance;
+  }
+
+  _renderRow = (rowData: Object, sectionID: string, rowID: string): React.Element<any> => {
+    const slideoutView = this.props.renderQuickActions(rowData, sectionID, rowID);
+
+    // If renderQuickActions is unspecified or returns falsey, don't allow swipe
+    if (!slideoutView) {
+      return this.props.renderRow(rowData, sectionID, rowID);
+    }
+
+    let shouldBounceOnMount = false;
+    if (this._shouldBounceFirstRowOnMount) {
+      this._shouldBounceFirstRowOnMount = false;
+      shouldBounceOnMount = rowID === this.props.dataSource.getFirstRowID();
+    }
+
+    return (
+      <SwipeableRow
+        slideoutView={slideoutView}
+        isOpen={rowData.id === this.props.dataSource.getOpenRowID()}
+        maxSwipeDistance={this._getMaxSwipeDistance(rowData, sectionID, rowID)}
+        key={rowID}
+        onOpen={() => this._onOpen(rowData.id)}
+        onClose={() => this._onClose(rowData.id)}
+        onSwipeEnd={() => this._setListViewScrollable(true)}
+        onSwipeStart={() => this._setListViewScrollable(false)}
+        shouldBounceOnMount={shouldBounceOnMount}>
+        {this.props.renderRow(rowData, sectionID, rowID)}
+      </SwipeableRow>
+    );
+  };
+
+  _onOpen(rowID: string): void {
+    this.setState({
+      dataSource: this.state.dataSource.setOpenRowID(rowID),
+    });
+  }
+
+  _onClose(rowID: string): void {
+    this.setState({
+      dataSource: this.state.dataSource.setOpenRowID(null),
+    });
+  }
+}
+
+module.exports = SwipeableListView;

node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableListViewDataSource.js

@@ -0,0 +1,113 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule SwipeableListViewDataSource
+ */
+'use strict';
+
+const ListViewDataSource = require('ListViewDataSource');
+
+/**
+ * Data source wrapper around ListViewDataSource to allow for tracking of
+ * which row is swiped open and close opened row(s) when another row is swiped
+ * open.
+ *
+ * See https://github.com/facebook/react-native/pull/5602 for why
+ * ListViewDataSource is not subclassed.
+ */
+class SwipeableListViewDataSource {
+  _previousOpenRowID: string;
+  _openRowID: string;
+
+  _dataBlob: any;
+  _dataSource: ListViewDataSource;
+
+  rowIdentities: Array<Array<string>>;
+  sectionIdentities: Array<string>;
+
+  constructor(params: Object) {
+    this._dataSource = new ListViewDataSource({
+      getRowData: params.getRowData,
+      getSectionHeaderData: params.getSectionHeaderData,
+      rowHasChanged: (row1, row2) => {
+        /**
+         * Row needs to be re-rendered if its swiped open/close status is
+         * changed, or its data blob changed.
+         */
+        return (
+          (row1.id !== this._previousOpenRowID && row2.id === this._openRowID) ||
+          (row1.id === this._previousOpenRowID && row2.id !== this._openRowID) ||
+          params.rowHasChanged(row1, row2)
+        );
+      },
+      sectionHeaderHasChanged: params.sectionHeaderHasChanged,
+    });
+  }
+
+  cloneWithRowsAndSections(
+    dataBlob: any,
+    sectionIdentities: ?Array<string>,
+    rowIdentities: ?Array<Array<string>>
+  ): SwipeableListViewDataSource {
+    this._dataSource = this._dataSource.cloneWithRowsAndSections(
+      dataBlob,
+      sectionIdentities,
+      rowIdentities
+    );
+
+    this._dataBlob = dataBlob;
+    this.rowIdentities = this._dataSource.rowIdentities;
+    this.sectionIdentities = this._dataSource.sectionIdentities;
+
+    return this;
+  }
+
+  // For the actual ListView to use
+  getDataSource(): ListViewDataSource {
+    return this._dataSource;
+  }
+
+  getOpenRowID(): ?string {
+    return this._openRowID;
+  }
+
+  getFirstRowID(): ?string {
+    /**
+     * If rowIdentities is specified, find the first data row from there since
+     * we don't want to attempt to bounce section headers. If unspecified, find
+     * the first data row from _dataBlob.
+     */
+    if (this.rowIdentities) {
+      return this.rowIdentities[0] && this.rowIdentities[0][0];
+    }
+    return Object.keys(this._dataBlob)[0];
+  }
+
+  getLastRowID(): ?string {
+    if (this.rowIdentities && this.rowIdentities.length) {
+      const lastSection = this.rowIdentities[this.rowIdentities.length - 1];
+      if (lastSection && lastSection.length) {
+       return lastSection[lastSection.length - 1];
+     }
+    }
+   return Object.keys(this._dataBlob)[this._dataBlob.length - 1];
+  }
+
+  setOpenRowID(rowID: string): SwipeableListViewDataSource {
+    this._previousOpenRowID = this._openRowID;
+    this._openRowID = rowID;
+
+    this._dataSource = this._dataSource.cloneWithRowsAndSections(
+      this._dataBlob,
+      this.sectionIdentities,
+      this.rowIdentities
+    );
+
+    return this;
+  }
+}
+
+module.exports = SwipeableListViewDataSource;

node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableQuickActionButton.js

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule SwipeableQuickActionButton
+ * @flow
+ */
+'use strict';
+
+const Image = require('Image');
+const PropTypes = require('prop-types');
+const React = require('React');
+const Text = require('Text');
+const TouchableHighlight = require('TouchableHighlight');
+const View = require('View');
+const ViewPropTypes = require('ViewPropTypes');
+
+import type {ImageSource} from 'ImageSource';
+
+/**
+ * Standard set of quick action buttons that can, if the user chooses, be used
+ * with SwipeableListView. Each button takes an image and text with optional
+ * formatting.
+ */
+class SwipeableQuickActionButton extends React.Component<{
+  accessibilityLabel?: string,
+  imageSource: ImageSource | number,
+  imageStyle?: ?ViewPropTypes.style,
+  onPress?: Function,
+  style?: ?ViewPropTypes.style,
+  testID?: string,
+  text?: ?(string | Object | Array<string | Object>),
+  textStyle?: ?ViewPropTypes.style,
+}> {
+  static propTypes = {
+    accessibilityLabel: PropTypes.string,
+    imageSource: Image.propTypes.source.isRequired,
+    imageStyle: Image.propTypes.style,
+    onPress: PropTypes.func,
+    style: ViewPropTypes.style,
+    testID: PropTypes.string,
+    text: PropTypes.string,
+    textStyle: Text.propTypes.style,
+  };
+
+  render(): React.Node {
+    if (!this.props.imageSource && !this.props.text) {
+      return null;
+    }
+
+    return (
+      <TouchableHighlight
+        onPress={this.props.onPress}
+        testID={this.props.testID}
+        underlayColor="transparent">
+        <View style={this.props.style}>
+          <Image
+            accessibilityLabel={this.props.accessibilityLabel}
+            source={this.props.imageSource}
+            style={this.props.imageStyle}
+          />
+          <Text style={this.props.textStyle}>
+            {this.props.text}
+          </Text>
+        </View>
+      </TouchableHighlight>
+    );
+  }
+}
+
+module.exports = SwipeableQuickActionButton;

node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableQuickActions.js

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule SwipeableQuickActions
+ * @flow
+ */
+'use strict';
+
+const React = require('React');
+const StyleSheet = require('StyleSheet');
+const View = require('View');
+
+const ViewPropTypes = require('ViewPropTypes');
+
+/**
+ * A thin wrapper around standard quick action buttons that can, if the user
+ * chooses, be used with SwipeableListView. Sample usage is as follows, in the
+ * renderQuickActions callback:
+ *
+ * <SwipeableQuickActions>
+ *   <SwipeableQuickActionButton {..props} />
+ *   <SwipeableQuickActionButton {..props} />
+ * </SwipeableQuickActions>
+ */
+class SwipeableQuickActions extends React.Component<{style?: $FlowFixMe}> {
+  static propTypes = {
+    style: ViewPropTypes.style,
+  };
+
+  render(): React.Node {
+    // $FlowFixMe found when converting React.createClass to ES6
+    const children = this.props.children;
+    let buttons = [];
+
+    // Multiple children
+    if (children instanceof Array) {
+      for (let i = 0; i < children.length; i++) {
+        buttons.push(children[i]);
+
+        // $FlowFixMe found when converting React.createClass to ES6
+        if (i < this.props.children.length - 1) { // Not last button
+          buttons.push(<View key={i} style={styles.divider} />);
+        }
+      }
+    } else { // 1 child
+      buttons = children;
+    }
+
+    return (
+      <View style={[styles.background, this.props.style]}>
+        {buttons}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  background: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  divider: {
+    width: 4,
+  },
+});
+
+module.exports = SwipeableQuickActions;

node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableRow.js

@@ -0,0 +1,387 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule SwipeableRow
+ * @flow
+ */
+'use strict';
+
+const Animated = require('Animated');
+const I18nManager = require('I18nManager');
+const PanResponder = require('PanResponder');
+const React = require('React');
+const PropTypes = require('prop-types');
+const StyleSheet = require('StyleSheet');
+/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
+ * found when Flow v0.54 was deployed. To see the error delete this comment and
+ * run Flow. */
+const TimerMixin = require('react-timer-mixin');
+const View = require('View');
+
+const createReactClass = require('create-react-class');
+const emptyFunction = require('fbjs/lib/emptyFunction');
+
+const IS_RTL = I18nManager.isRTL;
+
+// NOTE: Eventually convert these consts to an input object of configurations
+
+// Position of the left of the swipable item when closed
+const CLOSED_LEFT_POSITION = 0;
+// Minimum swipe distance before we recognize it as such
+const HORIZONTAL_SWIPE_DISTANCE_THRESHOLD = 10;
+// Minimum swipe speed before we fully animate the user's action (open/close)
+const HORIZONTAL_FULL_SWIPE_SPEED_THRESHOLD = 0.3;
+// Factor to divide by to get slow speed; i.e. 4 means 1/4 of full speed
+const SLOW_SPEED_SWIPE_FACTOR = 4;
+// Time, in milliseconds, of how long the animated swipe should be
+const SWIPE_DURATION = 300;
+
+/**
+ * On SwipeableListView mount, the 1st item will bounce to show users it's
+ * possible to swipe
+ */
+const ON_MOUNT_BOUNCE_DELAY = 700;
+const ON_MOUNT_BOUNCE_DURATION = 400;
+
+// Distance left of closed position to bounce back when right-swiping from closed
+const RIGHT_SWIPE_BOUNCE_BACK_DISTANCE = 30;
+const RIGHT_SWIPE_BOUNCE_BACK_DURATION = 300;
+/**
+ * Max distance of right swipe to allow (right swipes do functionally nothing).
+ * Must be multiplied by SLOW_SPEED_SWIPE_FACTOR because gestureState.dx tracks
+ * how far the finger swipes, and not the actual animation distance.
+*/
+const RIGHT_SWIPE_THRESHOLD = 30 * SLOW_SPEED_SWIPE_FACTOR;
+
+/**
+ * Creates a swipable row that allows taps on the main item and a custom View
+ * on the item hidden behind the row. Typically this should be used in
+ * conjunction with SwipeableListView for additional functionality, but can be
+ * used in a normal ListView. See the renderRow for SwipeableListView to see how
+ * to use this component separately.
+ */
+const SwipeableRow = createReactClass({
+  displayName: 'SwipeableRow',
+  _panResponder: {},
+  _previousLeft: CLOSED_LEFT_POSITION,
+
+  mixins: [TimerMixin],
+
+  propTypes: {
+    children: PropTypes.any,
+    isOpen: PropTypes.bool,
+    preventSwipeRight: PropTypes.bool,
+    maxSwipeDistance: PropTypes.number.isRequired,
+    onOpen: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+    onSwipeEnd: PropTypes.func.isRequired,
+    onSwipeStart: PropTypes.func.isRequired,
+    // Should bounce the row on mount
+    shouldBounceOnMount: PropTypes.bool,
+    /**
+     * A ReactElement that is unveiled when the user swipes
+     */
+    slideoutView: PropTypes.node.isRequired,
+    /**
+     * The minimum swipe distance required before fully animating the swipe. If
+     * the user swipes less than this distance, the item will return to its
+     * previous (open/close) position.
+     */
+    swipeThreshold: PropTypes.number.isRequired,
+  },
+
+  getInitialState(): Object {
+    return {
+      currentLeft: new Animated.Value(this._previousLeft),
+      /**
+       * In order to render component A beneath component B, A must be rendered
+       * before B. However, this will cause "flickering", aka we see A briefly
+       * then B. To counter this, _isSwipeableViewRendered flag is used to set
+       * component A to be transparent until component B is loaded.
+       */
+      isSwipeableViewRendered: false,
+      rowHeight: (null: ?number),
+    };
+  },
+
+  getDefaultProps(): Object {
+    return {
+      isOpen: false,
+      preventSwipeRight: false,
+      maxSwipeDistance: 0,
+      onOpen: emptyFunction,
+      onClose: emptyFunction,
+      onSwipeEnd: emptyFunction,
+      onSwipeStart: emptyFunction,
+      swipeThreshold: 30,
+    };
+  },
+
+  UNSAFE_componentWillMount(): void {
+    this._panResponder = PanResponder.create({
+      onMoveShouldSetPanResponderCapture: this._handleMoveShouldSetPanResponderCapture,
+      onPanResponderGrant: this._handlePanResponderGrant,
+      onPanResponderMove: this._handlePanResponderMove,
+      onPanResponderRelease: this._handlePanResponderEnd,
+      onPanResponderTerminationRequest: this._onPanResponderTerminationRequest,
+      onPanResponderTerminate: this._handlePanResponderEnd,
+      onShouldBlockNativeResponder: (event, gestureState) => false,
+    });
+  },
+
+  componentDidMount(): void {
+    if (this.props.shouldBounceOnMount) {
+      /**
+       * Do the on mount bounce after a delay because if we animate when other
+       * components are loading, the animation will be laggy
+       */
+      this.setTimeout(() => {
+        this._animateBounceBack(ON_MOUNT_BOUNCE_DURATION);
+      }, ON_MOUNT_BOUNCE_DELAY);
+    }
+  },
+
+  UNSAFE_componentWillReceiveProps(nextProps: Object): void {
+    /**
+     * We do not need an "animateOpen(noCallback)" because this animation is
+     * handled internally by this component.
+     */
+    if (this.props.isOpen && !nextProps.isOpen) {
+      this._animateToClosedPosition();
+    }
+  },
+
+  render(): React.Element<any> {
+    // The view hidden behind the main view
+    let slideOutView;
+    if (this.state.isSwipeableViewRendered && this.state.rowHeight) {
+      slideOutView = (
+        <View style={[
+          styles.slideOutContainer,
+          {height: this.state.rowHeight},
+          ]}>
+          {this.props.slideoutView}
+        </View>
+      );
+    }
+
+    // The swipeable item
+    const swipeableView = (
+      <Animated.View
+        onLayout={this._onSwipeableViewLayout}
+        style={{transform: [{translateX: this.state.currentLeft}]}}>
+        {this.props.children}
+      </Animated.View>
+    );
+
+    return (
+      <View
+        {...this._panResponder.panHandlers}>
+        {slideOutView}
+        {swipeableView}
+      </View>
+    );
+  },
+
+  close(): void {
+    this.props.onClose();
+    this._animateToClosedPosition();
+  },
+
+  _onSwipeableViewLayout(event: Object): void {
+    this.setState({
+      isSwipeableViewRendered: true,
+      rowHeight: event.nativeEvent.layout.height,
+    });
+  },
+
+  _handleMoveShouldSetPanResponderCapture(
+    event: Object,
+    gestureState: Object,
+  ): boolean {
+    // Decides whether a swipe is responded to by this component or its child
+    return gestureState.dy < 10 && this._isValidSwipe(gestureState);
+  },
+
+  _handlePanResponderGrant(event: Object, gestureState: Object): void {
+
+  },
+
+  _handlePanResponderMove(event: Object, gestureState: Object): void {
+    if (this._isSwipingExcessivelyRightFromClosedPosition(gestureState)) {
+      return;
+    }
+
+    this.props.onSwipeStart();
+
+    if (this._isSwipingRightFromClosed(gestureState)) {
+      this._swipeSlowSpeed(gestureState);
+    } else {
+      this._swipeFullSpeed(gestureState);
+    }
+  },
+
+  _isSwipingRightFromClosed(gestureState: Object): boolean {
+    const gestureStateDx = IS_RTL ? -gestureState.dx : gestureState.dx;
+    return this._previousLeft === CLOSED_LEFT_POSITION && gestureStateDx > 0;
+  },
+
+  _swipeFullSpeed(gestureState: Object): void {
+    this.state.currentLeft.setValue(this._previousLeft + gestureState.dx);
+  },
+
+  _swipeSlowSpeed(gestureState: Object): void {
+    this.state.currentLeft.setValue(
+      this._previousLeft + gestureState.dx / SLOW_SPEED_SWIPE_FACTOR,
+    );
+  },
+
+  _isSwipingExcessivelyRightFromClosedPosition(gestureState: Object): boolean {
+    /**
+     * We want to allow a BIT of right swipe, to allow users to know that
+     * swiping is available, but swiping right does not do anything
+     * functionally.
+     */
+    const gestureStateDx = IS_RTL ? -gestureState.dx : gestureState.dx;
+    return (
+      this._isSwipingRightFromClosed(gestureState) &&
+      gestureStateDx > RIGHT_SWIPE_THRESHOLD
+    );
+  },
+
+  _onPanResponderTerminationRequest(
+    event: Object,
+    gestureState: Object,
+  ): boolean {
+    return false;
+  },
+
+  _animateTo(
+    toValue: number,
+    duration: number = SWIPE_DURATION,
+    callback: Function = emptyFunction,
+  ): void {
+    Animated.timing(
+      this.state.currentLeft,
+      {
+        duration,
+        toValue,
+        useNativeDriver: true,
+      },
+    ).start(() => {
+      this._previousLeft = toValue;
+      callback();
+    });
+  },
+
+  _animateToOpenPosition(): void {
+    const maxSwipeDistance = IS_RTL ? -this.props.maxSwipeDistance : this.props.maxSwipeDistance;
+    this._animateTo(-maxSwipeDistance);
+  },
+
+  _animateToOpenPositionWith(
+    speed: number,
+    distMoved: number,
+  ): void {
+    /**
+     * Ensure the speed is at least the set speed threshold to prevent a slow
+     * swiping animation
+     */
+    speed = (
+      speed > HORIZONTAL_FULL_SWIPE_SPEED_THRESHOLD ?
+      speed :
+      HORIZONTAL_FULL_SWIPE_SPEED_THRESHOLD
+    );
+    /**
+     * Calculate the duration the row should take to swipe the remaining distance
+     * at the same speed the user swiped (or the speed threshold)
+     */
+    const duration = Math.abs((this.props.maxSwipeDistance - Math.abs(distMoved)) / speed);
+    const maxSwipeDistance = IS_RTL ? -this.props.maxSwipeDistance : this.props.maxSwipeDistance;
+    this._animateTo(-maxSwipeDistance, duration);
+  },
+
+  _animateToClosedPosition(duration: number = SWIPE_DURATION): void {
+    this._animateTo(CLOSED_LEFT_POSITION, duration);
+  },
+
+  _animateToClosedPositionDuringBounce(): void {
+    this._animateToClosedPosition(RIGHT_SWIPE_BOUNCE_BACK_DURATION);
+  },
+
+  _animateBounceBack(duration: number): void {
+    /**
+     * When swiping right, we want to bounce back past closed position on release
+     * so users know they should swipe right to get content.
+     */
+    const swipeBounceBackDistance = IS_RTL ?
+      -RIGHT_SWIPE_BOUNCE_BACK_DISTANCE :
+      RIGHT_SWIPE_BOUNCE_BACK_DISTANCE;
+    this._animateTo(
+      -swipeBounceBackDistance,
+      duration,
+      this._animateToClosedPositionDuringBounce,
+    );
+  },
+
+  // Ignore swipes due to user's finger moving slightly when tapping
+  _isValidSwipe(gestureState: Object): boolean {
+    if (this.props.preventSwipeRight && this._previousLeft === CLOSED_LEFT_POSITION && gestureState.dx > 0) {
+      return false;
+    }
+
+    return Math.abs(gestureState.dx) > HORIZONTAL_SWIPE_DISTANCE_THRESHOLD;
+  },
+
+  _shouldAnimateRemainder(gestureState: Object): boolean {
+    /**
+     * If user has swiped past a certain distance, animate the rest of the way
+     * if they let go
+     */
+    return (
+      Math.abs(gestureState.dx) > this.props.swipeThreshold ||
+      gestureState.vx > HORIZONTAL_FULL_SWIPE_SPEED_THRESHOLD
+    );
+  },
+
+  _handlePanResponderEnd(event: Object, gestureState: Object): void {
+    const horizontalDistance = IS_RTL ? -gestureState.dx : gestureState.dx;
+    if (this._isSwipingRightFromClosed(gestureState)) {
+      this.props.onOpen();
+      this._animateBounceBack(RIGHT_SWIPE_BOUNCE_BACK_DURATION);
+    } else if (this._shouldAnimateRemainder(gestureState)) {
+      if (horizontalDistance < 0) {
+        // Swiped left
+        this.props.onOpen();
+        this._animateToOpenPositionWith(gestureState.vx, horizontalDistance);
+      } else {
+        // Swiped right
+        this.props.onClose();
+        this._animateToClosedPosition();
+      }
+    } else {
+      if (this._previousLeft === CLOSED_LEFT_POSITION) {
+        this._animateToClosedPosition();
+      } else {
+        this._animateToOpenPosition();
+      }
+    }
+
+    this.props.onSwipeEnd();
+  },
+});
+
+const styles = StyleSheet.create({
+  slideOutContainer: {
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+});
+
+module.exports = SwipeableRow;