@momo-kits/swipe 0.0.74-beta → 0.72.1

package/Swiper.js

@@ -12,96 +12,96 @@
  * react-native-swiper
  * @author leecade<leecade@163.com>
  */
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {
-    Text,
-    View,
-    ScrollView,
-    Dimensions,
-    TouchableOpacity,
-    Platform,
-    ActivityIndicator
+  Text,
+  View,
+  ScrollView,
+  Dimensions,
+  TouchableOpacity,
+  Platform,
+  ActivityIndicator,
 } from 'react-native';
-import { ViewPager as ViewPagerAndroid } from '@momo-kits/core';
+import {ViewPager as ViewPagerAndroid} from '@momo-kits/core-v2';
 
 /**
  * Default styles
  * @type {StyleSheetPropType}
  */
 const styles = {
-    container: {
-        backgroundColor: 'transparent',
-        position: 'relative',
-        flex: 1
-    },
-
-    wrapperIOS: {
-        backgroundColor: 'transparent',
-    },
-
-    wrapperAndroid: {
-        backgroundColor: 'transparent',
-        flex: 1
-    },
-
-    slide: {
-        backgroundColor: 'transparent',
-    },
-
-    pagination_x: {
-        position: 'absolute',
-        bottom: 25,
-        left: 0,
-        right: 0,
-        flexDirection: 'row',
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: 'transparent'
-    },
-
-    pagination_y: {
-        position: 'absolute',
-        right: 15,
-        top: 0,
-        bottom: 0,
-        flexDirection: 'column',
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: 'transparent'
-    },
-
-    title: {
-        height: 30,
-        justifyContent: 'center',
-        position: 'absolute',
-        paddingLeft: 10,
-        bottom: -30,
-        left: 0,
-        flexWrap: 'nowrap',
-        width: 250,
-        backgroundColor: 'transparent'
-    },
-
-    buttonWrapper: {
-        backgroundColor: 'transparent',
-        flexDirection: 'row',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        flex: 1,
-        paddingHorizontal: 10,
-        paddingVertical: 10,
-        justifyContent: 'space-between',
-        alignItems: 'center'
-    },
-
-    buttonText: {
-        fontSize: 50,
-        color: '#007aff'
-    }
+  container: {
+    backgroundColor: 'transparent',
+    position: 'relative',
+    flex: 1,
+  },
+
+  wrapperIOS: {
+    backgroundColor: 'transparent',
+  },
+
+  wrapperAndroid: {
+    backgroundColor: 'transparent',
+    flex: 1,
+  },
+
+  slide: {
+    backgroundColor: 'transparent',
+  },
+
+  pagination_x: {
+    position: 'absolute',
+    bottom: 25,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+  },
+
+  pagination_y: {
+    position: 'absolute',
+    right: 15,
+    top: 0,
+    bottom: 0,
+    flexDirection: 'column',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+  },
+
+  title: {
+    height: 30,
+    justifyContent: 'center',
+    position: 'absolute',
+    paddingLeft: 10,
+    bottom: -30,
+    left: 0,
+    flexWrap: 'nowrap',
+    width: 250,
+    backgroundColor: 'transparent',
+  },
+
+  buttonWrapper: {
+    backgroundColor: 'transparent',
+    flexDirection: 'row',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    flex: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+
+  buttonText: {
+    fontSize: 50,
+    color: '#007aff',
+  },
 };
 
 // missing `module.exports = exports['default'];` with babel6
@@ -112,48 +112,39 @@ export default class Swiper extends Component {
    * @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,
-      /**
+    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
-  }
+    onIndexChanged: PropTypes.func,
+  };
 
   /**
    * Default props
@@ -161,241 +152,281 @@ export default class Swiper extends Component {
    * @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
-  }
+    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)
+  state = this.initState(this.props);
 
   /**
    * Initial render flag
    * @type {bool}
    */
-  initialRender = true
+  initialRender = true;
 
   /**
    * autoplay timer
    * @type {null}
    */
-  autoplayTimer = null
+  autoplayTimer = null;
 
-  loopJumpTimer = 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));
+    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();
+    this.autoplay();
   }
 
   componentWillUnmount() {
-      this.autoplayTimer && clearTimeout(this.autoplayTimer);
-      this.loopJumpTimer && clearTimeout(this.loopJumpTimer);
+    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);
+    // 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) {
+    // 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;
-      }
+      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');
+    // Default: horizontal
+    const {width, height} = Dimensions.get('window');
 
-      initState.dir = props.horizontal === false ? 'y' : 'x';
+    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.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;
-      }
+    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;
+    initState.offset[initState.dir] =
+      initState.dir === 'y' ? height * props.index : width * props.index;
 
-      this.internals = {
-          ...this.internals,
-          isScrolling: false
-      };
-      return initState;
+    this.internals = {
+      ...this.internals,
+      isScrolling: false,
+    };
+    return initState;
   }
 
   // include internals with state
   fullState() {
-      return { ...this.state, ...this.internals };
+    return {...this.state, ...this.internals};
   }
 
