
Security News
npm ‘is’ Package Hijacked in Expanding Supply Chain Attack
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
react-native-floating-action-circle-button
Advanced tools
Simple floating action button component with circle button for react native
Simple floating action button component with circle button for react native.
npm install react-native-floating-action-circle-button
First step: import Component
import FloatingActionButton from 'react-native-floating-action-circle-button';
Second step: add actions list
const actions = [
{
icon: Assets.Icons.activeBin,
label: 'Delete',
disable: false,
onPress: null,
},
{
icon: Assets.Icons.inactiveCancelInvoice,
label: 'Cancel',
disable: true,
onPress: null,
},
{
icon: Assets.Icons.activeReport,
label: 'Report',
disable: false,
onPress: null,
},
];
Third step: place it in the screen
<FloatingActionButton
actions={actions}
backgroundStyle={{
marginRight: 17,
}}
actionButtonStyle={{
marginRight: 17,
}}
anchorButtonStyle={{
marginRight: 17,
}}
/>
Property | Type | Default | Description |
---|---|---|---|
actions | Array<Object> | [] | Actions to be shown when user press the anchor Floating Button. Must pass at less one action |
containerStyle | style | null | The custom style for wrapper container |
actionButtonStyle | style | null | The custom style for actions button |
backgroundStyle | style | null | The custom style for background and disable |
anchorInactiveIcon | ImageSourcePropType | ... | Icon to be rendered for anchor button when it's not pressed |
anchorActiveIcon | ImageSourcePropType | X | Icon to be rendered for anchor button when it is pressed |
anchorButtonStyle | style | null | The custom style for anchor button |
anchorIconStyle | style | null | The custom style for icon inside anchor button |
actions
propsProperty | Type | Default | Description |
---|---|---|---|
disable | Boolean | false | Actions status |
label | string | `` | Label for action |
onPress | Function | null | Function to be called when action button is pressed. Can't press when disable is true |
icon | ImageSourcePropType | null | Icon to be rendered inside action button |
iconStyle | style | null | The custom style for icon inside action button |
buttonStyle | style | null | The custom style for action button |
FAQs
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
Security News
A critical flaw in the popular npm form-data package could allow HTTP parameter pollution, affecting millions of projects until patched versions are adopted.
Security News
Bun 1.2.19 introduces isolated installs for smoother monorepo workflows, along with performance boosts, new tooling, and key compatibility fixes.