react-native-circle-floatmenu

Path-esque circular action menu inspired by react-native-circular-action-menu.

Usage no npm install needed!

<script type="module">
  import reactNativeCircleFloatmenu from 'https://cdn.skypack.dev/react-native-circle-floatmenu';
</script>

README

react-native-circular-action-menu

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

react-native-circular-action-menu demo

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