mastermoo/react-native-action-button

customizable multi-action-button component for react-native

react-native-action-button

customizable multi-action-button component for react-native

Known Issues

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

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:

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

react-native-action-button's Issues

RawText "// Rest of App come ABOVE the action button component!" must be wrapped in an explicit <Text> component.

after running, show this error, how to fixed ?

RawText "// Rest of App come ABOVE the action button component!" must be wrapped in an explicit <Text> component.

Possibility of Disabling Mandatory Children Config?

Is there a possibility of the Disabling Mandatory Children Config? If so, how would I go about doing this? Thanks!

'Native component for RCTModalHostView does not exist' on Android

Getting this warning when running on Android and the action buttons aren't shown.
Please advice.

type="tab" only for popout buttons

is it possible to have a smaller version of the button just for the popout buttons that appear when you press the main one?

Button changes position when clicked

Someone knows why this happened?

<View style={{ flex: 1 }}>


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

Bottom Margin on Fab Causes it to be Cropped at the Top

The newly added bottomMargin on the button shadow is pushing FAB buttons up causing them to be cropped at the top (image below). This was introduced when adding elevation support to the library.

Trying to add unknown view tag: 19 detail: View tag: 18

update import statements to accomodate RN 0.26+

Since RN0.26 it is required to separate react specific elements and react-native specific elements

import React, { PropTypes } from 'react'; import { View, Text } from 'react-native';

Positioning but how?

How can I move the button to the x=200, y= 300 of the screen. offsetX and offsetY don't seem to be working the way I want them.

I'm on react-native 0.24.0

Very Poor performance

Tapping the FAB to show more buttons is extremely sluggish, looks like ~15fps. An setting I may be missing?

Even the active state after taping is about 2 seconds delayed.

Ran the example on a Nexus 6p

    "react": "15.2.1",
    "react-native": "0.30.0",
    "react-native-action-button": "^1.1.11",
    "react-native-vector-icons": "^2.0.3"

Warning: Failed propType: Invalid prop name of value android-create supplied to Icon

It's throwing that warning and not showing the Icons, it only works with the default one

import Icon from 'react-native-vector-icons/Ionicons';
import ActionButton from 'react-native-action-button';
{...}
<View style={{position: 'absolute', left:320, top: 310, width: 90, height: 300}}>
    <ActionButton buttonColor="rgba(231,76,60,1)" style={{position: 'absolute'}}
           icon={<Icon name="quote-right" color="#fff" size={20}/>} />
</View>

Also tried with FontAwesome and it showed a broken symbol, could you explain exactly how to show the Icons in Android? Because the example, exactly as shown, isn't working.

Edit: Looks like you have to manually install the fonts, maybe add that in the README.md? :)

When clicked and opened, the red parent float moves to the top left hand corner..

This happens as soon as the inner ones are shown. I am using react native .016. All great but this

change active state

when setting active as true or false it works fine.
but when true or false stored in the state it doesn't render the buttons state.
for example:
when i have no posts i want it ti be open and when i have posts i want it ti be close.
it works only when the page render at the first time.

require failed

do as
var ActionButton = require('react-native-action-button'),
Icon = require('react-native-vector-icons/Ionicons');
compile passed
but always got the runtime error
Unable to resolve module react-native-action-button from index.ios.js: Invalid directory /Users/node_modules/react-native-action-button

Props changes not taking effect

I'm trying to dynamically change some features of the action button, such as change its position on screen or change its background color.

The changes don't seem to have any effect. I've con logged the state in the render method and I can see that they have the correct values, but the component doesn't seem to redraw itself. Have i missed something?

ActionButtonItem must have a Child component.

This is a great component!!

If I create ActionButton items from a "map" iteration, this error appears.

My code:

