react-native-circle-floatmenu

react-native-circular-action-menu

Geremih´s Path-esque circular action menu inspired by CircularFloatingActionMenu modified and tested on RN_0.63 by Kur.

Installation

npm i react-native-circle-floatmenu --save

Usage

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

import CircleButton from 'react-native-circle-floatmenu';

CircleButton

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

CircleButton.Item

CircleButton.Item specifies an Circle Button. You have to include at least 1 CircleButton.Item.

Example

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

import React from 'react';
import {
  StyleSheet,
  View,
} from 'react-native';

import CircleButton from "react-native-circle-floatmenu";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";

const App = () => {
  return (
    <View style={styles.btn_container}>
          <CircleButton buttonColor="rgba(0,0,0,1)" position="topleft">
            <CircleButton.Item
              position="absolute"
              buttonColor="#000"
              title="Perfil"
              onPress={() => console.log("BtnPress")}
            >
              <Icon
                name="card-account-details"
                style={styles.circleButtonIcon}
              />
            </CircleButton.Item>
            <CircleButton.Item
              position="absolute"
              buttonColor="#000"
              title="Perfil"
              onPress={() => console.log("BtnPress")}
            >
              <Icon name="bookmark-outline" style={styles.circleButtonIcon} />
            </CircleButton.Item>
            <CircleButton.Item
              position="absolute"
              buttonColor="#000"
              title="Perfil"
              onPress={() => console.log("BtnPress")}
            >
              <Icon
                name="briefcase-outline"
                style={styles.circleButtonIcon}
              />
            </CircleButton.Item>
            <CircleButton.Item
              position="absolute"
              buttonColor="#000"
              title="Perfil"
              onPress={() => console.log("BtnPress")}
            >
              <Icon
                name="reply"
                style={styles.circleButtonIcon}
              />
            </CircleButton.Item>
            <CircleButton.Item
              position="absolute"
              buttonColor="#000"
              title="Perfil"
              onPress={() => console.log("BtnPress")}
            >
              <Icon
                name="power-standby"
                style={styles.circleButtonIcon}
              />
            </CircleButton.Item>
          </CircleButton>
    </View>
  );
};

const styles = StyleSheet.create({
  btn_container: {
    flex: 1,
    backgroundColor: "#59a6eb",
    justifyContent: "center",
    width: "100%",
    elevation: 8,
    borderRadius: 5,
    margin: 1,
  },
  circleButtonIcon: {
    fontSize: 20,
    height: 22,
    color: "white",
  },
});

export default App;

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

FAB Example

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

Configuration

CircleButton

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 right topleft topcenter and topright
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

CircleButton.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