Skip to content
customizable multi-action-button component for react-native
Branch: master
Clone or download
This branch is 170 commits behind mastermoo:master.

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.


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


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


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

import ActionButton from 'react-native-action-button';

ActionButton component is the main component which wraps everything and provides a couple of props (see Config below).


ActionButton.Item specifies an Action Button. You have to include at least 1 ActionButton.Item.


import React, { Component, 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 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 buttonColor='#3498db' title="Notifications" onPress={() => {}}>
            <Icon name="android-notifications-none" style={styles.actionButtonIcon} />
          <ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => {}}>
            <Icon name="android-done-all" style={styles.actionButtonIcon} />


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

  onPress={() => { console.log("hi")}}


Property Type Default Description
active boolean false action buttons visible or not
autoInactive boolean true Auto hide ActionButtons when ActionButton.Item is pressed.
type string "float" either float (bigger btns) or tab (smaller btns) + position changes
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 10 / 30 offset to the sides of the screen
offsetY number 4 / 30 offset to the bottom 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
onLongPress function null fires, when ActionButton is long pressed
icon Component + Custom component for ActionButton Icon
backdrop Component false Custom component for use as Backdrop (i.e. BlurView, VibrancyView)
Property Type Default Description
title string undefined the title shown next to the button, not shown when empty
onPress func null required function, triggers when a button is tapped
buttonColor string same as + button background color of the Button
titleBgColor string "white" background color of title
You can’t perform that action at this time.