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.
101 lines (100 loc) • 4.05 kB
JavaScript
"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 SELECTED_PAGER_WIDTH = 24;
const OVAL_WIDTH = 6;
const PAGER_SPACE = 8;
const PAGINATION_SPRING_CONFIG = {
damping: 13,
mass: 1,
stiffness: 100
};
const Pagination = _ref => {
let {
data,
currentSlide,
inActiveSlideColor = '#CFD2D4',
activeSlideColor = '#130C1A'
} = _ref;
const oldSlide = (0, _react.useRef)(currentSlide);
const animationVars = (0, _react.useRef)(data.map(() => (0, _reactNativeReanimated.useSharedValue)(0)));
const selectedPos = (0, _reactNativeReanimated.useSharedValue)(0);
(0, _react.useEffect)(() => {
moveSelected(currentSlide);
movePagination(oldSlide.current, currentSlide);
oldSlide.current = currentSlide;
}, [currentSlide]);
const selectedBtnAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
const transX = _reactNative.I18nManager.isRTL ? -1 * selectedPos.value : selectedPos.value;
return {
transform: [{
translateX: transX
}]
};
});
const moveSelected = active => {
selectedPos.value = (0, _reactNativeReanimated.withSpring)(active * (OVAL_WIDTH + PAGER_SPACE), PAGINATION_SPRING_CONFIG);
};
const movePagination = (prev, active) => {
const displacement = _reactNative.I18nManager.isRTL ? SELECTED_PAGER_WIDTH + PAGER_SPACE : -1 * (SELECTED_PAGER_WIDTH + PAGER_SPACE);
if (active > prev) {
animationVars.current[active - 1].value = (0, _reactNativeReanimated.withSpring)(displacement, PAGINATION_SPRING_CONFIG);
} else {
animationVars.current[active].value = (0, _reactNativeReanimated.withSpring)(0, PAGINATION_SPRING_CONFIG);
}
};
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.components
}, data.map((_, index) => {
const style = index === 0 ? [styles.selected, {
backgroundColor: activeSlideColor
}] : [styles.oval, {
backgroundColor: inActiveSlideColor
}];
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
key: index,
style: [style, index === 0 ? selectedBtnAnimatedStyle : (0, _reactNativeReanimated.useAnimatedStyle)(() => {
const transX = animationVars.current[index - 1].value;
return {
transform: [{
translateX: transX
}]
};
})]
});
}));
};
var _default = exports.default = /*#__PURE__*/_react.default.memo(Pagination);
const styles = _reactNative.StyleSheet.create({
components: {
position: 'absolute',
height: 6,
bottom: 40,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center'
},
selected: {
width: SELECTED_PAGER_WIDTH,
height: 6,
borderRadius: 3,
marginHorizontal: 4,
backgroundColor: '#130C1A'
},
oval: {
width: OVAL_WIDTH,
height: 6,
borderRadius: 3,
marginHorizontal: 4,
backgroundColor: '#CFD2D4'
}
});
//# sourceMappingURL=PaginationBtn.js.map