react-native-reanimated-bottomsheet/lib/commonjs/index.js

A configurable and performant BottomSheet widget for React Native apps built using Reanimated v2 API.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));

var _reactNative = require("react-native");

var _reactNativeGestureHandler = require("react-native-gesture-handler");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/* eslint-disable react-hooks/rules-of-hooks */
var GESTURE;

(function (GESTURE) {
  GESTURE[GESTURE["DRAGGING_UP"] = 0] = "DRAGGING_UP";
  GESTURE[GESTURE["DRAGGING_DOWN"] = 1] = "DRAGGING_DOWN";
})(GESTURE || (GESTURE = {}));

const defaultSpringConfig = {
  damping: 50,
  mass: 0.5,
  stiffness: 121.6,
  restSpeedThreshold: 0.3
};

var _default = /*#__PURE__*/_react.default.forwardRef(({
  initialSnap = 0,
  snapPoints,
  renderContent,
  renderHeader,
  enabledGestureInteraction = true,
  hasFixedHeight = false,
  springConfig = defaultSpringConfig
}, ref) => {
  const maxHeight = snapPoints[snapPoints.length - 1];
  const defaultHeight = initialSnap ? snapPoints[initialSnap] : snapPoints[0];
  const sheetHeight = hasFixedHeight ? (0, _reactNativeReanimated.useSharedValue)(0) : (0, _reactNativeReanimated.useSharedValue)(defaultHeight);
  const gestureDirection = (0, _reactNativeReanimated.useSharedValue)(GESTURE.DRAGGING_UP);
  (0, _react.useImperativeHandle)(ref, () => ({
    close: () => {
      sheetHeight.value = (0, _reactNativeReanimated.withSpring)(0, defaultSpringConfig);
    },
    snapTo: index => {
      if (index < snapPoints.length - 1) {
        sheetHeight.value = (0, _reactNativeReanimated.withSpring)(snapPoints[index], defaultSpringConfig);
      }
    }
  }));
  (0, _react.useEffect)(() => {
    if (hasFixedHeight) {
      sheetHeight.value = (0, _reactNativeReanimated.withSpring)(snapPoints[0], defaultSpringConfig);
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, []);

  const getNearestSnap = () => {
    'worklet';

    let neearestSnapPoint = maxHeight;

    for (let snapIndex in snapPoints) {
      const numberedSnapIndex = Number(snapIndex);

      if (sheetHeight.value - snapPoints[snapIndex] < 0) {
        if (gestureDirection.value === GESTURE.DRAGGING_UP) {
          neearestSnapPoint = snapPoints[snapIndex];
        } else {
          const nearestSnapIndex = numberedSnapIndex - 1 >= 0 ? numberedSnapIndex - 1 : numberedSnapIndex;
          neearestSnapPoint = snapPoints[nearestSnapIndex];
        }

        break;
      }
    }

    return neearestSnapPoint;
  };

  const adjustSnap = _ => {
    'worklet';

    const nearestSnapPoint = getNearestSnap();
    sheetHeight.value = (0, _reactNativeReanimated.withSpring)(nearestSnapPoint, springConfig);
  };

  const gestureHandler = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
    onStart: (_, ctx) => {
      ctx.startY = sheetHeight.value;
    },
    onActive: (event, ctx) => {
      if (event.velocityY > 0) {
        gestureDirection.value = GESTURE.DRAGGING_DOWN;
      } else if (event.velocityY < 0) {
        gestureDirection.value = GESTURE.DRAGGING_UP;
      }

      sheetHeight.value = ctx.startY + event.translationY * -1;
    },
    onEnd: adjustSnap
  });
  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
    height: sheetHeight.value
  }));
  return /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.PanGestureHandler, {
    enabled: enabledGestureInteraction,
    onGestureEvent: gestureHandler
  }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
    style: [styles.sheetContainer, animatedStyle]
  }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
    style: styles.sheetInnerContainer
  }, renderHeader(), renderContent())));
});

exports.default = _default;

const styles = _reactNative.StyleSheet.create({
  sheetContainer: {
    width: '100%',
    position: 'absolute',
    bottom: 0,
    height: 20,
    borderRadius: 4
  },
  sheetInnerContainer: {
    flex: 1,
    shadowOpacity: 0.5,
    shadowOffset: {
      height: -1,
      width: 0
    }
  }
});
//# sourceMappingURL=index.js.map