@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.
68 lines (67 loc) • 1.82 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
var _reactNative = require("react-native");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const FabSingle = ({
icon: component,
onPress,
style,
theme = 'light'
}) => {
const backgroundStyle = theme === 'light' ? styles.lightBg : styles.darkBg;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
style: [styles.container, backgroundStyle, style],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
style: styles.touchable,
onPress: onPress,
children: component || /*#__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: {
position: 'absolute',
bottom: 30,
right: 30,
borderRadius: 50,
width: 60,
height: 60,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5
},
touchable: {
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center'
},
icon: {
width: 26,
height: 26
},
lightBg: {
backgroundColor: '#000'
},
darkBg: {
backgroundColor: '#fff'
}
});
var _default = exports.default = /*#__PURE__*/_react.default.memo(FabSingle);
//# sourceMappingURL=FabSingle.js.map