Home

Awesome

react-native-circular-action-menu

Path-esque circular action menu inspired by CircularFloatingActionMenu.

react-native-circular-action-menu demo

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:
PropertyTypeDefaultDescription
activebooleanfalseaction buttons visible or not
autoInactivebooleantrueAuto hide ActionButtons when ActionButton.Item is pressed.
positionstring"center"one of: left center and right
radiusnumber100radius of menu
bgColorstring"transparent"color of overlay when ActionButtons are visible
buttonColorstring"rgba(0,0,0,1)"background color of the +Button (must be rgba value!)
btnOutRangestringprops.buttonColorbutton background color to animate to
outRangeScalenumber1changes size of button during animation
onPressfunctionnullfires, when ActionButton is tapped
onLongPressfunctionnullfires, when ActionButton is long pressed
onOverlayPressfunctionnullfires, when Overlay is pressed
iconComponent+Custom component for ActionButton Icon
backdropComponentfalseCustom component for use as Backdrop (i.e. BlurView, VibrancyView)
degreesnumber135degrees to rotate icon
ActionButton.Item:
PropertyTypeDefaultDescription
onPressfuncnullrequired function, triggers when a button is tapped
buttonColorstringsame as + buttonbackground color of the Button
startDegreenumber0degrees to start the rotation of the Item
endDegreenumber720degrees to end the rotation of the Item