mastermoo / react-native-action-button Goto Github PK

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 might be useful in things like closing action button on back button or some other action for Android etc.

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

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"

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

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.

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

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? :)

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

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.

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

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.

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

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

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

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

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

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

As soon as I remove the package it works.

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

thanks

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.

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

Unrecognized font family 'Ionicons'

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

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

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

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

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

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

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.

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?

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

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

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.

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

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?

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?

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.

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

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

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

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

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.

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

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.

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>