Neutered Paranoid Meerkat

    react-native-simple-action-button

    1.0.1 • Public • Published

    react-native-simple-action-button

    customizable multi-action-button component for react-native

    react-native-simple-action-button demo react-native-simple-action-button demo react-native-simple-action-button demo react-native-simple-action-button demo

    Known Issues

    • Doesn't Work While Android Debugging. See issue #79.

    Installation

    npm i react-native-simple-action-button --save

    Link react-native-vector-icons native dependencies to your project with:

    react-native link react-native-vector-icons

    or just:

    react-native link

    to link all libraries with native dependencies in your project.

    Usage

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

    import ActionButton from 'react-native-simple-action-button';
    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 } from "react";
    import { StyleSheet, View } from "react-native";
    import ActionButton from "react-native-simple-action-button";
    import Icon from "react-native-vector-icons/Ionicons";
     
    class App extends Component {
        render() {
            return (
                <View style={{ flex: 1, backgroundColor: "#f3f3f3" }}>
                    {/* Rest of the app comes 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="md-create" style={styles.actionButtonIcon} />
                        </ActionButton.Item>
                        <ActionButton.Item buttonColor="#3498db" title="Notifications" onPress={() => {}}>
                            <Icon name="md-notifications-off" style={styles.actionButtonIcon} />
                        </ActionButton.Item>
                        <ActionButton.Item buttonColor="#1abc9c" title="All Tasks" onPress={() => {}}>
                            <Icon name="md-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");
        }}
    />

    Show/hide the FAB on scroll

    Take a look at this gist for showing and hiding the floating action button depending on the scroll direction.

    Configuration

    ActionButton:
    Property Type Default Description
    size number 56 use this to change the size of the Button
    resetToken any null use this to reset the internal component state (expand/collapse) in a re-render cycle. Synchronize the component state.
    active boolean false action buttons visible or not
    autoInactive boolean true Auto hide ActionButtons when ActionButton.Item is pressed.
    hideShadow boolean false use this to hide the default elevation and boxShadow
    position string "right" / "center" one of: left center and right
    bgColor string "transparent" background color when ActionButtons are visible
    buttonColor string "rgba(0,0,0,1)" background color of the +Button (must be rgba value!)
    spacing number 20 spacing between the ActionButton.Items
    offsetX number 30 offset from the left/right side of the screen
    offsetY number 30 offset from the bottom/top of the screen
    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
    onPressIn function null fires, before ActionButton is released
    onPressOut function null fires, after ActionButton is released
    onLongPress function null fires, when ActionButton is long pressed
    renderIcon function null Function to render the component for ActionButton Icon. It is passed a boolean, active, which is true if the FAB has been expanded, and false if it is collapsed, allowing you to show a different icon when the ActionButton Items are expanded.
    icon Component + Deprecated, use renderIcon 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
    buttonText string + use this to set a different text on the button
    buttonTextStyle style null use this to set the textstyle of the button's text
    onReset function null use this to set the callback that will be called after the button reset's it's items
    verticalOrientation string "up" direction action buttons should expand. One of: up or down
    backgroundTappable boolean false make background tappable in active state of ActionButton
    activeOpacity number 0.85 activeOpacity props of TouchableOpacity
    shadowStyle style null The custom shadow style you want to pass in the action button
    useNativeFeedback boolean true Android: Whether to use a TouchableNativeFeedback
    fixNativeFeedbackRadius boolean false Android: Activate this to fix TouchableNativeFeedback Ripple UI problems
    nativeFeedbackRippleColor string 'rgba(255,255,255,0.75)' Android: Pass a color to the Ripple Effect of a TouchableNativeFeedback
    ActionButton.Item:
    Property Type Default Description
    size number parentSize use this to change the size of the Button
    title string undefined the title shown next to the button. When undefined the title is not hidden
    onPress func null required function, triggers when a button is tapped
    buttonColor string same as + button background color of the Button
    titleColor string "#444" color of title, removed in v2.5. use textStyle instead
    titleBgColor string "white" background color of title, removed in v2.5. use textStyle instead
    textContainerStyle style null use this to set the textstyle of the button's item text container
    textStyle style null use this to set the textstyle of the button's item text
    spaceBetween number 15 use this to set the space between the Button and the text container
    numberOfLines number 1 use this to set the number of lines on the button's item text
    activeOpacity number 0.85 activeOpacity props of TouchableOpacity
    hideLabelShadow boolean same as hideShadow use this to hide the button's label default elevation and boxShadow
    shadowStyle style null The custom shadow style you want to pass in the action button item
    useNativeFeedback boolean true Android: Whether to use a TouchableNativeFeedback
    fixNativeFeedbackRadius boolean false Android: Activate this to fix TouchableNativeFeedback Ripple UI problems
    nativeFeedbackRippleColor string 'rgba(255,255,255,0.75)' Android: Pass a color to the Ripple Effect of a TouchableNativeFeedback

    Install

    npm i react-native-simple-action-button

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    63.6 kB

    Total Files

    11

    Last publish

    Collaborators

    • craiggometro