@masumdev/rn-fab
Version:
A highly customizable Floating Action Button (FAB) component for React Native. Supports multiple variants including single, extended, stacked, clustered, and doted layouts. Built with smooth animations and optimized for both iOS and Android platforms.
213 lines (208 loc) • 8.4 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 _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const FabClustered = ({
items,
style,
containerStyle,
theme = 'light',
isOpen: setIsOpen,
plusIcon
}) => {
const [firstValue, secondValue, thirdValue] = [(0, _reactNativeReanimated.useSharedValue)(30), (0, _reactNativeReanimated.useSharedValue)(30), (0, _reactNativeReanimated.useSharedValue)(30)];
const [firstWidth, secondWidth, thirdWidth] = [(0, _reactNativeReanimated.useSharedValue)(60), (0, _reactNativeReanimated.useSharedValue)(60), (0, _reactNativeReanimated.useSharedValue)(60)];
const [isOpen, opacity] = [(0, _reactNativeReanimated.useSharedValue)(false), (0, _reactNativeReanimated.useSharedValue)(0)];
const progress = (0, _reactNativeReanimated.useDerivedValue)(() => {
'worklet';
return isOpen.value ? (0, _reactNativeReanimated.withTiming)(1) : (0, _reactNativeReanimated.withTiming)(0);
});
const config = (0, _react.useMemo)(() => ({
easing: _reactNativeReanimated.Easing.bezier(0.68, -0.6, 0.32, 1.6),
duration: 500
}), []);
const handlePress = () => {
if (isOpen.value) {
firstWidth.value = (0, _reactNativeReanimated.withTiming)(60, {
duration: 100
}, finish => {
'worklet';
if (finish) {
firstValue.value = (0, _reactNativeReanimated.withTiming)(30, config);
}
});
secondWidth.value = (0, _reactNativeReanimated.withTiming)(60, {
duration: 100
}, finish => {
'worklet';
if (finish) {
secondValue.value = (0, _reactNativeReanimated.withDelay)(50, (0, _reactNativeReanimated.withTiming)(30, config));
}
});
thirdWidth.value = (0, _reactNativeReanimated.withTiming)(60, {
duration: 100
}, finish => {
'worklet';
if (finish) {
thirdValue.value = (0, _reactNativeReanimated.withDelay)(100, (0, _reactNativeReanimated.withTiming)(30, config));
}
});
opacity.value = (0, _reactNativeReanimated.withTiming)(0, {
duration: 100
});
} else {
firstValue.value = (0, _reactNativeReanimated.withDelay)(200, (0, _reactNativeReanimated.withSpring)(130));
secondValue.value = (0, _reactNativeReanimated.withDelay)(100, (0, _reactNativeReanimated.withSpring)(210));
thirdValue.value = (0, _reactNativeReanimated.withSpring)(290);
firstWidth.value = (0, _reactNativeReanimated.withDelay)(1200, (0, _reactNativeReanimated.withSpring)(200));
secondWidth.value = (0, _reactNativeReanimated.withDelay)(1100, (0, _reactNativeReanimated.withSpring)(200));
thirdWidth.value = (0, _reactNativeReanimated.withDelay)(1000, (0, _reactNativeReanimated.withSpring)(200));
opacity.value = (0, _reactNativeReanimated.withDelay)(1200, (0, _reactNativeReanimated.withSpring)(1));
}
isOpen.value = !isOpen.value;
setIsOpen?.(!isOpen.value);
};
const opacityStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
opacity: opacity.value
}));
const firstWidthStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
width: firstWidth.value
}));
const secondWidthStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
width: secondWidth.value
}));
const thirdWidthStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
width: thirdWidth.value
}));
const firstIconStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
const scale = (0, _reactNativeReanimated.interpolate)(firstValue.value, [30, 130], [0, 1], _reactNativeReanimated.Extrapolation.CLAMP);
return {
bottom: firstValue.value,
transform: [{
scale
}]
};
});
const secondIconStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
const scale = (0, _reactNativeReanimated.interpolate)(secondValue.value, [30, 210], [0, 1], _reactNativeReanimated.Extrapolation.CLAMP);
return {
bottom: secondValue.value,
transform: [{
scale
}]
};
});
const thirdIconStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
const scale = (0, _reactNativeReanimated.interpolate)(thirdValue.value, [30, 290], [0, 1], _reactNativeReanimated.Extrapolation.CLAMP);
return {
bottom: thirdValue.value,
transform: [{
scale
}]
};
});
const plusIconStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
transform: [{
rotate: `${progress.value * 45}deg`
}]
}));
const sampleItems = (0, _react.useMemo)(() => [{
animate: firstIconStyle,
width: firstWidthStyle
}, {
animate: secondIconStyle,
width: secondWidthStyle
}, {
animate: thirdIconStyle,
width: thirdWidthStyle
}], [firstIconStyle, secondIconStyle, thirdIconStyle, firstWidthStyle, secondWidthStyle, thirdWidthStyle]);
const backgroundStyle = theme === 'light' ? styles.lightBg : styles.darkBg;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
style: [styles.container, containerStyle],
children: [items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
style: [styles.contentContainer, sampleItems[index].animate, sampleItems[index].width, backgroundStyle, style],
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
onPress: () => {
item?.onPress?.();
handlePress();
},
style: [styles.iconContainer, style],
children: item?.icon
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
onPress: () => {
item?.onPress?.();
handlePress();
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.Text, {
style: [styles.text, opacityStyle],
children: item?.label
})
})]
}, index)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
style: [styles.contentContainer, backgroundStyle],
onPress: handlePress,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
style: [styles.iconContainer, plusIconStyle, style],
children: plusIcon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
source: require('../assets/PlusIcon.png'),
style: [styles.icon, {
tintColor: theme === 'light' ? '#fff' : '#000'
}]
})
})
})]
});
};
const styles = _reactNative.StyleSheet.create({
container: {
flex: 1
},
contentContainer: {
position: 'absolute',
bottom: 30,
right: 30,
borderRadius: 50,
flexDirection: 'row',
alignItems: 'center',
overflow: 'hidden',
// Add shadow
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5
},
iconContainer: {
width: 60,
height: 60,
justifyContent: 'center',
alignItems: 'center'
},
icon: {
width: 26,
height: 26
},
text: {
color: 'white',
fontSize: 18,
marginLeft: 10
},
lightBg: {
backgroundColor: '#000'
},
darkBg: {
backgroundColor: '#fff'
}
});
var _default = exports.default = /*#__PURE__*/_react.default.memo(FabClustered);
//# sourceMappingURL=FabClustered.js.map