@madeja-studio/telar/lib/module/component/NavigationBar/NavigationBarButton.js

UI component library by Madeja Studio

"use strict";

import Icons from '@expo/vector-icons';
import { transparentize } from 'polished';
import { rotate, useAnimation } from "../../animation/index.js";
import tw from "../../tailwind/index.js";
import { useTheme } from "../../theme/ThemeContextProvider.js";
import { AnimatedPressable } from "../Button/AnimatedPressable.js";
import { jsx as _jsx } from "react/jsx-runtime";
export const NavigationBarButton = ({
  icon,
  isActive,
  onPress,
  testID
}) => {
  const {
    theme
  } = useTheme();
  const {
    animatedStyle,
    animationStart,
    animationStop
  } = useAnimation([rotate({
    from: 15
  })]);
  const IconComponent = Icons[icon.family];
  return /*#__PURE__*/_jsx(AnimatedPressable, {
    onPress: onPress,
    onPressIn: () => animationStart(),
    onPressOut: () => animationStop(),
    style: [tw`p-6`, animatedStyle],
    testID: testID,
    children: /*#__PURE__*/_jsx(IconComponent, {
      color: isActive ? theme.navigationBar.color.text : transparentize(0.5, theme.navigationBar.color.text),
      name: icon.name,
      size: 24
    })
  });
};
//# sourceMappingURL=NavigationBarButton.js.map