How to set shadows in React Native for android

Question

Hi am trying to set a shadow for my fab but my attempts has failed so far i tried setting shadow props but that is for ios only so i tried to play with elevation property but it doesn t look right   Here s what i tried   lt View style   width  56  height  56  elevation  2  borderRadius  28  marginBottom  3  backgroundColor   rgba 231 76 60 1     gt  lt  View gt    What i need to achieve

User · Answer

Another solution without using a third-party library is using elevation.

Pulled from react-native documentation. https://facebook.github.io/react-native/docs/view.html

(Android-only) Sets the elevation of a view, using Android's underlying elevation API. This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions.

elevation will go into the style property and it can be implemented like so.

<View style={{ elevation: 2 }}>
    {children}
</View>

The higher the elevation, the bigger the shadow. Hope this helps!

User · Answer

You can use my react-native-simple-shadow-view   This enables almost identical shadow in Android as in iOS No need to use elevation  works with the same shadow parameters of iOS  shadowColor  shadowOpacity  shadowRadius  offset  etc   so you don t need to write platform specific shadow styles Can be used with semi-transparent views Supported in android 18 and up

User · Answer

Generating shadows for a circle  react native  android  Based on the answers here  and on text that I found in github  react-native-shadow   I made few tests and thought that some people may find the following helpful    The tests are on a circular button The environment  Windows 10 PC  react-native using react-native-shadow  which doesn t work well for a circle  and react-native s elevation parameter  https   facebook github io react-native docs view-style-props elevation  with different values  running on an android emulator  genymotion    Here is how the screen looks like     Code   import React    Component   from  react   import   View  TouchableHighlight  Text   from  react-native   import   BoxShadow   from  react-native-shadow   export default class ShadowsTest extends Component      render         const shadowOpt           width  100        height  100        color    000         border  2        radius  50        opacity  0 8        x  3        y  3          style    marginVertical  5              return          lt View style    flex  1    gt           lt Header           text   Shadows Test     gt            lt View style    flexDirection   row   justifyContent   center     gt             lt View style    margin  10  alignItems   center                 justifyContent   center     gt               lt TouchableHighlight style                  position   relative                 width  100                height  100                backgroundColor    fff                 borderRadius  50                borderWidth  0 8                borderColor    000                    marginVertical 5                alignItems   center                 justifyContent   center                 overflow   hidden     gt                 lt Text style    textAlign   center     gt                  0  plain border                lt  Text gt               lt  TouchableHighlight gt             lt  View gt              lt View style    margin  10  alignItems   center                 justifyContent   center     gt               lt BoxShadow setting   shadowOpt   gt                 lt TouchableHighlight style                    position   relative                   width  100                  height  100                  backgroundColor    fff                   borderRadius  50                  borderWidth  1                  borderColor    aaa                      marginVertical 5                  alignItems   center                   justifyContent   center                   overflow   hidden     gt                   lt Text style    textAlign   center     gt                    1  RN shadow package                  lt  Text gt                 lt  TouchableHighlight gt               lt  BoxShadow gt             lt  View gt           lt  View gt            lt View style    flexDirection   row   justifyContent   center     gt             lt View style    margin  10  alignItems   center                 justifyContent   center     gt                 lt TouchableHighlight style                    position   relative                   width  100                  height  100                  backgroundColor    fff                   borderRadius  50                  borderWidth  1                  borderColor    aaa                      marginVertical 5                  alignItems   center                   justifyContent   center                   overflow   hidden                   shadowOffset    width  15  height  15                    shadowColor   black                   shadowOpacity  0 9                  shadowRadius  10                    gt                   lt Text style    textAlign   center     gt                    2  vanilla RN  shadow  may work on iOS                   lt  Text gt                 lt  TouchableHighlight gt             lt  View gt             lt View style    margin  10  alignItems   center                 justifyContent   center     gt                 lt TouchableHighlight style                    position   relative                   width  100                  height  100                  backgroundColor    fff                   borderRadius  50                  borderWidth  1                  borderColor    aaa                      marginVertical 5                  alignItems   center                   justifyContent   center                   overflow   hidden                   elevation  15                    gt                   lt Text style    textAlign   center     gt                    3  vanilla RN  elevation only  15                   lt  Text gt                 lt  TouchableHighlight gt             lt  View gt           lt  View gt            lt View style    flexDirection   row   justifyContent   center   marginBottom  30    gt             lt View style    margin  10  alignItems   center                 justifyContent   center     gt                 lt TouchableHighlight style                    position   relative                   width  100                  height  100                  backgroundColor    fff                   borderRadius  50                  borderWidth  1                  borderColor    aaa                      marginVertical 5                  alignItems   center                   justifyContent   center                   overflow   hidden                   elevation  5                    gt                   lt Text style    textAlign   center     gt                    4  vanilla RN  elevation only  5                   lt  Text gt                 lt  TouchableHighlight gt             lt  View gt             lt View style    margin  10  alignItems   center                 justifyContent   center     gt                 lt TouchableHighlight style                    position   relative                   width  100                  height  100                  backgroundColor    fff                   borderRadius  50                  borderWidth  1                  borderColor    aaa                      marginVertical 5                  alignItems   center                   justifyContent   center                   overflow   hidden                   elevation  50                    gt                   lt Text style    textAlign   center     gt                    5  vanilla RN  elevation only  50                   lt  Text gt                 lt  TouchableHighlight gt             lt  View gt           lt  View gt         lt  View gt

