Neat! Pickled Muskrat!

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

    1.0.3 • Public • Published

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

    Install

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

    DownloadsWeekly Downloads

    4

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    1.85 MB

    Total Files

    66

    Last publish

    Collaborators

    • danang-meteor
    • imron02
    • meteorinovasidigital