Home

Awesome

react-native-action-button

customizable multi-action-button component for react-native

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

Known Issues

Installation

npm i react-native-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-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-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:
PropertyTypeDefaultDescription
sizenumber56use this to change the size of the Button
resetTokenanynulluse this to reset the internal component state (expand/collapse) in a re-render cycle. Synchronize the component state.
activebooleanfalseaction buttons visible or not
autoInactivebooleantrueAuto hide ActionButtons when ActionButton.Item is pressed.
hideShadowbooleanfalseuse this to hide the default elevation and boxShadow
positionstring"right" / "center"one of: left center and right
bgColorstring"transparent"background color when ActionButtons are visible
buttonColorstring"rgba(0,0,0,1)"background color of the +Button (must be rgba value!)
spacingnumber20spacing between the ActionButton.Items
offsetXnumber30offset from the left/right side of the screen
offsetYnumber30offset from the bottom/top of the screen
btnOutRangestringprops.buttonColorbutton background color to animate to
outRangeScalenumber1changes size of button during animation
onPressfunctionnullfires, when ActionButton is tapped
onPressInfunctionnullfires, before ActionButton is released
onPressOutfunctionnullfires, after ActionButton is released
onLongPressfunctionnullfires, when ActionButton is long pressed
renderIcon  functionnullFunction 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
backdropComponentfalseCustom component for use as Backdrop (i.e. BlurView, VibrancyView)
degreesnumber135degrees to rotate icon
buttonTextstring+use this to set a different text on the button
buttonTextStylestylenulluse this to set the textstyle of the button's text
onResetfunctionnulluse this to set the callback that will be called after the button reset's it's items
verticalOrientationstring"up"direction action buttons should expand. One of: up or down
backgroundTappablebooleanfalsemake background tappable in active state of ActionButton
activeOpacitynumber0.85activeOpacity props of TouchableOpacity
shadowStylestylenullThe custom shadow style you want to pass in the action button
useNativeFeedbackbooleantrueAndroid: Whether to use a TouchableNativeFeedback
fixNativeFeedbackRadiusbooleanfalseAndroid: Activate this to fix TouchableNativeFeedback Ripple UI problems
nativeFeedbackRippleColorstring'rgba(255,255,255,0.75)'Android: Pass a color to the Ripple Effect of a TouchableNativeFeedback
ActionButton.Item:
PropertyTypeDefaultDescription
sizenumberparentSizeuse this to change the size of the Button
titlestringundefinedthe title shown next to the button. When undefined the title is not hidden
onPressfuncnullrequired function, triggers when a button is tapped
buttonColorstringsame as + buttonbackground color of the Button
titleColorstring"#444"color of title, removed in v2.5. use textStyle instead
titleBgColorstring"white"background color of title, removed in v2.5. use textStyle instead
textContainerStylestylenulluse this to set the textstyle of the button's item text container
textStylestylenulluse this to set the textstyle of the button's item text
spaceBetweennumber15use this to set the space between the Button and the text container
numberOfLinesnumber1use this to set the number of lines on the button's item text
activeOpacitynumber0.85activeOpacity props of TouchableOpacity
hideLabelShadowbooleansame as hideShadowuse this to hide the button's label default elevation and boxShadow
shadowStylestylenullThe custom shadow style you want to pass in the action button item
useNativeFeedbackbooleantrueAndroid: Whether to use a TouchableNativeFeedback
fixNativeFeedbackRadiusbooleanfalseAndroid: Activate this to fix TouchableNativeFeedback Ripple UI problems
nativeFeedbackRippleColorstring'rgba(255,255,255,0.75)'Android: Pass a color to the Ripple Effect of a TouchableNativeFeedback