@momo-kits/swipe 0.0.49-beta → 0.0.49-beta.2

package/Swiper.js

@@ -15,15 +15,14 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {
-    Text,
     View,
     ScrollView,
     Dimensions,
     TouchableOpacity,
     Platform,
-    ActivityIndicator
+    ActivityIndicator,
 } from 'react-native';
-import { ViewPager as ViewPagerAndroid } from '@momo-kits/core';
+import { ViewPager as ViewPagerAndroid, Text } from '@momo-kits/core';
 
 /**
  * Default styles
@@ -33,7 +32,7 @@ const styles = {
     container: {
         backgroundColor: 'transparent',
         position: 'relative',
-        flex: 1
+        flex: 1,
     },
 
     wrapperIOS: {
@@ -42,7 +41,7 @@ const styles = {
 
     wrapperAndroid: {
         backgroundColor: 'transparent',
-        flex: 1
+        flex: 1,
     },
 
     slide: {
@@ -58,7 +57,7 @@ const styles = {
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: 'transparent'
+        backgroundColor: 'transparent',
     },
 
     pagination_y: {
@@ -70,7 +69,7 @@ const styles = {
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: 'transparent'
+        backgroundColor: 'transparent',
     },
 
     title: {
@@ -82,7 +81,7 @@ const styles = {
         left: 0,
         flexWrap: 'nowrap',
         width: 250,
-        backgroundColor: 'transparent'
+        backgroundColor: 'transparent',
     },
 
     buttonWrapper: {
@@ -95,414 +94,448 @@ const styles = {
         paddingHorizontal: 10,
         paddingVertical: 10,
         justifyContent: 'space-between',
-        alignItems: 'center'
+        alignItems: 'center',
     },
 
     buttonText: {
         fontSize: 50,
-        color: '#007aff'
-    }
+        color: '#007aff',
+    },
 };
 
 // missing `module.exports = exports['default'];` with babel6
 // export default React.createClass({
 export default class Swiper extends Component {
-  /**
-   * Props Validation
-   * @type {Object}
-   */
-  static propTypes = {
-      horizontal: PropTypes.bool,
-      children: PropTypes.node.isRequired,
-      containerStyle: PropTypes.oneOfType([
-          PropTypes.object,
-          PropTypes.number,
-      ]),
-      style: PropTypes.oneOfType([
-          PropTypes.object,
-          PropTypes.number,
-      ]),
-      scrollViewStyle: PropTypes.oneOfType([
-          PropTypes.object,
-          PropTypes.number,
-      ]),
-      pagingEnabled: PropTypes.bool,
-      showsHorizontalScrollIndicator: PropTypes.bool,
-      showsVerticalScrollIndicator: PropTypes.bool,
-      bounces: PropTypes.bool,
-      scrollsToTop: PropTypes.bool,
-      removeClippedSubviews: PropTypes.bool,
-      automaticallyAdjustContentInsets: PropTypes.bool,
-      showsPagination: PropTypes.bool,
-      showsButtons: PropTypes.bool,
-      disableNextButton: PropTypes.bool,
-      loadMinimal: PropTypes.bool,
-      loadMinimalSize: PropTypes.number,
-      loadMinimalLoader: PropTypes.element,
-      loop: PropTypes.bool,
-      autoplay: PropTypes.bool,
-      autoplayTimeout: PropTypes.number,
-      autoplayDirection: PropTypes.bool,
-      index: PropTypes.number,
-      renderPagination: PropTypes.func,
-      dotStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
-      activeDotStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
-      dotColor: PropTypes.string,
-      activeDotColor: PropTypes.string,
-      /**
-     * Called when the index has changed because the user swiped.
+    /**
+     * Props Validation
+     * @type {Object}
+     */
+    static propTypes = {
+        horizontal: PropTypes.bool,
+        children: PropTypes.node.isRequired,
+        containerStyle: PropTypes.oneOfType([
+            PropTypes.object,
+            PropTypes.number,
+        ]),
+        style: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
+        scrollViewStyle: PropTypes.oneOfType([
+            PropTypes.object,
+            PropTypes.number,
+        ]),
+        pagingEnabled: PropTypes.bool,
+        showsHorizontalScrollIndicator: PropTypes.bool,
+        showsVerticalScrollIndicator: PropTypes.bool,
+        bounces: PropTypes.bool,
+        scrollsToTop: PropTypes.bool,
+        removeClippedSubviews: PropTypes.bool,
+        automaticallyAdjustContentInsets: PropTypes.bool,
+        showsPagination: PropTypes.bool,
+        showsButtons: PropTypes.bool,
+        disableNextButton: PropTypes.bool,
+        loadMinimal: PropTypes.bool,
+        loadMinimalSize: PropTypes.number,
+        loadMinimalLoader: PropTypes.element,
+        loop: PropTypes.bool,
+        autoplay: PropTypes.bool,
+        autoplayTimeout: PropTypes.number,
+        autoplayDirection: PropTypes.bool,
+        index: PropTypes.number,
+        renderPagination: PropTypes.func,
+        dotStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
+        activeDotStyle: PropTypes.oneOfType([
+            PropTypes.object,
+            PropTypes.number,
+        ]),
+        dotColor: PropTypes.string,
+        activeDotColor: PropTypes.string,
+        /**
+         * Called when the index has changed because the user swiped.
+         */
+        onIndexChanged: PropTypes.func,
+    };
+
+    /**
+     * Default props
+     * @return {object} props
+     * @see http://facebook.github.io/react-native/docs/scrollview.html
+     */
+    static defaultProps = {
+        horizontal: true,
+        pagingEnabled: true,
+        showsHorizontalScrollIndicator: false,
+        showsVerticalScrollIndicator: false,
+        bounces: false,
+        scrollsToTop: false,
+        removeClippedSubviews: true,
+        automaticallyAdjustContentInsets: false,
+        showsPagination: true,
+        showsButtons: false,
+        disableNextButton: false,
+        loop: true,
+        loadMinimal: false,
+        loadMinimalSize: 1,
+        autoplay: false,
+        autoplayTimeout: 2.5,
+        autoplayDirection: true,
+        index: 0,
+        onIndexChanged: () => null,
+    };
+
+    /**
+     * Init states
+     * @return {object} states
+     */
+    state = this.initState(this.props);
+
+    /**
+     * Initial render flag
+     * @type {bool}
+     */
+    initialRender = true;
+
+    /**
+     * autoplay timer
+     * @type {null}
+     */
+    autoplayTimer = null;
+
+    loopJumpTimer = null;
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        if (!nextProps.autoplay && this.autoplayTimer)
+            clearTimeout(this.autoplayTimer);
+        // Fix render last item first
+        if (nextProps.index === this.props.index) return;
+        this.setState(
+            this.initState(nextProps, this.props.index !== nextProps.index),
+        );
+    }
+
+    componentDidMount() {
+        this.autoplay();
+    }
+
+    componentWillUnmount() {
+        this.autoplayTimer && clearTimeout(this.autoplayTimer);
+        this.loopJumpTimer && clearTimeout(this.loopJumpTimer);
+    }
+
+    UNSAFE_componentWillUpdate(nextProps, nextState) {
+        // If the index has changed, we notify the parent via the onIndexChanged callback
+        if (this.state.index !== nextState.index)
+            this.props.onIndexChanged(nextState.index);
+    }
+
+    initState(props, updateIndex = false) {
+        // set the current state
+        const state = this.state || {
+            width: 0,
+            height: 0,
+            offset: { x: 0, y: 0 },
+        };
+
+        const initState = {
+            autoplayEnd: false,
+            loopJump: false,
+            offset: {},
+        };
+
+        initState.total = props.children ? props.children.length || 1 : 0;
+
+        if (state.total === initState.total && !updateIndex) {
+            // retain the index
+            initState.index = state.index;
+        } else {
+            initState.index =
+                initState.total > 1
+                    ? Math.min(props.index, initState.total - 1)
+                    : 0;
+        }
+
+        // Default: horizontal
+        const { width, height } = Dimensions.get('window');
+
+        initState.dir = props.horizontal === false ? 'y' : 'x';
+
+        if (props.width) {
+            initState.width = props.width;
+        } else if (this.state && this.state.width) {
+            initState.width = this.state.width;
+        } else {
+            initState.width = width;
+        }
+
+        if (props.height) {
+            initState.height = props.height;
+        } else if (this.state && this.state.height) {
+            initState.height = this.state.height;
+        } else {
+            initState.height = height;
+        }
+
+        initState.offset[initState.dir] =
+            initState.dir === 'y' ? height * props.index : width * props.index;
+
+        this.internals = {
+            ...this.internals,
+            isScrolling: false,
+        };
+        return initState;
+    }
+
+    // include internals with state
+    fullState() {
+        return { ...this.state, ...this.internals };
+    }
+
+    onLayout = (event) => {
+        const { width, height } = event.nativeEvent.layout;
+        const offset = (this.internals.offset = {});
+        const state = { width, height };
+
+        if (this.state.total > 1) {
+            let setup = this.state.index;
+            if (this.props.loop) {
+                setup++;
+            }
+            offset[this.state.dir] =
+                this.state.dir === 'y' ? height * setup : width * setup;
+        }
+
+        // only update the offset in state if needed, updating offset while swiping
+        // causes some bad jumping / stuttering
+        if (
+            !this.state.offset ||
+            width !== this.state.width ||
+            height !== this.state.height
+        ) {
+            state.offset = offset;
+        }
+
+        // related to https://github.com/leecade/react-native-swiper/issues/570
+        // contentOffset is not working in react 0.48.x so we need to use scrollTo
+        // to emulate offset.
+        if (Platform.OS === 'ios') {
+            if (this.initialRender && this.state.total > 1) {
+                this.scrollView.scrollTo({ ...offset, animated: false });
+                this.initialRender = false;
+            }
+        }
+
+        this.setState(state);
+    };
+
+    loopJump = () => {
+        if (!this.state.loopJump) return;
+        const i = this.state.index + (this.props.loop ? 1 : 0);
+        const { scrollView } = this;
+        this.loopJumpTimer = setTimeout(
+            () =>
+                scrollView.setPageWithoutAnimation &&
+                scrollView.setPageWithoutAnimation(i),
+            50,
+        );
+    };
+
+    /**
+     * Automatic rolling
      */
