React-native-floating-action-circle-button NPM

React native floating action circle button

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

Demo

demoFloating

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