DEV Community

chandra penugonda
chandra penugonda

Posted on

React native Bottom Box-shadow

covers:- Platform specific box-shadow

The Drop shadows in iOS are created using iOS-specific properties but in Android , elevation property is used to create depth.However, Android elevation property produces only a minor shadow effect, far inferior to the shadows produced in iOS

For iOS, below properties are used

shadowColor: '#000',
shadowOffset: {width: 1, height: 3},
shadowOpacity: 0.2,
Enter fullscreen mode Exit fullscreen mode

All properties are self explanatory

For Android,

elevation: 4,
Enter fullscreen mode Exit fullscreen mode

Here's an example on how to use apply them

const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: {width: 1, height: 3},
        shadowOpacity: 0.2,
      },
      android: {
        elevation: 4,
      },
    }),
  },
});
Enter fullscreen mode Exit fullscreen mode

Top comments (0)