DEV Community

chandra penugonda
chandra penugonda

Posted on

5 2

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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay