@herberthtk/react-native-animated-reactions/lib/commonjs/index.js

Facebook inspired animated reactions component

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _constants = require("./constants.js");
var _jsxRuntime = require("react/jsx-runtime");
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 && {}.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 ReactionBar = /*#__PURE__*/(0, _react.forwardRef)(({
  onDismiss,
  onReactionSelect
}, ref) => {
  // Reanimated shared values for animations
  const scale = (0, _reactNativeReanimated.useSharedValue)(0);
  const bounce = (0, _reactNativeReanimated.useSharedValue)(1);
  const reactions = (0, _react.useMemo)(() => [{
    id: 'like',
    iconUrl: _constants.iconUrls[0]
  }, {
    id: 'love',
    iconUrl: _constants.iconUrls[1]
  }, {
    id: 'haha',
    iconUrl: _constants.iconUrls[2]
  }, {
    id: 'wow',
    iconUrl: _constants.iconUrls[3]
  }, {
    id: 'sad',
    iconUrl: _constants.iconUrls[4]
  }, {
    id: 'angry',
    iconUrl: _constants.iconUrls[5]
  }], []);

  // Animated styles
  const reactionBarStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
    transform: [{
      scale: scale.value
    }],
    opacity: scale.value
  }));
  const bounceStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
    transform: [{
      scale: bounce.value
    }]
  }));

  // Show reactions
  const showReactions = (0, _react.useCallback)(() => {
    scale.value = (0, _reactNativeReanimated.withSpring)(1, {
      damping: 10,
      stiffness: 100
    });
  }, [scale]);

  // Dismiss reactions
  const dismissReactions = (0, _react.useCallback)(() => {
    scale.value = (0, _reactNativeReanimated.withTiming)(0, {
      duration: 200
    });
  }, [scale]);

  // Handle reaction selection
  const handleReactionSelect = (0, _react.useCallback)(id => {
    const selectedReaction = reactions.find(reaction => reaction.id === id);
    if (selectedReaction) {
      onReactionSelect(selectedReaction);
    }

    // Trigger bounce effect
    bounce.value = 1.5;
    bounce.value = (0, _reactNativeReanimated.withSpring)(1, {
      damping: 5,
      stiffness: 150
    });
    dismissReactions();
  }, [bounce, dismissReactions, onReactionSelect, reactions]);
  (0, _reactNativeReanimated.useAnimatedReaction)(() => scale.value === 0, isDismissed => {
    if (isDismissed) {
      (0, _reactNativeReanimated.runOnJS)(onDismiss)();
    }
  });

  // Expose methods to parent component
  (0, _react.useImperativeHandle)(ref, () => ({
    showReactions,
    dismissReactions
  }));
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
    style: [styles.reactionBar, reactionBarStyle],
    children: reactions.map(reaction => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
      onPress: () => handleReactionSelect(reaction.id),
      style: styles.reactionIconWrapper,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.Image, {
        source: {
          uri: reaction.iconUrl
        },
        style: [styles.reactionIcon, bounceStyle]
      })
    }, reaction.id))
  });
});
const styles = _reactNative.StyleSheet.create({
  reactionBar: {
    flexDirection: 'row',
    backgroundColor: '#FFFFFF',
    borderRadius: 30,
    padding: 10,
    alignSelf: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 3
    },
    shadowOpacity: 0.2,
    shadowRadius: 4,
    elevation: 5
  },
  reactionIconWrapper: {
    marginHorizontal: 9
  },
  reactionIcon: {
    width: 32,
    height: 32
  }
});
var _default = exports.default = ReactionBar;
//# sourceMappingURL=index.js.map