CODEWITHSUNDEEP
react-native
thurt
thurt

Reputation: 912

react-native how to customize android elevation shadow

Using android-specific style rule, elevation, I get a nasty "halo" effect when using. for example, this image shows elevation: 20:

bigger "halo" effect

Even a small elevation 1,2, or 3 gives the appearance that the element is "haloed"/has a border (bad)

smaller "halo" effect

How can I add more customization to the android-specific shadow to get rid of halo effect. iOS has specific rules like shadowOpactiy, shadowRadius, shadowOffset–but I don't see anything for android.

Upvotes: 11

Views: 3290

Answers (1)

RegularGuy
RegularGuy

Reputation: 3676

According to the official documentation there is no such thing as shadowopacity or any way to change the default shadow since is there by design, by "material design" Source: https://developer.android.com/training/material/shadows-clipping

But what you can do is to use a component with a dummy view that has the desired border and then just use it in your render function like

render(){
  <View style={{flex:1}}>
    <Viewwithborder>
     //pass the item you want to have custom elevation here
    </Viewwithborder>
  </View>
}

and in your custom "viewwithborder" you just do this

   render(){
   <View style={{styles.CustomElevationStyle}}>
      {this.props.children}
   </View> 
}

Upvotes: 1

Related Questions