-  onLayout = (event) => {
-      const { width, height } = event.nativeEvent.layout;
-      const offset = this.internals.offset = {};
-      const state = { width, height };
+  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;
+    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;
-      }
+    // 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;
-          }
+    // 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);
-  }
+    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);
-  }
+    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);
-  }
+    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);
-  }
+  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 };
-          }
+  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();
+    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);
-      });
-  }
+      // 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;
-      }
-  }
+  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
@@ -403,61 +434,66 @@ export default class Swiper extends Component {
    * @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 {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;
+    const newState = {};
+    newState.index = index;
+    newState.loopJump = loopJump;
 
-      this.internals.offset = offset;
+    this.internals.offset = offset;
 
-      // only update offset in state if loopJump is true
-      if (loopJump) {
+    // 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);
-          }
+      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 {
-          this.setState(newState, cb);
+        newState.offset = offset;
+        this.setState(newState, cb);
       }
-  }
+    } else {
+      this.setState(newState, cb);
+    }
+  };
 
   /**
    * Scroll by index
@@ -466,43 +502,49 @@ export default class Swiper extends Component {
    */
 
   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 });
-      }
+    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
+    // 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,
+          },
+        });
       });
-
-      // trigger onScrollEnd manually in android
-      if (!animated || Platform.OS !== 'ios') {
-          setImmediate(() => {
-              this.onScrollEnd({
-                  nativeEvent: {
-                      position: diff
-                  }
-              });
-          });
-      }
-  }
+    }
+  };
 
   scrollViewPropOverrides = () => {
-      const { props } = this;
-      const overrides = {};
+    const {props} = this;
+    const overrides = {};
 
-      /*
+    /*
     const scrollResponders = [
       'onMomentumScrollBegin',
       'onTouchStartCapture',
@@ -512,187 +554,200 @@ export default class Swiper extends Component {
     ]
     */
 
-      for (const prop in props) {
+    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);
-          }
+      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;
-  }
+    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 })
-          );
-      }
+    // By default, dots only show when `total` >= 2
+    if (this.state.total <= 1) return null;
 
-      return (
-          <View pointerEvents="none" style={[styles[`pagination_${this.state.dir}`], this.props.paginationStyle]}>
-              {dots}
-          </View>
+    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;
-  }
+    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;
+    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>
+    if (this.props.loop || this.state.index !== this.state.total - 1) {
+      button = this.props.nextButton || (
+        <Text style={styles.buttonText}>›</Text>
       );
-  }
+    }
 
-  renderPrevButton = () => {
-      let button = null;
+    return (
+      <TouchableOpacity
+        onPress={() => button !== null && this.scrollBy(1)}
+        disabled={this.props.disableNextButton}>
+        <View>{button}</View>
+      </TouchableOpacity>
+    );
+  };
 
-      if (this.props.loop || this.state.index !== 0) {
-          button = this.props.prevButton || <Text style={styles.buttonText}>‹</Text>;
-      }
+  renderPrevButton = () => {
+    let button = null;
 
-      return (
-          <TouchableOpacity onPress={() => button !== null && this.scrollBy(-1)}>
-              <View>
-                  {button}
-              </View>
-          </TouchableOpacity>
+    if (this.props.loop || this.state.index !== 0) {
+      button = this.props.prevButton || (
+        <Text style={styles.buttonText}>‹</Text>
       );
-  }
+    }
 
-  renderButtons = () => (
-      <View
-          pointerEvents="box-none"
-          style={[styles.buttonWrapper, {
-              width: this.state.width,
-              height: this.state.height
-          }, this.props.buttonWrapperStyle]}
-      >
-          {this.renderPrevButton()}
-          {this.renderNextButton()}
-      </View>
-  )
+    return (
+      <TouchableOpacity onPress={() => button !== null && this.scrollBy(-1)}>
+        <View>{button}</View>
+      </TouchableOpacity>
+    );
+  };
 
-  refScrollView = (view) => {
-      this.scrollView = view;
-  }
+  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) {
+  onPageScrollStateChanged = state => {
+    switch (state) {
       case 'dragging':
-          return this.onScrollBegin();
+        return this.onScrollBegin();
 
       case 'idle':
       case 'settling':
-          if (this.props.onTouchEnd) this.props.onTouchEnd();
-      }
-  }
+        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>
-          );
-      }
+  renderScrollView = pages => {
+    if (Platform.OS === 'ios') {
       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>
+        <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;
-          }
+  checkPagesBeforeAfter = children => {
+    let str = '';
+    if (children && Array.isArray(children)) {
+      for (const child in children) {
+        str += children[child].key || child;
       }
-      return str;
+    }
+    return str;
   };
 
   /**
@@ -700,75 +755,91 @@ export default class Swiper extends Component {
    * @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) {
+    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))}`);
+      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>;
+      if (loop) {
+        pages.unshift(`${total - 1}`);
+        pages.push('0');
       }
 
-      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()}
+      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>
+    );
   }
 }