CODEWITHSUNDEEP
react-nativeshadowreact-native-stylesheet
Chirag Shah
Chirag Shah

Reputation: 3016

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>

Upvotes: 0

Views: 1079

Answers (1)

Arbnor
Arbnor

Reputation: 2362

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

Upvotes: 1

Related Questions