react-native-walkthrough-swiper/lib/commonjs/WalkthroughSwiper.js

A walkthrough swiper component for React-Native. Can be used in onboarding/walkthrough screens. Uses Reanimated API to create smooth animations.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.WalkthroughSwiper = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _BgImage = require("./components/BgImage");
var _PaginationBtn = _interopRequireDefault(require("./components/PaginationBtn"));
var _ElasticText = _interopRequireDefault(require("./components/ElasticText"));
var _SwipeRecogniser = _interopRequireDefault(require("./components/SwipeRecogniser"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const windowHeight = _reactNative.Dimensions.get('window').height;
const isRTL = _reactNative.I18nManager.isRTL;
const WalkthroughSwiper = _ref => {
  let {
    data,
    onSkipBtnPress,
    skipText,
    skipTextStyle,
    titleStyle,
    subTitleStyle,
    nextButton,
    centerComponent,
    centerStyle,
    activeSlideColor,
    inActiveSlideColor
  } = _ref;
  const [currentIndex, setCurrIndex] = _react.default.useState(0);
  const config = {
    velocityThreshold: 0.1,
    directionalOffsetThreshold: 40
  };
  const _renderNextButton = () => {
    return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
      onPress: () => {
        if (currentIndex == data.length - 1) {
          onSkipBtnPress();
        } else setCurrIndex(index => index + 1);
      },
      style: styles.nextBtnContainer
    }, nextButton);
  };
  const _renderSkipButton = () => {
    return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
      style: styles.skipContainer,
      onPress: onSkipBtnPress
    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
      style: [styles.skipText, skipTextStyle]
    }, skipText));
  };
  const _renderCenterView = () => {
    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      style: [styles.centerView, centerStyle]
    }, centerComponent);
  };
  const performLeftSwipe = () => {
    if (currentIndex > 0) {
      setCurrIndex(currentIndex - 1);
    }
  };
  const performRightSwipe = () => {
    if (currentIndex < data.length - 1) {
      setCurrIndex(currentIndex + 1);
    }
  };
  const walkthroughText = data.length > 0 ? /*#__PURE__*/_react.default.createElement(_ElasticText.default, {
    data: data,
    currentSlide: currentIndex,
    titleStyle: titleStyle,
    subTitleStyle: subTitleStyle
  }) : null;
  const walkthroughImgs = data.length > 0 && /*#__PURE__*/_react.default.createElement(_BgImage.BackgroundImages, {
    data: data,
    currentSlide: currentIndex
  });
  const paginationBtn = data.length > 0 && /*#__PURE__*/_react.default.createElement(_PaginationBtn.default, {
    data: data,
    currentSlide: currentIndex,
    activeSlideColor: activeSlideColor,
    inActiveSlideColor: inActiveSlideColor
  });
  return /*#__PURE__*/_react.default.createElement(_SwipeRecogniser.default, {
    style: styles.container,
    onSwipeRight: isRTL ? performRightSwipe : performLeftSwipe,
    onSwipeLeft: isRTL ? performLeftSwipe : performRightSwipe,
    config: config
  }, walkthroughImgs, walkthroughText, paginationBtn, _renderSkipButton(), _renderNextButton(), _renderCenterView());
};
exports.WalkthroughSwiper = WalkthroughSwiper;
const styles = _reactNative.StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center'
  },
  skipContainer: {
    position: 'absolute',
    right: 20,
    top: windowHeight * 0.06,
    height: 80
  },
  skipText: {
    fontSize: 16,
    // fontFamily: "Arada",
    color: '#5A5A5A',
    textDecorationLine: 'underline'
  },
  nextBtnContainer: {
    position: 'absolute',
    bottom: 26,
    right: 12,
    width: 40,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center'
  },
  centerView: {
    height: '30%',
    justifyContent: 'center'
  }
});
//# sourceMappingURL=WalkthroughSwiper.js.map