@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.
147 lines (145 loc) • 3.78 kB
JavaScript
;
import { View } from 'react-native';
import FabClustered from './FabClustered';
import FabDoted from './FabDoted';
import FabExtended from './FabExtended';
import FabSingle from './FabSingle';
import FabStacked from './FabStacked';
/**
* Floating Action Button (FAB) component for React Native
*
* @component
* @example
* // Single FAB
* <Fab
* variant="single"
* icon={<YourIconComponent />} // Custom component for the icon
* onPress={() => console.log('FAB pressed')}
* theme="light" // or "dark"
* style={{ // Optional custom styles
* backgroundColor: '#007AFF'
* }}
* />
*
* @example
* // Extended FAB with label
* <Fab
* variant="extended"
* items={[
* {
* icon: <YourIconComponent />,
* label: "Edit",
* onPress: () => console.log('Edit pressed')
* }
* ]}
* theme="light"
* />
*
* @example
* // Stacked FAB with multiple actions
* <Fab
* variant="stacked"
* items={[
* {
* icon: <EditIcon />,
* onPress: () => console.log('Edit')
* },
* {
* icon: <DeleteIcon />,
* onPress: () => console.log('Delete')
* }
* ]}
* theme="light"
* style={{ backgroundColor: '#007AFF' }}
* />
*
* @example
* // Clustered FAB
* <Fab
* variant="clustered"
* items={[
* {
* icon: <CameraIcon />,
* label: "Camera",
* onPress: () => console.log('Camera')
* },
* {
* icon: <GalleryIcon />,
* label: "Gallery",
* onPress: () => console.log('Gallery')
* }
* ]}
* theme="light"
* />
*
* @example
* // Doted FAB with indicators
* <Fab
* variant="doted"
* items={[
* {
* icon: <HomeIcon />,
* onPress: () => console.log('Home')
* },
* {
* icon: <SettingsIcon />,
* onPress: () => console.log('Settings')
* }
* ]}
* theme="light"
* isOpen={isOpen}
* plusIcon={<CustomPlusIcon />} // Optional custom plus icon
* />
*
* @param {FabProps} props - The props for the FAB component
* @param {('single'|'extended'|'stacked'|'clustered'|'doted')} [props.variant='single'] - The variant of the FAB
* @param {ReactNode} [props.icon] - Custom icon for single variant
* @param {ReactNode} [props.plusIcon] - Custom plus icon for doted variant
* @param {Array<{ icon: ReactNode, label?: string, onPress: () => void }>} [props.items] - Items for extended, stacked, clustered, and doted variants
* @param {() => void} [props.onPress] - Callback function for single variant
* @param {'light'|'dark'} [props.theme='light'] - Theme of the FAB
* @param {ViewStyle} [props.style] - Custom styles for the FAB
* @param {boolean} [props.isOpen] - Control open state for doted variant
* @returns {JSX.Element} Rendered FAB component
*/
import { jsx as _jsx } from "react/jsx-runtime";
const Fab = props => {
return /*#__PURE__*/_jsx(View, {
style: {
position: 'absolute',
bottom: 0,
right: 0,
left: 0
},
children: (() => {
switch (props.variant) {
case 'clustered':
return /*#__PURE__*/_jsx(FabClustered, {
...props
});
case 'doted':
return /*#__PURE__*/_jsx(FabDoted, {
...props
});
case 'extended':
return /*#__PURE__*/_jsx(FabExtended, {
...props
});
case 'single':
return /*#__PURE__*/_jsx(FabSingle, {
...props
});
case 'stacked':
return /*#__PURE__*/_jsx(FabStacked, {
...props
});
default:
return /*#__PURE__*/_jsx(FabSingle, {
...props
});
}
})()
});
};
export { Fab };
//# sourceMappingURL=Fab.js.map