<ActionButton buttonColor="rgba(231,76,60,0.7)">

            {this.state.categories.map((item, index) => (

              <ActionButton.Item buttonColor='#87c776' key={index} title={item.title}
                                 onPress={this._gotoPage.bind(this, item)} >
                  <Icon
                    name='fontawesome|dot-circle-o'
                    size={18}
                    color='#fff'
                    style={{width: 18, height: 18}}
                  />
              </ActionButton.Item>

            ))}

            <ActionButton.Item buttonColor='#3498db' title='Ver favoritos'
                               onPress={this._onPressFavoritos.bind(this)} >
                <Icon
                  name='fontawesome|star'
                  size={18}
                  color='#fff'
                  style={{width: 18, height: 18}}
                />
         </ActionButton.Item>
 </ActionButton>

this.state.categories has 3 items.
If I remove the "map" block it all goes well.

Can't update action button item title with setState

Action button code:

    <ActionButton.Item buttonColor='#3498db' title={this.state.favText} onPress={() => { this.checkFavourite(currentRoute.id) }}>
        <Icon name='ion|android-star-outline' size={20} style={styles.actionButtonIcon} />

Logic:

    checkFavourite = (id) => {
        if (this.state.favText == "Add to Favourites") {
            this.setState({
                favText: "Remove from Favourites"
            });
            console.log(this.state.favText);
        } else {
            this.setState({
                favText: "Add to Favourites"
            });
            console.log(this.state.favText);
        }
    }

I tried this logic on a simple component, and it works.

<Text>{this.state.favText}</Text>

Any ideas?

View #337 of type TCtView has a shadow set but cannot calculate shadow efficiently.

This happens when using an alpha color with no rgb. For example, I am using rgba(0,0,0,.40).

Packager refuses to finish transfer with react-native-action-button

As soon as I remove the package it works.

How to add Backdrop - Example code?

Hello together,

I tried many different ways to add a Backdrop to the RN Action Button. But I got some Problems with the Type "Object" etc.

Could someone help me with some Example Code for a blurred Backdrop?

Thanks and regards
Alex

Request: OnPress should display Material Design Ripple Effect

When you click a single action button, by default, it be comes semi transparent. Ideally, it would show the typical Material Design animation or perhaps have an option for it.

Default button +

Hi
Your action button's first item must be plus sign(+), is there possible customize this with an Icon component.

[IOS] RN 0.27 Can't use whole view with Action Button on it

Hey,

I have the Action Button for a while now. It started well and everything works fine. But since the last update I have an weird Problem. The Action Button Component seems to be over the whole View. As I try to Touch my Buttons I can't reach them. So I started the Inspector and clicked on an Button an whups there I got the ActionButton backdrop for the whole screen. As I deleted the Button out of my project everything works again fine.

PLS fix asap.

Cheers
Alex

Material Design dropshadow

Not sure if this is possible yet in RN, but it would be nice to have the Material Design style drop shadow on the button

Unrecognized font family 'Ionicons'

after click the button，show this error，how to fixed ?

Unrecognized font family 'Ionicons'

Label doesn't center align with custom button sizes

Button shadow gets cropped on left and right

The elevation is a great addition to the button, however the shadow gets cropped left and right. From the Basic example has right cropped shadow:

Other project also has left crop:

Expected:

I'll try and create a fix.

react-native 20-rc1 exposes peer dependency issue

Hello, I have package.json as

  "dependencies": {
    "react-native": "0.20.0-rc1",

    "@remobile/react-native-splashscreen": "^1.0.3",
    "fbemitter":"^2.0.2",


    "react-native-blur": "^0.7.6",
    "react-native-htmlview": "^0.2.0",


    "react-native-action-button": "^1.1.2",
    "react-native-android-statusbar": "^0.1.2",
    "react-native-material-kit": "^0.3.0", 
    "react-native-material-design": "^0.3.2"

    }

Getting

npm WARN EPEERINVALID [email protected] requires a peer of react-native@>=0.11 but none was installed.
npm WARN EPEERINVALID [email protected] requires a peer of react-native@>= 0.11.0 but none was installed.

Is there a fix to address it without changing the version of react-native?

thank you

Title color attribute doesn't change color

titleColor attribute doesn't work, rest attributes are working.

[Android] Elevation support

