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 |