@freakycoder/animated-tabbar/lib/commonjs/AnimatedTabBar.js

A 60FPS animated tab bar with a variety of cool animation presets.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AnimatedTabBar = AnimatedTabBar;
var _react = _interopRequireWildcard(require("react"));
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
var _AnimatedTabBarView = require("./AnimatedTabBarView");
var _hooks = require("./hooks");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
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; }
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); }
function AnimatedTabBar(props) {
  var _overrideSafeAreaInse;
  // props
  const {
    tabs,
    state,
    navigation,
    descriptors,
    onTabPress,
    onTabLongPress,
    style: overrideStyle,
    safeAreaInsets: overrideSafeAreaInsets,
    ...rest
  } = props;

  //#region variables
  const tabBarContainerRef = (0, _react.useRef)(null);
  const isReactNavigation5 = (0, _react.useMemo)(() => Boolean(state), [state]);
  const tabBarHeight = (0, _reactNativeReanimated.useSharedValue)(0);
  const {
    index: navigationIndex,
    routes
  } = (0, _react.useMemo)(() => {
    if (isReactNavigation5) {
      return state;
    } else {
      return {
        index: navigation.state.index,
        routes: navigation.state.routes
      };
    }
  }, [state, navigation, isReactNavigation5]);
  const shouldShowTabBar = (0, _react.useMemo)(() => {
    if (!isReactNavigation5) {
      return true;
    }
    const route = routes[navigationIndex];
    const {
      options
    } = descriptors[route.key];
    return typeof options.tabBarVisible === 'boolean' ? options.tabBarVisible : true;
  }, [isReactNavigation5, routes, descriptors, navigationIndex]);
  const shouldShowTabBarAnimated = (0, _hooks.useTabBarVisibility)(shouldShowTabBar);
  const safeAreaInsets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
  const safeBottomArea = (_overrideSafeAreaInse = overrideSafeAreaInsets === null || overrideSafeAreaInsets === void 0 ? void 0 : overrideSafeAreaInsets.bottom) !== null && _overrideSafeAreaInse !== void 0 ? _overrideSafeAreaInse : safeAreaInsets.bottom;

  //#endregion

  //#region styles
  const animatedContainerStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
    return {
      bottom: 0,
      left: 0,
      right: 0,
      transform: [{
        translateY: (0, _reactNativeReanimated.interpolate)(shouldShowTabBarAnimated.value, [0, 1], [tabBarHeight.value, 0])
      }],
      position: shouldShowTabBar ? 'relative' : 'absolute'
    };
  }, [shouldShowTabBar]);
  const style = (0, _react.useMemo)(() => ({
    ...overrideStyle,
    paddingBottom: safeBottomArea
  }), [overrideStyle, safeBottomArea]);

  //#endregion

  //#region callbacks
  const handleIndexChange = (0, _hooks.useStableCallback)(index => {
    const {
      key,
      name
    } = routes[index];
    const event = navigation.emit({
      type: 'tabPress',
      target: key,
      canPreventDefault: true
    });
    if (!event.defaultPrevented) {
      navigation.navigate(name);
    }
  });
  const handleLongPress = (0, _hooks.useStableCallback)(index => {
    const {
      key
    } = routes[index];
    navigation.emit({
      type: 'tabLongPress',
      target: key
    });
  });
  const handleLayout = (0, _react.useCallback)(event => {
    tabBarHeight.value = event.nativeEvent.layout.height;
  }, []);

  //#endregion

  // render
  return /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
    ref: tabBarContainerRef,
    style: animatedContainerStyle,
    onLayout: handleLayout
  }, /*#__PURE__*/_react.default.createElement(_AnimatedTabBarView.AnimatedTabBarView, _extends({
    index: navigationIndex,
    onIndexChange: handleIndexChange,
    onLongPress: handleLongPress,
    tabs: routes.reduce((result, route) => {
      var _descriptors$route$ke;
      const routeConfig = tabs[route.name] || tabs[route.key];
      const title = ((_descriptors$route$ke = descriptors[route.key]) === null || _descriptors$route$ke === void 0 ? void 0 : _descriptors$route$ke.title) || route.name;
      result[route.key] = {
        title,
        ...routeConfig
      };
      return result;
    }, {}),
    style: style
  }, rest)));
}
//# sourceMappingURL=AnimatedTabBar.js.map