react-native-action-button
react-native-action-button copied to clipboard
Adding shadow to ActionButton in Android
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 theparentView
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!