Search code examples
react-nativeshadowreact-native-stylesheet

React native need to render rounded shadow on rounded button

I need to render rounded shadow on rounded button. Shadow should be render like given in image but some how i am not able to render like that.

enter image description here

But it is not render properly and display like below.

enter image description here

It looks like below

enter image description here

Style will be like this

const styles = StyleSheet.create({
  buttonStyle : {
    height: 60,
    width: 60, 
    marginRight: 15,
    shadowColor: "#4e4f72",
    shadowOpacity: 0.2,
    shadowRadius: 30,
    shadowOffset: {
      height: 0,
      width: 0
    },
    borderRadius: 30,
    elevation: 30,
  },
})

View style

    <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 15 }}>
    
       <Image style={styles.buttonStyle} source={require('../images/google.png')} />
    
       <Image style={styles.buttonStyle} source={require('../images/facebook.png')} />
    
       <Image style={{ height: 60, width: 60, }} source={require('../images/instagram.png')} />
    
    </View>
Solution

  • Can you try to place your image inside a View. Remove the shadow styling from the image and place it to the View. In my case this is working.

      <View
    style={{
      height: 60,
      width: 60,
      marginRight: 15,
      shadowColor: '#4e4f72',
      shadowOpacity: 0.2,
      shadowRadius: 30,
      shadowOffset: {
        height: 0,
        width: 0,
      },
      borderRadius: 30,
      elevation: 30,
      alignItems: 'center',
      justifyContent: 'center',
    }}
  >
    <Image style={{ height: 60, width: 60, borderRadius: 30 }} />
  </View>

    Don't forget to add the require back to the Image component