React native floating action circle button

Simple floating action button component with circle button for react native.

Demo

Installation

  npm install react-native-floating-action-circle-button

Usage/Examples

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,
  }}
/>

Props

| 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 props

| Property | 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 |

License

MIT