Does buttonColor support rgba trancparency?

[greenais]

Hey, really great component, big thanks first of all!

Strange issue with custom icon component in ActionButton.Item
I have this result (unwanted transparent circles are marked with red arrows):

With this code:

<ActionButton
          buttonColor='rgba(104, 231, 60, 0.35)'
          offsetY={10} spacing={10}
          onLongPress={this.props.all}
          size={button}
          >
          <ActionButton.Item
            buttonColor='rgba(90, 141, 242, 0.35)'
            onPress={this.props.male}
            size={button}
            >
              <Image source={require('a_resources/icons/male.png')}
              style={{
                height: 20,
                width: 20,
                  }}
                />
          </ActionButton.Item>
          <ActionButton.Item
            buttonColor='#f05757'
            onPress={this.props.female}
            size={button}>
            <FemaleButtonIcon />
          </ActionButton.Item>
        </ActionButton>

FemaleButtonIcon is just a wrapper for similar to affected one - it contains the same Image component

So in both buttons where buttonColor set as rgba with transparency are these circles. With solid color set there is no issues.
Does buttonColor support rgba trancparency?
Or did I miss something?

[mastermoo]

I just used rgba value for buttonColor and it works on IOS. Is this on Android?

PS: Your button items are a bit off to the left. You probably need to upgrade to v2.5

[greenais]

Yes, it's Android for now.
Strange, I installed react-native-action-button 2 days ago with recommended in docs
npm i react-native-action-button --save
I was prety sure that this way npm installs the latest version,
but I checked - it was 2.0.22, now upgraded to 2.5 manually.

2.5 didn't resolve circles but added new issue: if sapcing is set to less than 40 (in my case) - it gets half of size for the first child:

Code (I commented size in order to check it out-of-the-box):

<ActionButton
          buttonColor='rgba(104, 231, 60, 0.25)'
          offsetY={10} spacing={15}
          onLongPress={this.props.all}
          // size={button}
          >

What else would you recommed to consider?

[mastermoo]

I fucking hate android. I'll commit something in the next minutes. Maybe it fixes some of the issues

[greenais]

Platforms are so f@cking special, you are damned right(
Thank you.

Will it be available git only or via npm as well?

[mastermoo]

npm as well. please check out v2.5.1

[greenais]

No, Android is too obstinate(
Changed a bit but in general - the same: circles are larger now, cutting threshold is 20, it's more or less acceptable, though. But those circles((
I use png images with transparent background, if it matters somehow.

<ActionButton
          buttonColor='rgba(104, 231, 60, 0.25)'
          offsetY={15} spacing={10}
          onLongPress={this.props.all}
          // size={button}
          >

[mastermoo]

Hm too bad. I'll try later again, but the current state of this library is not acceptable.

[greenais]

Thank you in advance.
Sure there is option to use solid background for Android (why it's so special? no native modules used AFAIU), but for lists it could be quite bothering if button completely hides content underneath...

[mastermoo]

You are right, this lib does not use any native modules, yet it still doesn't work on both platforms. Android simply sucks. There are too many things that work on iOS, but don't work on Android.

[greenais]

FYI: it seems it has somthing to do with shadow.
Once I set
hideShadow={true}
the bothering circles have disappeared (with shadow, off course))
Temporary solution for now.

[mastermoo]

In v2.6.0 the overall appearance should look fine on android. The transparency bug couldn't be fixed, however. I think this issue is far bigger than this library.