@mindinventory/react-native-tab-bar-interaction/lib/module/TabBar/AnimatedCircle.js

A tabbar component for React Native

"use strict";

import { StyleSheet } from 'react-native';
import Animated, { useAnimatedStyle } from 'react-native-reanimated';
import { jsx as _jsx } from "react/jsx-runtime";
const circleContainerSize = 56;
const AnimatedCircle = ({
  circleX,
  circleFillColor
}) => {
  const circleContainerStyle = useAnimatedStyle(() => {
    return {
      transform: [{
        translateX: circleX.value - circleContainerSize / 2
      }]
    };
  }, []);
  const circleBg = {
    backgroundColor: circleFillColor ? circleFillColor : '#fff'
  };
  return /*#__PURE__*/_jsx(Animated.View, {
    style: [circleContainerStyle, styles.container, circleBg]
  });
};
export default AnimatedCircle;
const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: -circleContainerSize / 3,
    width: circleContainerSize,
    borderRadius: circleContainerSize,
    height: circleContainerSize,
    justifyContent: 'center',
    alignItems: 'center',
    marginHorizontal: 'auto',
    //
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5
  }
});
//# sourceMappingURL=AnimatedCircle.js.map