Adding shadow to ActionButton in Android

[Yurrili]

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

[diegocouto]

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

[tiendv89]

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.

[davidroman0O]

Thanks a lot @tiendv89 for this quick fix :)

[mopitz199]

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

[amaury1093]

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

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

[ujjwalagrawal17]

Thanks :)

[ishigamii]

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.

[vaibsshukla]

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

[ymarin338]

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

[drdpedroso]

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

[muhammadtaha1998]

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

[muhammadtaha1998]

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?

[thebuddysystem]

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!