react-native-walkthrough-swiper/lib/commonjs/components/ElasticText.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.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const width = _reactNative.Dimensions.get('window').width;
const TEXT_OUT_DURATION = 160;
const TEXT_OUT_OPACITY_DURATION = 100;
const TEXT_IN_DURATION = 200;
const SUBTITLE_IN_DELAY = 40;
const ElasticText = _ref => {
  let {
    data,
    currentSlide,
    titleStyle,
    subTitleStyle
  } = _ref;
  const oldSlide = (0, _react.useRef)(currentSlide);
  const animationVars = (0, _react.useRef)(data.map(() => ({
    title: {
      alpha: (0, _reactNativeReanimated.useSharedValue)(0),
      x: (0, _reactNativeReanimated.useSharedValue)(0)
    },
    subtitle: {
      alpha: (0, _reactNativeReanimated.useSharedValue)(0),
      x: (0, _reactNativeReanimated.useSharedValue)(0)
    }
  })));
  (0, _react.useEffect)(() => {
    moveText(oldSlide.current, currentSlide);
    oldSlide.current = currentSlide;
  }, [currentSlide]);
  const moveText = (prev, active) => {
    const direction = active < prev ? -1 : 1;
    const textInSpring = {
      damping: 14,
      mass: 1,
      stiffness: 100
    };
    data.forEach((_, index) => {
      const {
        title,
        subtitle
      } = animationVars.current[index];
      title.x.value = (0, _reactNativeReanimated.withTiming)(direction * (index === prev ? -1 : 1) * width, {
        easing: _reactNativeReanimated.Easing.inOut(_reactNativeReanimated.Easing.linear),
        duration: TEXT_OUT_DURATION
      });
      subtitle.x.value = (0, _reactNativeReanimated.withTiming)(direction * (index === prev ? -1 : 1) * width, {
        easing: _reactNativeReanimated.Easing.inOut(_reactNativeReanimated.Easing.linear),
        duration: TEXT_OUT_DURATION
      });
      title.alpha.value = (0, _reactNativeReanimated.withTiming)(0, {
        easing: _reactNativeReanimated.Easing.inOut(_reactNativeReanimated.Easing.linear),
        duration: TEXT_OUT_OPACITY_DURATION
      });
      subtitle.alpha.value = (0, _reactNativeReanimated.withTiming)(0, {
        easing: _reactNativeReanimated.Easing.inOut(_reactNativeReanimated.Easing.linear),
        duration: TEXT_OUT_OPACITY_DURATION
      });
      title.x.value = (0, _reactNativeReanimated.withSpring)(index === active ? 0 : direction * width, textInSpring);
      subtitle.x.value = (0, _reactNativeReanimated.withDelay)(SUBTITLE_IN_DELAY, (0, _reactNativeReanimated.withSpring)(index === active ? 0 : direction * width, textInSpring));
      title.alpha.value = (0, _reactNativeReanimated.withTiming)(index === active ? 1 : 0, {
        easing: _reactNativeReanimated.Easing.inOut(_reactNativeReanimated.Easing.exp),
        duration: TEXT_IN_DURATION
      });
      subtitle.alpha.value = (0, _reactNativeReanimated.withDelay)(SUBTITLE_IN_DELAY, (0, _reactNativeReanimated.withTiming)(index === active ? 1 : 0, {
        easing: _reactNativeReanimated.Easing.inOut(_reactNativeReanimated.Easing.exp),
        duration: TEXT_IN_DURATION
      }));
    });
  };
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, data.map((slide, index) => {
    const {
      title,
      subtitle
    } = animationVars.current[index];
    const titleAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
      const transX = title.x.value;
      return {
        transform: [{
          translateX: transX
        }],
        opacity: title.alpha.value
      };
    });
    const subtitleAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
      const transX = subtitle.x.value;
      return {
        transform: [{
          translateX: -1 * transX
        }],
        opacity: subtitle.alpha.value
      };
    });
    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      style: styles.container,
      key: `content_${index}`
    }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
      key: `title_${index}`,
      style: [{
        width: width - 40
      }, titleAnimatedStyle]
    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
      style: [{
        fontSize: 32,
        marginBottom: 12
      }, titleStyle]
    }, slide.title)), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
      key: `subtitle_${index}`,
      style: [styles.widthWithMargin, subtitleAnimatedStyle]
    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
      style: [{
        fontSize: 14.4
      }, subTitleStyle]
    }, slide.subTitle)));
  }));
};
const styles = _reactNative.StyleSheet.create({
  container: {
    position: 'absolute',
    flexDirection: 'column',
    alignItems: 'center',
    alignSelf: 'center',
    width: width - 40,
    bottom: 72
  },
  widthWithMargin: {
    width: width - 40
  }
});
var _default = exports.default = /*#__PURE__*/_react.default.memo(ElasticText);
//# sourceMappingURL=ElasticText.js.map