-      onIndexChanged: PropTypes.func
-  }
-
-  /**
-   * Default props
-   * @return {object} props
-   * @see http://facebook.github.io/react-native/docs/scrollview.html
-   */
-  static defaultProps = {
-      horizontal: true,
-      pagingEnabled: true,
-      showsHorizontalScrollIndicator: false,
-      showsVerticalScrollIndicator: false,
-      bounces: false,
-      scrollsToTop: false,
-      removeClippedSubviews: true,
-      automaticallyAdjustContentInsets: false,
-      showsPagination: true,
-      showsButtons: false,
-      disableNextButton: false,
-      loop: true,
-      loadMinimal: false,
-      loadMinimalSize: 1,
-      autoplay: false,
-      autoplayTimeout: 2.5,
-      autoplayDirection: true,
-      index: 0,
-      onIndexChanged: () => null
-  }
-
-  /**
-   * Init states
-   * @return {object} states
-   */
-  state = this.initState(this.props)
-
-  /**
-   * Initial render flag
-   * @type {bool}
-   */
-  initialRender = true
-
-  /**
-   * autoplay timer
-   * @type {null}
-   */
-  autoplayTimer = null
-
-  loopJumpTimer = null
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-      if (!nextProps.autoplay && this.autoplayTimer) clearTimeout(this.autoplayTimer);
-      // Fix render last item first
-      if (nextProps.index === this.props.index) return;
-      this.setState(this.initState(nextProps, this.props.index !== nextProps.index));
-  }
-
-  componentDidMount() {
-      this.autoplay();
-  }
-
-  componentWillUnmount() {
-      this.autoplayTimer && clearTimeout(this.autoplayTimer);
-      this.loopJumpTimer && clearTimeout(this.loopJumpTimer);
-  }
-
-  UNSAFE_componentWillUpdate(nextProps, nextState) {
-      // If the index has changed, we notify the parent via the onIndexChanged callback
-      if (this.state.index !== nextState.index) this.props.onIndexChanged(nextState.index);
-  }
-
-  initState(props, updateIndex = false) {
-      // set the current state
-      const state = this.state || { width: 0, height: 0, offset: { x: 0, y: 0 } };
-
-      const initState = {
-          autoplayEnd: false,
-          loopJump: false,
-          offset: {}
-      };
-
-      initState.total = props.children ? props.children.length || 1 : 0;
-
-      if (state.total === initState.total && !updateIndex) {
-      // retain the index
-          initState.index = state.index;
-      } else {
-          initState.index = initState.total > 1 ? Math.min(props.index, initState.total - 1) : 0;
-      }
-
-      // Default: horizontal
-      const { width, height } = Dimensions.get('window');
-
-      initState.dir = props.horizontal === false ? 'y' : 'x';
-
-      if (props.width) {
-          initState.width = props.width;
-      } else if (this.state && this.state.width) {
-          initState.width = this.state.width;
-      } else {
-          initState.width = width;
-      }
-
-      if (props.height) {
-          initState.height = props.height;
-      } else if (this.state && this.state.height) {
-          initState.height = this.state.height;
-      } else {
-          initState.height = height;
-      }
-
-      initState.offset[initState.dir] = initState.dir === 'y'
-          ? height * props.index
-          : width * props.index;
-
-      this.internals = {
-          ...this.internals,
-          isScrolling: false
-      };
-      return initState;
-  }
-
-  // include internals with state
-  fullState() {
-      return { ...this.state, ...this.internals };
-  }
-
-  onLayout = (event) => {
-      const { width, height } = event.nativeEvent.layout;
-      const offset = this.internals.offset = {};
-      const state = { width, height };
-
-      if (this.state.total > 1) {
-          let setup = this.state.index;
-          if (this.props.loop) {
-              setup++;
-          }
-          offset[this.state.dir] = this.state.dir === 'y'
-              ? height * setup
-              : width * setup;
-      }
-
-      // only update the offset in state if needed, updating offset while swiping
-      // causes some bad jumping / stuttering
-      if (!this.state.offset || width !== this.state.width || height !== this.state.height) {
-          state.offset = offset;
-      }
-
-      // related to https://github.com/leecade/react-native-swiper/issues/570
-      // contentOffset is not working in react 0.48.x so we need to use scrollTo
-      // to emulate offset.
-      if (Platform.OS === 'ios') {
-          if (this.initialRender && this.state.total > 1) {
-              this.scrollView.scrollTo({ ...offset, animated: false });
-              this.initialRender = false;
-          }
-      }
-
-      this.setState(state);
-  }
-
-  loopJump = () => {
-      if (!this.state.loopJump) return;
-      const i = this.state.index + (this.props.loop ? 1 : 0);
-      const { scrollView } = this;
-      this.loopJumpTimer = setTimeout(() => scrollView.setPageWithoutAnimation
-      && scrollView.setPageWithoutAnimation(i), 50);
-  }
-
-  /**
-   * Automatic rolling
-   */
-  autoplay = () => {
-      if (!Array.isArray(this.props.children)
-      || !this.props.autoplay
-      || this.internals.isScrolling
-      || this.state.autoplayEnd) return;
-
-      this.autoplayTimer && clearTimeout(this.autoplayTimer);
-      this.autoplayTimer = setTimeout(() => {
-          if (!this.props.loop && (
-              this.props.autoplayDirection
-                  ? this.state.index === this.state.total - 1
-                  : this.state.index === 0
-          )
-          ) return this.setState({ autoplayEnd: true });
-
-          this.scrollBy(this.props.autoplayDirection ? 1 : -1);
-      }, this.props.autoplayTimeout * 1000);
-  }
-
-  /**
-   * Scroll begin handle
-   * @param  {object} e native event
-   */
-  onScrollBegin = (e) => {
-      // update scroll state
-      this.internals.isScrolling = true;
-      this.props.onScrollBeginDrag && this.props.onScrollBeginDrag(e, this.fullState(), this);
-  }
-
-  /**
-   * Scroll end handle
-   * @param  {object} e native event
-   */
-  onScrollEnd = (e) => {
-      // update scroll state
-      this.internals.isScrolling = false;
-
-      // making our events coming from android compatible to updateIndex logic
-      if (!e.nativeEvent.contentOffset) {
-          if (this.state.dir === 'x') {
-              e.nativeEvent.contentOffset = { x: e.nativeEvent.position * this.state.width };
-          } else {
-              e.nativeEvent.contentOffset = { y: e.nativeEvent.position * this.state.height };
-          }
-      }
-
-      this.updateIndex(e.nativeEvent.contentOffset, this.state.dir, () => {
-          this.autoplay();
-          this.loopJump();
-
-          // if `onMomentumScrollEnd` registered will be called here
-          this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd(e, this.fullState(), this);
-      });
-  }
-
-  /*
-   * Drag end handle
-   * @param {object} e native event
-   */
-  onScrollEndDrag = (e) => {
-      const { contentOffset } = e.nativeEvent;
-      const { horizontal, children } = this.props;
-      const { index } = this.state;
-      const { offset } = this.internals;
-      const previousOffset = horizontal ? offset.x : offset.y;
-      const newOffset = horizontal ? contentOffset.x : contentOffset.y;
-
-      if (previousOffset === newOffset
-      && (index === 0 || index === children.length - 1)) {
-          this.internals.isScrolling = false;
-      }
-  }
-
-  /**
-   * Update index after scroll
-   * @param  {object} offset content offset
-   * @param  {string} dir    'x' || 'y'
-   */
-  updateIndex = (offset, dir, cb) => {
-      const { state } = this;
-      let { index } = state;
-      if (!this.internals.offset) // Android not setting this onLayout first? https://github.com/leecade/react-native-swiper/issues/582
-      { this.internals.offset = {}; }
-      const diff = offset[dir] - this.internals.offset[dir];
-      const step = dir === 'x' ? state.width : state.height;
-      let loopJump = false;
-
-      // Do nothing if offset no change.
-      if (!diff) return;
-
-      // Note: if touch very very quickly and continuous,
-      // the variation of `index` more than 1.
-      // parseInt() ensures it's always an integer
-      index = parseInt(index + Math.round(diff / step));
-
-      if (this.props.loop) {
-          if (index <= -1) {
-              index = state.total - 1;
-              offset[dir] = step * state.total;
-              loopJump = true;
-          } else if (index >= state.total) {
-              index = 0;
-              offset[dir] = step;
-              loopJump = true;
-          }
-      }
-
-      const newState = {};
-      newState.index = index;
-      newState.loopJump = loopJump;
-
-      this.internals.offset = offset;
-
-      // only update offset in state if loopJump is true
-      if (loopJump) {
-      // when swiping to the beginning of a looping set for the third time,
-      // the new offset will be the same as the last one set in state.
-      // Setting the offset to the same thing will not do anything,
-      // so we increment it by 1 then immediately set it to what it should be,
-      // after render.
-          if (offset[dir] === this.internals.offset[dir]) {
-              newState.offset = { x: 0, y: 0 };
-              newState.offset[dir] = offset[dir] + 1;
-              this.setState(newState, () => {
-                  this.setState({ offset }, cb);
-              });
-          } else {
-              newState.offset = offset;
-              this.setState(newState, cb);
-          }
-      } else {
-          this.setState(newState, cb);
-      }
-  }
-
-  /**
-   * Scroll by index
-   * @param  {number} index offset index
-   * @param  {bool} animated
-   */
-
-  scrollBy = (index, animated = true) => {
-      if (this.internals.isScrolling || this.state.total < 2) return;
-      const { state } = this;
-      const diff = (this.props.loop ? 1 : 0) + index + this.state.index;
-      let x = 0;
-      let y = 0;
-      if (state.dir === 'x') x = diff * state.width;
-      if (state.dir === 'y') y = diff * state.height;
-
-      if (Platform.OS !== 'ios') {
-          this.scrollView && this.scrollView[animated ? 'setPage' : 'setPageWithoutAnimation'](diff);
-      } else {
-          this.scrollView && this.scrollView.scrollTo({ x, y, animated });
-      }
-
-      // update scroll state
-      this.internals.isScrolling = true;
-      this.setState({
-          autoplayEnd: false
-      });
-
-      // trigger onScrollEnd manually in android
-      if (!animated || Platform.OS !== 'ios') {
-          setImmediate(() => {
-              this.onScrollEnd({
-                  nativeEvent: {
-                      position: diff
-                  }
-              });
-          });
-      }
-  }
-
-  scrollViewPropOverrides = () => {
-      const { props } = this;
-      const overrides = {};
-
-      /*
+    autoplay = () => {
+        if (
+            !Array.isArray(this?.props?.children) ||
+            !this.props.autoplay ||
+            this.internals.isScrolling ||
+            this.state.autoplayEnd
+        )
+            return;
+
+        this.autoplayTimer && clearTimeout(this.autoplayTimer);
+        this.autoplayTimer = setTimeout(() => {
+            if (
+                !this.props.loop &&
+                (this.props.autoplayDirection
+                    ? this.state.index === this.state.total - 1
+                    : this.state.index === 0)
+            )
+                return this.setState({ autoplayEnd: true });
+
+            this.scrollBy(this.props.autoplayDirection ? 1 : -1);
+        }, this.props.autoplayTimeout * 1000);
+    };
+
+    /**
+     * Scroll begin handle
+     * @param  {object} e native event
+     */
+    onScrollBegin = (e) => {
+        // update scroll state
+        this.internals.isScrolling = true;
+        this.props.onScrollBeginDrag &&
+            this.props.onScrollBeginDrag(e, this.fullState(), this);
+    };
+
+    /**
+     * Scroll end handle
+     * @param  {object} e native event
+     */
+    onScrollEnd = (e) => {
+        // update scroll state
+        this.internals.isScrolling = false;
+
+        // making our events coming from android compatible to updateIndex logic
+        if (!e.nativeEvent.contentOffset) {
+            if (this.state.dir === 'x') {
+                e.nativeEvent.contentOffset = {
+                    x: e.nativeEvent.position * this.state.width,
+                };
+            } else {
+                e.nativeEvent.contentOffset = {
+                    y: e.nativeEvent.position * this.state.height,
+                };
+            }
+        }
+
+        this.updateIndex(e.nativeEvent.contentOffset, this.state.dir, () => {
+            this.autoplay();
+            this.loopJump();
+
+            // if `onMomentumScrollEnd` registered will be called here
+            this.props.onMomentumScrollEnd &&
+                this.props.onMomentumScrollEnd(e, this.fullState(), this);
+        });
+    };
+
+    /*
+     * Drag end handle
+     * @param {object} e native event
+     */
+    onScrollEndDrag = (e) => {
+        const { contentOffset } = e.nativeEvent;
+        const { horizontal, children } = this.props;
+        const { index } = this.state;
+        const { offset } = this.internals;
+        const previousOffset = horizontal ? offset.x : offset.y;
+        const newOffset = horizontal ? contentOffset.x : contentOffset.y;
+
+        if (
+            previousOffset === newOffset &&
+            (index === 0 || index === children.length - 1)
+        ) {
+            this.internals.isScrolling = false;
+        }
+    };
+
+    /**
+     * Update index after scroll
+     * @param  {object} offset content offset
+     * @param  {string} dir    'x' || 'y'
+     */
+    updateIndex = (offset, dir, cb) => {
+        const { state } = this;
+        let { index } = state;
+        if (!this.internals.offset) {
+            // Android not setting this onLayout first? https://github.com/leecade/react-native-swiper/issues/582
+            this.internals.offset = {};
+        }
+        const diff = offset[dir] - this.internals.offset[dir];
+        const step = dir === 'x' ? state.width : state.height;
+        let loopJump = false;
+
+        // Do nothing if offset no change.
+        if (!diff) return;
+
+        // Note: if touch very very quickly and continuous,
+        // the variation of `index` more than 1.
+        // parseInt() ensures it's always an integer
+        index = parseInt(index + Math.round(diff / step));
+
+        if (this.props.loop) {
+            if (index <= -1) {
+                index = state.total - 1;
+                offset[dir] = step * state.total;
+                loopJump = true;
+            } else if (index >= state.total) {
+                index = 0;
+                offset[dir] = step;
+                loopJump = true;
+            }
+        }
+
+        const newState = {};
+        newState.index = index;
+        newState.loopJump = loopJump;
+
+        this.internals.offset = offset;
+
+        // only update offset in state if loopJump is true
+        if (loopJump) {
+            // when swiping to the beginning of a looping set for the third time,
+            // the new offset will be the same as the last one set in state.
+            // Setting the offset to the same thing will not do anything,
+            // so we increment it by 1 then immediately set it to what it should be,
+            // after render.
+            if (offset[dir] === this.internals.offset[dir]) {
+                newState.offset = { x: 0, y: 0 };
+                newState.offset[dir] = offset[dir] + 1;
+                this.setState(newState, () => {
+                    this.setState({ offset }, cb);
+                });
+            } else {
+                newState.offset = offset;
+                this.setState(newState, cb);
+            }
+        } else {
+            this.setState(newState, cb);
+        }
+    };
+
+    /**
+     * Scroll by index
+     * @param  {number} index offset index
+     * @param  {bool} animated
+     */
+
+    scrollBy = (index, animated = true) => {
+        if (this.internals.isScrolling || this.state.total < 2) return;
+        const { state } = this;
+        const diff = (this.props.loop ? 1 : 0) + index + this.state.index;
+        let x = 0;
+        let y = 0;
+        if (state.dir === 'x') x = diff * state.width;
+        if (state.dir === 'y') y = diff * state.height;
+
+        if (Platform.OS !== 'ios') {
+            this.scrollView &&
+                this.scrollView[
+                    animated ? 'setPage' : 'setPageWithoutAnimation'
+                ](diff);
+        } else {
+            this.scrollView && this.scrollView.scrollTo({ x, y, animated });
+        }
+
+        // update scroll state
+        this.internals.isScrolling = true;
+        this.setState({
+            autoplayEnd: false,
+        });
+
+        // trigger onScrollEnd manually in android
+        if (!animated || Platform.OS !== 'ios') {
+            setImmediate(() => {
+                this.onScrollEnd({
+                    nativeEvent: {
+                        position: diff,
+                    },
+                });
+            });
+        }
+    };
+
+    scrollViewPropOverrides = () => {
+        const { props } = this;
+        const overrides = {};
+
+        /*
     const scrollResponders = [
       'onMomentumScrollBegin',
       'onTouchStartCapture',
@@ -512,263 +545,296 @@ export default class Swiper extends Component {
     ]
     */
 
-      for (const prop in props) {
-      // if(~scrollResponders.indexOf(prop)
-          if (typeof props[prop] === 'function'
-        && prop !== 'onMomentumScrollEnd'
-        && prop !== 'renderPagination'
-        && prop !== 'onScrollBeginDrag'
-          ) {
-              const originResponder = props[prop];
-              overrides[prop] = (e) => originResponder(e, this.fullState(), this);
-          }
-      }
-
-      return overrides;
-  }
-
-  /**
-   * Render pagination
-   * @return {object} react-dom
-   */
-  renderPagination = () => {
-      // By default, dots only show when `total` >= 2
-      if (this.state.total <= 1) return null;
-
-      const dots = [];
-      const ActiveDot = this.props.activeDot || (
-          <View style={[{
-              backgroundColor: this.props.activeDotColor || '#007aff',
-              width: 8,
-              height: 8,
-              borderRadius: 4,
-              marginLeft: 3,
-              marginRight: 3,
-              marginTop: 3,
-              marginBottom: 3
-          }, this.props.activeDotStyle]}
-          />
-      );
-      const Dot = this.props.dot || (
-          <View style={[{
-              backgroundColor: this.props.dotColor || 'rgba(0,0,0,.2)',
-              width: 8,
-              height: 8,
-              borderRadius: 4,
-              marginLeft: 3,
-              marginRight: 3,
-              marginTop: 3,
-              marginBottom: 3
-          }, this.props.dotStyle]}
-          />
-      );
-      for (let i = 0; i < this.state.total; i++) {
-          dots.push(i === this.state.index
-              ? React.cloneElement(ActiveDot, { key: i })
-              : React.cloneElement(Dot, { key: i })
-          );
-      }
-
-      return (
-          <View pointerEvents="none" style={[styles[`pagination_${this.state.dir}`], this.props.paginationStyle]}>
-              {dots}
-          </View>
-      );
-  }
-
-  renderTitle = () => {
-      const child = this.props.children[this.state.index];
-      const title = child && child.props && child.props.title;
-      return title
-          ? (
-              <View style={styles.title}>
-                  {this.props.children[this.state.index].props.title}
-              </View>
-          )
-          : null;
-  }
-
-  renderNextButton = () => {
-      let button = null;
-
-      if (this.props.loop
-      || this.state.index !== this.state.total - 1) {
-          button = this.props.nextButton || <Text style={styles.buttonText}>›</Text>;
-      }
-
-      return (
-          <TouchableOpacity
-              onPress={() => button !== null && this.scrollBy(1)}
-              disabled={this.props.disableNextButton}
-          >
-              <View>
-                  {button}
-              </View>
-          </TouchableOpacity>
-      );
-  }
-
-  renderPrevButton = () => {
-      let button = null;
-
-      if (this.props.loop || this.state.index !== 0) {
-          button = this.props.prevButton || <Text style={styles.buttonText}>‹</Text>;
-      }
-
-      return (
-          <TouchableOpacity onPress={() => button !== null && this.scrollBy(-1)}>
-              <View>
-                  {button}
-              </View>
-          </TouchableOpacity>
-      );
-  }
-
-  renderButtons = () => (
-      <View
-          pointerEvents="box-none"
-          style={[styles.buttonWrapper, {
-              width: this.state.width,
-              height: this.state.height
-          }, this.props.buttonWrapperStyle]}
-      >
-          {this.renderPrevButton()}
-          {this.renderNextButton()}
-      </View>
-  )
-
-  refScrollView = (view) => {
-      this.scrollView = view;
-  }
-
-  onPageScrollStateChanged = (state) => {
-      switch (state) {
-      case 'dragging':
-          return this.onScrollBegin();
-
-      case 'idle':
-      case 'settling':
-          if (this.props.onTouchEnd) this.props.onTouchEnd();
-      }
-  }
-
-  renderScrollView = (pages) => {
-      if (Platform.OS === 'ios') {
-          return (
-              <ScrollView
-                  ref={this.refScrollView}
-                  {...this.props}
-                  {...this.scrollViewPropOverrides()}
-                  contentContainerStyle={[styles.wrapperIOS, this.props.style]}
-                  contentOffset={this.state.offset}
-                  onScrollBeginDrag={this.onScrollBegin}
-                  onMomentumScrollEnd={this.onScrollEnd}
-                  onScrollEndDrag={this.onScrollEndDrag}
-                  style={this.props.scrollViewStyle}
-              >
-                  {pages}
-              </ScrollView>
-          );
-      }
-      return (
-          <ViewPagerAndroid
-              ref={this.refScrollView}
-              {...this.props}
-              initialPage={this.props.loop ? this.state.index + 1 : this.state.index}
-              onPageScrollStateChanged={this.onPageScrollStateChanged}
-              onPageSelected={this.onScrollEnd}
-              key={pages.length}
-              style={[styles.wrapperAndroid, this.props.style]}
-          >
-              {pages}
-          </ViewPagerAndroid>
-      );
-  }
-
-  checkPagesBeforeAfter = (children) => {
-      let str = '';
-      if (children && Array.isArray(children)) {
-          for (const child in children) {
-              str += children[child].key || child;
-          }
-      }
-      return str;
-  };
-
-  /**
-   * Default render
-   * @return {object} react-dom
-   */
-  render() {
-      const {
-          index,
-          total,
-          width,
-          height
-      } = this.state;
-      const {
-          children,
-          containerStyle,
-          loop,
-          loadMinimal,
-          loadMinimalSize,
-          loadMinimalLoader,
-          renderPagination,
-          showsButtons,
-          showsPagination,
-      } = this.props;
-      // let dir = state.dir
-      // let key = 0
-      const loopVal = loop ? 1 : 0;
-      let pages = [];
-
-      const pageStyle = [{ width, height }, styles.slide];
-      const pageStyleLoading = {
-          width,
-          height,
-          flex: 1,
-          justifyContent: 'center',
-          alignItems: 'center'
-      };
-
-      // For make infinite at least total > 1
-      if (total > 1) {
-      // Re-design a loop model for avoid img flickering
-          pages = Object.keys(children);
-          // console.log(`checkPagesBeforeAfter children: ${JSON.stringify(this.checkPagesBeforeAfter(pages))}`);
-
-          if (loop) {
-              pages.unshift(`${total - 1}`);
-              pages.push('0');
-          }
-
-          pages = pages.map((page, i) => {
-              if (loadMinimal) {
-                  if (i >= (index + loopVal - loadMinimalSize)
-            && i <= (index + loopVal + loadMinimalSize)) {
-                      return <View style={pageStyle} key={i}>{children[page]}</View>;
-                  }
-                  return (
-                      <View style={pageStyleLoading} key={i}>
-                          {loadMinimalLoader || <ActivityIndicator />}
-                      </View>
-                  );
-              }
-              return <View style={pageStyle} key={i}>{children[page]}</View>;
-          });
-      } else {
-          pages = <View style={pageStyle} key={0}>{children}</View>;
-      }
-
-      return (
-          <View style={[styles.container, containerStyle]} onLayout={this.onLayout}>
-              {this.renderScrollView(pages)}
-              {showsPagination && (renderPagination
-                  ? renderPagination(index, total, this)
-                  : this.renderPagination())}
-              {this.renderTitle()}
-              {showsButtons && this.renderButtons()}
-          </View>
-      );
-  }
+        for (const prop in props) {
+            // if(~scrollResponders.indexOf(prop)
+            if (
+                typeof props[prop] === 'function' &&
+                prop !== 'onMomentumScrollEnd' &&
+                prop !== 'renderPagination' &&
+                prop !== 'onScrollBeginDrag'
+            ) {
+                const originResponder = props[prop];
+                overrides[prop] = (e) =>
+                    originResponder(e, this.fullState(), this);
+            }
+        }
+
+        return overrides;
+    };
+
+    /**
+     * Render pagination
+     * @return {object} react-dom
+     */
+    renderPagination = () => {
+        // By default, dots only show when `total` >= 2
+        if (this.state.total <= 1) return null;
+
+        const dots = [];
+        const ActiveDot = this.props.activeDot || (
+            <View
+                style={[
+                    {
+                        backgroundColor: this.props.activeDotColor || '#007aff',
+                        width: 8,
+                        height: 8,
+                        borderRadius: 4,
+                        marginLeft: 3,
+                        marginRight: 3,
+                        marginTop: 3,
+                        marginBottom: 3,
+                    },
+                    this.props.activeDotStyle,
+                ]}
+            />
+        );
+        const Dot = this.props.dot || (
+            <View
+                style={[
+                    {
+                        backgroundColor:
+                            this.props.dotColor || 'rgba(0,0,0,.2)',
+                        width: 8,
+                        height: 8,
+                        borderRadius: 4,
+                        marginLeft: 3,
+                        marginRight: 3,
+                        marginTop: 3,
+                        marginBottom: 3,
+                    },
+                    this.props.dotStyle,
+                ]}
+            />
+        );
+        for (let i = 0; i < this.state.total; i++) {
+            dots.push(
+                i === this.state.index
+                    ? React.cloneElement(ActiveDot, { key: i })
+                    : React.cloneElement(Dot, { key: i }),
+            );
+        }
+
+        return (
+            <View
+                pointerEvents="none"
+                style={[
+                    styles[`pagination_${this.state.dir}`],
+                    this.props.paginationStyle,
+                ]}>
+                {dots}
+            </View>
+        );
+    };
+
+    renderTitle = () => {
+        let { children = [] } = this.props;
+        const child = children[this.state.index];
+        const title = child && child.props && child.props.title;
+        return !!title ? (
+            <View style={styles.title}>
+                {this.props.children?.[this.state.index].props.title}
+            </View>
+        ) : null;
+    };
+
+    renderNextButton = () => {
+        let button = null;
+
+        if (this.props.loop || this.state.index !== this.state.total - 1) {
+            button = this.props.nextButton || (
+                <Text style={styles.buttonText}>›</Text>
+            );
+        }
+
+        return (
+            <TouchableOpacity
+                onPress={() => button !== null && this.scrollBy(1)}
+                disabled={this.props.disableNextButton}>
+                <View>{button}</View>
+            </TouchableOpacity>
+        );
+    };
+
+    renderPrevButton = () => {
+        let button = null;
+
+        if (this.props.loop || this.state.index !== 0) {
+            button = this.props.prevButton || (
+                <Text style={styles.buttonText}>‹</Text>
+            );
+        }
+
+        return (
+            <TouchableOpacity
+                onPress={() => button !== null && this.scrollBy(-1)}>
+                <View>{button}</View>
+            </TouchableOpacity>
+        );
+    };
+
+    renderButtons = () => (
+        <View
+            pointerEvents="box-none"
+            style={[
+                styles.buttonWrapper,
+                {
+                    width: this.state.width,
+                    height: this.state.height,
+                },
+                this.props.buttonWrapperStyle,
+            ]}>
+            {this.renderPrevButton()}
+            {this.renderNextButton()}
+        </View>
+    );
+
+    refScrollView = (view) => {
+        this.scrollView = view;
+    };
+
+    onPageScrollStateChanged = (state) => {
+        switch (state) {
+            case 'dragging':
+                return this.onScrollBegin();
+
+            case 'idle':
+            case 'settling':
+                if (this.props.onTouchEnd) this.props.onTouchEnd();
+        }
+    };
+
+    renderScrollView = (pages) => {
+        if (Platform.OS === 'ios') {
+            return (
+                <ScrollView
+                    ref={this.refScrollView}
+                    {...this.props}
+                    {...this.scrollViewPropOverrides()}
+                    contentContainerStyle={[
+                        styles.wrapperIOS,
+                        this.props.style,
+                    ]}
+                    contentOffset={this.state.offset}
+                    onScrollBeginDrag={this.onScrollBegin}
+                    onMomentumScrollEnd={this.onScrollEnd}
+                    onScrollEndDrag={this.onScrollEndDrag}
+                    style={this.props.scrollViewStyle}>
+                    {pages}
+                </ScrollView>
+            );
+        }
+        return (
+            <ViewPagerAndroid
+                ref={this.refScrollView}
+                {...this.props}
+                initialPage={
+                    this.props.loop ? this.state.index + 1 : this.state.index
+                }
+                onPageScrollStateChanged={this.onPageScrollStateChanged}
+                onPageSelected={this.onScrollEnd}
+                key={pages.length}
+                style={[styles.wrapperAndroid, this.props.style]}>
+                {pages}
+            </ViewPagerAndroid>
+        );
+    };
+
+    checkPagesBeforeAfter = (children) => {
+        let str = '';
+        if (children && Array.isArray(children)) {
+            for (const child in children) {
+                str += children[child].key || child;
+            }
+        }
+        return str;
+    };
+
+    /**
+     * Default render
+     * @return {object} react-dom
+     */
+    render() {
+        const { index, total, width, height } = this.state;
+        const {
+            children,
+            containerStyle,
+            loop,
+            loadMinimal,
+            loadMinimalSize,
+            loadMinimalLoader,
+            renderPagination,
+            showsButtons,
+            showsPagination,
+        } = this.props;
+        // let dir = state.dir
+        // let key = 0
+        const loopVal = loop ? 1 : 0;
+        let pages = [];
+
+        const pageStyle = [{ width, height }, styles.slide];
+        const pageStyleLoading = {
+            width,
+            height,
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        };
+
+        // For make infinite at least total > 1
+        if (total > 1) {
+            // Re-design a loop model for avoid img flickering
+            pages = Object.keys(children);
+            // console.log(`checkPagesBeforeAfter children: ${JSON.stringify(this.checkPagesBeforeAfter(pages))}`);
+
+            if (loop) {
+                pages.unshift(`${total - 1}`);
+                pages.push('0');
+            }
+
+            pages = pages.map((page, i) => {
+                if (loadMinimal) {
+                    if (
+                        i >= index + loopVal - loadMinimalSize &&
+                        i <= index + loopVal + loadMinimalSize
+                    ) {
+                        return (
+                            <View style={pageStyle} key={i}>
+                                {children[page]}
+                            </View>
+                        );
+                    }
+                    return (
+                        <View style={pageStyleLoading} key={i}>
+                            {loadMinimalLoader || <ActivityIndicator />}
+                        </View>
+                    );
+                }
+                return (
+                    <View style={pageStyle} key={i}>
+                        {children[page]}
+                    </View>
+                );
+            });
+        } else {
+            pages = (
+                <View style={pageStyle} key={0}>
+                    {children}
+                </View>
+            );
+        }
+
+        return (
+            <View
+                style={[styles.container, containerStyle]}
+                onLayout={this.onLayout}>
+                {this.renderScrollView(pages)}
+                {showsPagination &&
+                    (renderPagination
+                        ? renderPagination(index, total, this)
+                        : this.renderPagination())}
+                {this.renderTitle()}
+                {showsButtons && this.renderButtons()}
+            </View>
+        );
+    }
 }