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.
119 lines (118 loc) • 4.87 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.swipeDirections = exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
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; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
// react-native-walkthrough-swiper
// This adds walkthrough pages with configurable animation effects
const swipeDirections = exports.swipeDirections = {
SWIPE_UP: 'SWIPE_UP',
SWIPE_DOWN: 'SWIPE_DOWN',
SWIPE_LEFT: 'SWIPE_LEFT',
SWIPE_RIGHT: 'SWIPE_RIGHT'
};
const swipeConfig = {
velocityThreshold: 0.3,
directionalOffsetThreshold: 80,
gestureIsClickThreshold: 5
};
function isValidSwipe(velocity, velocityThreshold, directionalOffset, directionalOffsetThreshold) {
return Math.abs(velocity) > velocityThreshold && Math.abs(directionalOffset) < directionalOffsetThreshold;
}
const GestureRecognizer = props => {
const swipeConfigRef = (0, _react.useRef)(Object.assign({}, swipeConfig, props.config));
const shouldSetPanResponder = (evt, gestureState) => {
return evt.nativeEvent.touches.length === 1 && !_gestureIsClick(gestureState);
};
const _gestureIsClick = gestureState => {
return Math.abs(gestureState.dx) < swipeConfigRef.current.gestureIsClickThreshold && Math.abs(gestureState.dy) < swipeConfigRef.current.gestureIsClickThreshold;
};
const handlePanResponderEnd = (evt, gestureState) => {
const swipeDirection = _getSwipeDirection(gestureState);
_triggerSwipeHandlers(swipeDirection, gestureState);
};
const _triggerSwipeHandlers = (swipeDirection, gestureState) => {
const {
onSwipe,
onSwipeUp,
onSwipeDown,
onSwipeLeft,
onSwipeRight
} = props;
const {
SWIPE_LEFT,
SWIPE_RIGHT,
SWIPE_UP,
SWIPE_DOWN
} = swipeDirections;
onSwipe && onSwipe(swipeDirection, gestureState);
switch (swipeDirection) {
case SWIPE_LEFT:
onSwipeLeft && onSwipeLeft(gestureState);
break;
case SWIPE_RIGHT:
onSwipeRight && onSwipeRight(gestureState);
break;
case SWIPE_UP:
onSwipeUp && onSwipeUp(gestureState);
break;
case SWIPE_DOWN:
onSwipeDown && onSwipeDown(gestureState);
break;
}
};
const _getSwipeDirection = gestureState => {
const {
SWIPE_LEFT,
SWIPE_RIGHT,
SWIPE_UP,
SWIPE_DOWN
} = swipeDirections;
const {
dx,
dy
} = gestureState;
if (_isValidHorizontalSwipe(gestureState)) {
return dx > 0 ? SWIPE_RIGHT : SWIPE_LEFT;
} else if (_isValidVerticalSwipe(gestureState)) {
return dy > 0 ? SWIPE_DOWN : SWIPE_UP;
}
return null;
};
const _isValidHorizontalSwipe = gestureState => {
const {
vx,
dy
} = gestureState;
const {
velocityThreshold,
directionalOffsetThreshold
} = swipeConfigRef.current;
return isValidSwipe(vx, velocityThreshold, dy, directionalOffsetThreshold);
};
const _isValidVerticalSwipe = gestureState => {
const {
vy,
dx
} = gestureState;
const {
velocityThreshold,
directionalOffsetThreshold
} = swipeConfigRef.current;
return isValidSwipe(vy, velocityThreshold, dx, directionalOffsetThreshold);
};
const panResponder = _reactNative.PanResponder.create({
onStartShouldSetPanResponder: shouldSetPanResponder,
onMoveShouldSetPanResponder: shouldSetPanResponder,
onPanResponderRelease: handlePanResponderEnd,
onPanResponderTerminate: handlePanResponderEnd
});
return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({}, props, panResponder.panHandlers));
};
var _default = exports.default = GestureRecognizer;
//# sourceMappingURL=SwipeRecogniser.js.map