@mtr-react/react-native-circular-action-menu

react-native-circular-action-menu

Path-esque circular action menu inspired by CircularFloatingActionMenu.

Installation

npm i react-native-circular-action-menu --save

Usage

First, require it from your app's JavaScript files with:

import ActionButton from 'react-native-circular-action-menu';

ActionButton

ActionButton component is the main component which wraps everything and provides a couple of props (see Config below).

ActionButton.Item

ActionButton.Item specifies an Action Button. You have to include at least 1 ActionButton.Item.

Example

The following Basic example can be found in example/Basic.

import React, { Component, StyleSheet, View } from 'react-native';
import ActionButton from 'react-native-circular-action-menu';
import Icon from 'react-native-vector-icons/Ionicons';


class App extends Component {

  render() {
    return (
      <View style={{flex:1, backgroundColor: '#f3f3f3'}}>
        {/*Rest of App come ABOVE the action button component!*/}
        <ActionButton buttonColor="rgba(231,76,60,1)">
          <ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
            <Icon name="android-create" style={styles.actionButtonIcon} />
          </ActionButton.Item>
          <ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}>
            <Icon name="android-notifications-none" style={styles.actionButtonIcon} />
          </ActionButton.Item>
          <ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => {}}>
            <Icon name="android-done-all" style={styles.actionButtonIcon} />
          </ActionButton.Item>
        </ActionButton>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  actionButtonIcon: {
    fontSize: 20,
    height: 22,
    color: 'white',
  },
});

This will create a floating Button in the bottom right corner with 3 action buttons. Also this example uses react-native-vector-icons for the button Icons.

FAB Example

<ActionButton
  buttonColor="rgba(231,76,60,1)"
  onPress={() => { console.log("hi")}}
/>

Configuration

ActionButton:

Property	Type	Default	Description
active	boolean	false	action buttons visible or not
autoInactive	boolean	true	Auto hide ActionButtons when ActionButton.Item is pressed.
position	string	"center"	one of: left center and right
radius	number	100	radius of menu
bgColor	string	"transparent"	color of overlay when ActionButtons are visible
buttonColor	string	"rgba(0,0,0,1)"	background color of the +Button (must be rgba value!)
btnOutRange	string	props.buttonColor	button background color to animate to
outRangeScale	number	1	changes size of button during animation
onPress	function	null	fires, when ActionButton is tapped
onLongPress	function	null	fires, when ActionButton is long pressed
onOverlayPress	function	null	fires, when Overlay is pressed
icon	Component	+	Custom component for ActionButton Icon
backdrop	Component	false	Custom component for use as Backdrop (i.e. BlurView, VibrancyView)
degrees	number	135	degrees to rotate icon
size	number	63	Change size of button
itemSize	number	36	Change size of button item

ActionButton.Item:

Property	Type	Default	Description
onPress	func	null	required function, triggers when a button is tapped
buttonColor	string	same as + button	background color of the Button
startDegree	number	0	degrees to start the rotation of the Item
endDegree	number	720	degrees to end the rotation of the Item
disable	boolean	false	disable auto hide ActionButtons when ActionButton.Item is pressed.