react-native-curved-tab-bar
Version:
A customizable curved tab bar component for React Native with smooth animations
90 lines (89 loc) • 2.44 kB
JavaScript
"use strict";
import React from 'react';
import { View, Image, Text } from 'react-native';
import Svg, { Circle, Defs, LinearGradient as SvgGradient, Stop } from 'react-native-svg';
import { vh } from "../utils.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const FloatingButton = ({
icon,
iconTintColor,
gradientColors,
size,
shadowConfig,
badgeCount
}) => {
const buttonSize = vh * size;
const iconSize = buttonSize * 0.48;
return /*#__PURE__*/_jsxs(View, {
style: {
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
...shadowConfig
},
children: [/*#__PURE__*/_jsxs(Svg, {
width: buttonSize,
height: buttonSize,
children: [/*#__PURE__*/_jsx(Defs, {
children: /*#__PURE__*/_jsxs(SvgGradient, {
id: "floatingButtonGradient",
x1: "0%",
y1: "25%",
x2: "80%",
y2: "100%",
children: [/*#__PURE__*/_jsx(Stop, {
offset: "0%",
stopColor: gradientColors[0]
}), /*#__PURE__*/_jsx(Stop, {
offset: "100%",
stopColor: gradientColors[1]
})]
})
}), /*#__PURE__*/_jsx(Circle, {
cx: buttonSize / 2,
cy: buttonSize / 2,
r: buttonSize / 2,
fill: "url(#floatingButtonGradient)"
})]
}), /*#__PURE__*/_jsx(View, {
style: {
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
width: buttonSize,
height: buttonSize
},
children: /*#__PURE__*/_jsx(Image, {
style: {
width: iconSize,
height: iconSize,
resizeMode: 'contain',
tintColor: iconTintColor
},
source: icon
})
}), badgeCount && badgeCount > 0 && /*#__PURE__*/_jsx(View, {
style: {
position: 'absolute',
top: -5,
right: -10,
backgroundColor: '#ff4444',
borderRadius: 10,
minWidth: 20,
height: 20,
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 4
},
children: /*#__PURE__*/_jsx(Text, {
style: {
color: 'white',
fontSize: 10,
fontWeight: 'bold'
},
children: badgeCount > 99 ? '99+' : badgeCount.toString()
})
})]
});
};
//# sourceMappingURL=FloatingButton.js.map