Having elevation support to help match material design specs would be great. When I try it out myself, the shadow from the elevation gets cut off.

Amazing Stuff : Can I make this floating action button.

Hi, before experimenting I just wanted to know If I can make this button as Floating action button ..
?

thanks

ActionButton without Items.

Hi,
What do you think about to add onPress on ActionButton?

Close(or as it's called here 'reset') action button programmatically

This might be useful in things like closing action button on back button or some other action for Android etc.

Gray out / darken the background when clicked

It would be great if the background would darken when the action button is clicked so the attention would be centered in the sub-buttons. In some screens there's so much "noise" that the labels are unnoticeable.

Breaks Android ScrollView

I've attempted to put a floating action button over an AndroidScrollView, but now the view doesn't scroll. Any works-arounds for this?

Make the example copy pastable for noobs like me

This line actually causes an error:

// Rest of App come ABOVE the action button component!

Either mention that this line needs to be removed when using that block of code or mention it in a comment outside the return statement

Clicking outside of action buttons area

I've used reveal to show the layout of the buttons and the way that they spread on the screen
As you can see there is a whole view surrounding the ActionButton.Items starting right above the ActionButton itself and spreading all the way to the top.
If you click this area then the reset method would get called and the cool animation of closing the buttons would get called.
However, once they are opened if you click to the left of the action button the the click would propagate down to any actionable item below the backdrop -L leading to unwanted results such as buttons being clicked when they shouldn't=> how can we solve this?

Must have a child component when wrapping ActionButton.Item

Im trying to create a ActionButton.Item component separately from the ActionButton wrapper

export default
class NewMessageActionItem extends React.Component {
    render() {
        return (
          <ActionButton.Item buttonColor="blue" title="Send Message" onPress={() => console.log("notes tapped!")}>
            <Icon name="comment-o" style={style.actionButtonIcon} />
          </ActionButton.Item>
        );
    }
}

and separately I have

class UserActions extends React.Component {
    render() {
        return (
          <ActionButton buttonColor='green'>
            <NewMessageActionItem />
          </ActionButton>
        );
    }
}

It throws an error when the Action is tapped that ActionButtonItem must have a Child component.

Is the above possible? Am I missing something..

how to fix “npm WARN [email protected] No repository field.”

mac cmd run

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

I have the following warning:

npm WARN [email protected] No responsitory field.

i try all i can try, but still don't fixed it

silly question , push new view

hi ,
i can't figure out how to push a new view on android,
i'm not using a navigator,
i tried to add a method call to the onPress,
and in the method i have a return(<text....) but nothing happen ,
any example ?
thanks

Buttons vanishing

For some reason the action buttons in my app have started disappearing shortly after the action button is pressed. I suspect, (but have no proof) it might be when my component is re-rendering as a result of some props/state changes. Perhaps the action button is losing its open/close state between renders?

This is not working on Android?

in ios it works perfectly fine, but in andorid this doesn't work. Is anyone else facing this issue?

Shadow warning with RN0.21

"View #1063 of type RCTView has a shadow set but cannot calculate shadow efficiently. Consider setting a background color to fix this, or apply the shadow to a more specific component."

Thanks!

Could you please explain here how to replace the "+" for icon from react-native-vector-icons ?

Button not rotating anymore

button is not rotating anymore when clicked since last npm install (yesterday). I've set the degrees prop at 360 but nothing happens. anyone else having this issue?

not working on react native 0.18

the action button overlay view catch touch event even on inactive, so other view below can not touchable

what is the syntax for adding an image as the icon?

Button position is wrong after being clicked

The action button shifts down after being clicked. It's not by a huge amount, but it's pretty noticeable when you're clicking it.

It's also completely off in landscape view if you switch to landscape after starting the app.

Each child should have unique key prop warning

Hey, first of all great component! Thanks a lot!

So the warning I get from when the action buttons are active is "Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of ActionButton." I see you added a key attribute to fix this warning. But I dont think its been published to npm with this update.

Action button item title background color

How to change the action button item title color ? Now it is in white background(default).