User · Answer

Set elevation  3 and you should see the shadow in bottom of component without a 3rd party lib  At least in RN 0 57 4

User · Answer

for an android screen you can use this property elevation      for example     HeaderView       backgroundColor   F8F8F8       justifyContent  center       alignItems  center       height 60      paddingTop 15         Its for IOS     shadowColor    000       shadowOffset    width  0  height  2        shadowOpacity  0 2          its for android      elevation  5      position  relative

User · Answer

Just use  elevation  property to get shadow in android  something like below  const Header        gt           const   textStyle  viewStyle     styles      return          lt View style  styles viewStyle  gt               lt Text style  styles textStyle  gt Albums lt  Text gt         lt  View gt            const styles         viewStyle           backgroundColor   f8f8f8           justifyContext  center           alignItems   center           padding 16          elevation  2

User · Answer

The elevation style property on Android does not work unless backgroundColor has been specified for the element   Android - elevation style property does not work without backgroundColor  Example        shadowColor   black     shadowOpacity  0 26    shadowOffset    width  0  height  2     shadowRadius  10    elevation  3    backgroundColor   white

User · Answer

The following will help you to give each Platform the styling you want     import   Text  View  Platform   from  react-native            lt View style  styles viewClass  gt  lt  View gt           const styles     viewClass        justifyContent   center       alignItems   center       height  60         Platform select           ios                shadowColor    000               shadowOffset    width  0  height  2                shadowOpacity  0 2                     android                elevation  1

User · Answer

I had the same problem shadow elevation not showing on Android with elevation 2  Then i noticed that the view element is fool width  so I added margin 2 to the view element and elevation properly appeared   Style       margin  2      shadowColor    000       shadowOffset          width  0        height  1            shadowOpacity  0 2      shadowRadius  1 41      elevation  2   Android    iOS

User · Answer

For some reason it only worked for my by adding borderColor   transparent   or any other color   My style output looks like this             borderColor   transparent      Required to show shadows on Android for some reason              shadowColor    000           shadowOffset              width  0            height  0                     shadowOpacity  0 3          shadowRadius  5           elevation  15

User · Answer

elevation still no work in Expo v30  amp  amp  React-native v0 55 4   I have tried the all answers here    Also  don t try react-native-shadow - their shadow rendering is terrible   So  I am continuing the research

User · Answer

You can try     ios     shadowOpacity  0 3  shadowRadius  3  shadowOffset        height  0      width  0      android elevation  1

User · Answer

UPDATE  Adding the CSS property elevation  1 renders shadow in Android without installing any 3rd party library     see the other answers     One way to get shadows for android is to install react-native-shadow   Example  adapted from the readme    import React    Component   from  react   import   TouchableHighlight   from  react-native    import   BoxShadow   from  react-native-shadow    export default class ShadowButton extends Component     render         const shadowOpt           width  160        height  170        color    000         border  2        radius  3        opacity  0 2        x  0        y  3        style    marginVertical  5               return          lt BoxShadow setting  shadowOpt  gt           lt TouchableHighlight           style                position   relative               width  160              height  170              backgroundColor    fff               borderRadius  3                 marginVertical  5              overflow   hidden                        gt                         lt  TouchableHighlight gt         lt  BoxShadow gt

User · Answer

I added borderBottomWidth  0 and it worked fine for me in android

User · Answer

In short  you can t do that in android  because if you see the docs about shadow only Support IOS see doc  The best option you can install 3rd party react-native-shadow

User · Answer

Also i d like to add that if one s trying to apply shadow in a TouchableHighlight Component in which child has borderRadius  the parent element  TouchableHighlight  also need the radius set in order to elevation prop work on Android

User · Answer

I have implemented CardView for react-native with elevation  that support android All version  and iOS  Let me know is it help you or not  https   github com Kishanjvaghela react-native-cardview  import CardView from  react-native-cardview   lt CardView           cardElevation  2            cardMaxElevation  2            cornerRadius  5  gt             lt Text gt                Elevation 0            lt  Text gt   lt  CardView gt

[react-native] How to set shadows in React Native for android?

Examples related to react-native