react-native-walkthrough-swiper
Version:
A walkthrough swiper component for React-Native. Can be used in onboarding/walkthrough screens. Uses Reanimated API to create smooth animations.
69 lines (68 loc) • 3.15 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BackgroundImages = 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 BackgroundImages = _ref => {
let {
data,
currentSlide
} = _ref;
const animationVars = (0, _react.useRef)(data.map(() => ({
alpha: (0, _reactNativeReanimated.useSharedValue)(0),
scale: (0, _reactNativeReanimated.useSharedValue)(1)
})));
(0, _react.useEffect)(() => {
changeImage(oldSlide.current, currentSlide);
oldSlide.current = currentSlide;
}, [currentSlide]);
const oldSlide = (0, _react.useRef)(currentSlide);
const changeImage = (prev, active) => {
animationVars.current[prev].alpha.value = (0, _reactNativeReanimated.withTiming)(0, {
duration: 400
});
animationVars.current[active].alpha.value = (0, _reactNativeReanimated.withTiming)(1, {
duration: 400
});
const direction = active > prev ? 1 : -1;
animationVars.current[prev].scale.value = (0, _reactNativeReanimated.withTiming)(1 + 0.2 * direction, {
duration: 400
});
animationVars.current[active].scale.value = (0, _reactNativeReanimated.withTiming)(1, {
duration: 400
});
};
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, data.map((slide, index) => {
const alphaSharedValue = animationVars.current[index].alpha;
const scaleSharedValue = animationVars.current[index].scale;
const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
return {
opacity: alphaSharedValue.value,
transform: [{
scale: scaleSharedValue.value
}]
};
});
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.Image, {
key: `bg_${index}`,
resizeMode: "cover",
source: {
uri: slide === null || slide === void 0 ? void 0 : slide.bgImage
},
style: [styles.imgContainer, animatedStyle]
});
}));
};
exports.BackgroundImages = BackgroundImages;
const styles = _reactNative.StyleSheet.create({
imgContainer: {
..._reactNative.StyleSheet.absoluteFillObject,
opacity: 0.4
}
});
//# sourceMappingURL=BgImage.js.map