@freakycoder/animated-tabbar
Version:
A 60FPS animated tab bar with a variety of cool animation presets.
138 lines (137 loc) • 7 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"));
var _maskedView = _interopRequireDefault(require("@react-native-community/masked-view"));
var _reactNativeSvg = require("react-native-svg");
var _lodash = _interopRequireDefault(require("lodash.isequal"));
var _constants = require("../constants");
var _styles = require("./styles");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
const AnimatedSvg = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeSvg.Svg);
const AnimatedCircle = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeSvg.Circle);
const FlashyTabBarItemComponent = ({
animatedFocus,
label,
icon,
labelStyle: labelStyleOverride,
spacing,
iconSize,
indicator,
isRTL
}) => {
const {
innerVerticalSpace,
innerHorizontalSpace,
outerVerticalSpace,
outerHorizontalSpace
} = spacing;
const {
size: _indicatorSize,
color: _indicatorColor,
visible: _indicatorVisible
} = indicator || {
size: undefined,
color: undefined,
visible: undefined
};
const {
indicatorVisibility,
indicatorColor,
indicatorSize
} = (0, _react.useMemo)(() => {
var _ref;
return {
indicatorVisibility: _indicatorVisible !== null && _indicatorVisible !== void 0 ? _indicatorVisible : _constants.DEFAULT_INDICATOR_VISIBILITY,
indicatorColor: (_ref = _indicatorColor !== null && _indicatorColor !== void 0 ? _indicatorColor : labelStyleOverride === null || labelStyleOverride === void 0 ? void 0 : labelStyleOverride.color) !== null && _ref !== void 0 ? _ref : _constants.DEFAULT_INDICATOR_COLOR,
indicatorSize: _indicatorSize !== null && _indicatorSize !== void 0 ? _indicatorSize : _constants.DEFAULT_INDICATOR_SIZE
};
}, [_indicatorVisible, _indicatorColor, _indicatorSize, labelStyleOverride]);
const labelWidth = (0, _reactNativeReanimated.useSharedValue)(0);
const labelHeight = (0, _reactNativeReanimated.useSharedValue)(0);
const containerHeight = (0, _react.useMemo)(() => iconSize + innerVerticalSpace * 2, [iconSize, innerVerticalSpace]);
const containerWidth = (0, _reactNativeReanimated.useSharedValue)(iconSize + innerHorizontalSpace * 2);
const labelContainerStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
transform: [{
translateY: (0, _reactNativeReanimated.interpolate)(animatedFocus.value, [0, 1], [labelHeight.value * 0.5, labelHeight.value * -0.5], _reactNativeReanimated.Extrapolate.CLAMP)
}]
}));
const iconContainerStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
transform: [{
translateY: (0, _reactNativeReanimated.interpolate)(animatedFocus.value, [0, 1], [iconSize * -0.5, iconSize * -1.5], _reactNativeReanimated.Extrapolate.CLAMP)
}]
}));
const handleLabelLayout = ({
nativeEvent: {
layout: {
height,
width
}
}
}) => {
labelWidth.value = width;
labelHeight.value = height;
containerWidth.value = Math.max(width + innerHorizontalSpace * 2, containerWidth.value);
};
const renderIcon = () => {
const IconComponent = icon.component;
return typeof IconComponent === 'function' ? /*#__PURE__*/_react.default.createElement(IconComponent, {
animatedFocus: animatedFocus.value,
color: icon.color,
size: iconSize
}) : /*#__PURE__*/_react.default.createElement(IconComponent, {
animatedFocus: animatedFocus.value,
color: icon.color,
size: iconSize
});
};
return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
style: [_styles.styles.outerContainer, {
paddingHorizontal: outerHorizontalSpace,
paddingVertical: outerVerticalSpace
}]
}, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
style: [_styles.styles.container, {
width: containerWidth.value,
height: containerHeight
}]
}, /*#__PURE__*/_react.default.createElement(_maskedView.default, {
style: _styles.styles.root,
maskElement: /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
style: iconContainerStyle
})
}, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
pointerEvents: "none",
style: iconContainerStyle
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: _styles.styles.icon
}, renderIcon()))), /*#__PURE__*/_react.default.createElement(_maskedView.default, {
style: _styles.styles.root,
maskElement: /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
style: labelContainerStyle
})
}, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
style: labelContainerStyle
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
numberOfLines: 1,
style: [_styles.styles.label, labelStyleOverride],
onLayout: handleLabelLayout
}, label))), indicatorVisibility && /*#__PURE__*/_react.default.createElement(AnimatedSvg, {
style: [_styles.styles.root, {
left: containerWidth.value / 2 - indicatorSize / 2,
top: containerHeight - indicatorSize
}]
}, /*#__PURE__*/_react.default.createElement(AnimatedCircle, {
r: (0, _reactNativeReanimated.interpolate)(animatedFocus.value, [0.5, 1], [0, indicatorSize / 2], _reactNativeReanimated.Extrapolate.CLAMP),
fill: indicatorColor
}))));
};
var _default = /*#__PURE__*/(0, _react.memo)(FlashyTabBarItemComponent, _lodash.default);
exports.default = _default;
//# sourceMappingURL=FlashyTabBarItem.js.map