react-native-action-button

Fork of this awesome (https://github.com/mastermoo/react-native-action-button) component. Child component wrap issue kind of solved & little code cleanup.

customizable multi-action-button component for react-native

Installation

npm i git+https://git@github.com/attilaaronnagy/react-native-action-button.git --save

Usage

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

import { ActionButton, ActionButtonItem } from 'react-native-action-button';

ActionButton

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

ActionButtonItem

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

Example

The following Basic example can be found in example/Basic.

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { ActionButton, ActionButtonItem } from 'react-native-action-button';


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)">
          <ActionButtonItem buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
            <Icon name="md-create" style={styles.actionButtonIcon} />
          </ActionButtonItem>
          <ActionButtonItem buttonColor='#3498db' title="Notifications" onPress={() => {}}>
            <Icon name="md-notifications-off" style={styles.actionButtonIcon} />
          </ActionButtonItem>
          <ActionButtonItem buttonColor='#1abc9c' title="All Tasks" onPress={() => {}}>
            <Icon name="md-done-all" style={styles.actionButtonIcon} />
          </ActionButtonItem>
        </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
active	boolean	false	action buttons visible or not
autoInactive	boolean	true	Auto hide ActionButtons when ActionButtonItem is pressed.
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 ActionButtonItems
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)
degrees	number	135	degrees to rotate icon
text	string	null	use this to set a different text on the button
buttonStyle	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

ActionButtonItem:

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
titleColor	string	"#444"	color of title
titleBgColor	string	"white"	background color of title
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