How do I render a shadow

Question

How do I render a shadow on a View  I ve tried many combinations of shadowColor  shadowOffset  shadowOpacity  and shadowRadius  which seem to do nothing  I am sure the style is applied correctly  since other attributes I ve set work

User · Answer

I m using Styled Components and created a helper function for myself  It takes the given Android elevation and creates a fairly equivalent iOS shadow  stylingTools js import   css   from  styled-components native        REMINDER               Shadows do not show up on iOS if  overflow  hidden  is used   https   react-native canny io feature-requests p shadow-does-not-appear-if-overflow-hidden-is-set-on-ios        eslint-disable-next-line import prefer-default-export export const crossPlatformElevation    elevation  number   0    gt  css       Android - native default is 4  we re setting to 0 to match iOS       elevation    elevation         iOS - default is no shadow  Only add if above zero        elevation  gt  0      amp  amp  css        shadow-color  black        shadow-offset  0px   0 5   elevation px        shadow-opacity  0 3        shadow-radius    0 8   elevation px             To use import styled from  styled-components native   import   crossPlatformElevation   from  quot       lib stylingTools quot    export const ContentContainer   styled View    background  white      crossPlatformElevation 10

User · Answer

Use elevation to implement shadows on RN Android  Added elevation prop  27   lt View elevation  5  gt    lt  View gt

User · Answer

You have to give elevation prop to View       lt View elevation  5  style  styles container  gt      lt Text gt Hello World   lt  Text gt    lt  View gt    styles can be added like this    const styles   StyleSheet create         container           padding 20          backgroundColor   d9d9d9           shadowColor    000000           shadowOpacity  0 8          shadowRadius  2          shadowOffset              height  1            width  1

User · Answer

I am using React-Native 0 40 and below code works for me both on IOS and Android    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    class MainApp extends Component     render         return          lt View style  styles container  gt            lt View elevation  5  style  styles buttonContainer  gt             lt Text style  styles textStyle  gt Shadow Applied lt  Text gt           lt  View gt         lt  View gt                const styles   StyleSheet create     container        flex  1      justifyContent   center       alignItems   center       backgroundColor    FFFFFF         textStyle        color    FFFFFF         buttonContainer        backgroundColor    2E9298       borderRadius  10      padding  10      shadowColor    000000       shadowOffset          width  0        height  3            shadowRadius  5      shadowOpacity  1 0          Tested on iPhone     Edit  Comment from   James  Thanks   Note  For those on android  the backgroundColor is critical  I was using View as a container for another element and couldn t get a shadow until I specified a background color

User · Answer

It appears to be a bug in React native that shadowOpacity is set to type CGFloat instead of float according to CALayer doc  use iPhone 5 simulator before it s fixed   CGFloat is float in older devices     The React Native issue which is tracking this is   https   github com facebook react-native issues 449

User · Answer

by styled component       const StyledView   styled View        border-width  1        border-radius  2        border-color   ddd        border-bottom-width  0        shadow-color   000        shadow-offset   width  0  height  2         shadow-opacity  0 8        shadow-radius  2        elevation  1           or by styles  const styles   StyleSheet create     containerStyle        borderWidth  1      borderRadius  2      borderColor    ddd       borderBottomWidth  0      shadowColor    000       shadowOffset    width  0  height  2        shadowOpacity  0 8      shadowRadius  2      elevation  1      marginLeft  5      marginRight  5      marginTop  10

User · Answer

All About margins  this works in Android  but did not test it in ios    import React    PureComponent   from  react  import PropTypes from  prop-types  import   View  Platform   from  react-native  import EStyleSheet from  react-native-extended-stylesheet   const styles   EStyleSheet create       wrapper            margin   -1 4rem             shadow            padding   1 4rem           margin   1 4rem           borderRadius  4          borderWidth  0          borderColor   transparent              Platform select               ios                    shadowColor   rgba 0 0 0  0 4                    shadowOffset    height  1  width  1                    shadowOpacity  0 7                  shadowRadius   1 4rem                             android                    elevation   1 4rem                                      container            padding  10          margin   -1 4rem           borderRadius  4          borderWidth  0          borderColor    Fff           backgroundColor    fff            class ShadowWrapper extends PureComponent       static propTypes             children  PropTypes oneOfType               PropTypes element              PropTypes node              PropTypes arrayOf PropTypes element             isRequired            render              return               View style  styles wrapper                  View style  styles shadow                      View style  styles container                           this props children                      View                 View             View                    export default ShadowWrapper

User · Answer

viewStyle         backgroundColor    F8F8F8       justifyContent   center       alignItems   center       height  60      paddingTop  15      shadowColor    000       shadowOffset    width  0  height  2        shadowOpacity  0 2      marginBottom  10      elevation  2      position   relative       Use marginBottom  10

User · Answer

panel           ios     backgroundColor    03A9F4       alignItems   center        shadowOffset   width  0  height  13        shadowOpacity  0 3      shadowRadius  6          android  Android  5 0      elevation  3        or you can use react-native-shadow for android

[javascript] How do I render a shadow?

stylingTools.js

To use

Examples related to javascript

Examples related to react-native