react-native-action-button

react-native-action-button copied to clipboard

I have huge problem with adding shadow to the ActionButton, even if ShadowHide is false, there is no shadow under the button, i tried to add style to param ShadowStyle, but this isn't working. Could you help me ?

My ActionButton definition:

<ActionButton
            buttonColor={variables.brandDanger}
            size={55}
            position="left"
            icon={
              <Icon
                name="ios-information-circle-outline"
                style={{ fontSize: 25 }}
              />
            }
          shadowStyle={{
              shadowColor: "#000000",
              shadowOpacity: 0.8,
              shadowRadius: 2,
              shadowOffset: {
                height: 1,
                width: 0
              }
            }}
}

I've started to face this same issue recently, after an update from version 2.6.x to 2.8.1.

There was a commit (3d9be2c9bda84ebe8261487d898a12c4bf2add95) the breaks the shadow on Android. I couldn't have time to understand why but I notice that the fixNativeFeedbackRadius change the style on the parentView of the main button.

Setting fixNativeFeedbackRadius = true on the component props temporarily enable the shadow.

Thanks a lot @tiendv89 for this quick fix :)

So the finall code is?:

<ActionButton buttonColor={variables.brandDanger} size={55} position="left" fixNativeFeedbackRadius = {true} icon={ <Icon name="ios-information-circle-outline" style={{ fontSize: 25 }} /> } shadowStyle={{ shadowColor: "#000000", shadowOpacity: 0.8, shadowRadius: 2, shadowOffset: { height: 1, width: 0 } }} }

Because I'm still not seeing the shadow

fixNativeFeedbackRadius broke the position={center} for me (not centered in the middle exactly).

I rolled back to 2.7.2, and everything's working.

Thanks :)

Any update on this cause the shadow works perfectly on ios but on android just nothing.

Using fixNativeFeedbackRadius with postion={left} put the action button out of screen so it's not a solution.

Just simply change shadow style in shared.js file

export const shadowStyle = { shadowOpacity: 0.35, shadowOffset: { width: 0, height: 5 }, shadowColor: '#000', shadowRadius: 3, elevation: 0, <========== Change elevation };

There was a commit (3d9be2c) the breaks the shadow on Android. I couldn't have time to understand why but I notice that the fixNativeFeedbackRadius change the style on the parentView of the main button.

Setting fixNativeFeedbackRadius = true on the component props temporarily enable the shadow.

Excelent, this worked

There was a commit (3d9be2c) the breaks the shadow on Android. I couldn't have time to understand why but I notice that the fixNativeFeedbackRadius change the style on the parentView of the main button.

Setting fixNativeFeedbackRadius = true on the component props temporarily enable the shadow.

This is also working for 2.8.5

Any solution yet? I have tried everything but got no shadow.

Setting fixNativeFeedbackRadius to true shows the shadow but offsets the button if it is positioned in the enter or to the left. Any solution for that?

I would also love an update. Doing all of the above suggestions does nothing for me... wiht the exception of using fixNativeFeedbackRadius={true}, it just offsets the (shadowless) button about 30 pixels to the left (my position is set to 'center'). Would be much appreciated!