0

I use button in react-native-paper with icon. I need to add a shadow style only to the icon of the button. The only available option I found was to add an elevation to the button. But it is applied to the whole button instead of applying only to the icon of the button.

The code of button:

<Button
  icon={icon}
  onPress={onPress}
  size={size}
  color={color}
  animated={animated}
  disabled={disabled}
  style={styles.btnStyles}
/>

The Style of button to add shadow:

btnStyles: {
  elevation: 40,
  shadowColor: '#000',
  backgroundColor: 'rgba(0,0,0,0)',
},

The result:
enter image description here
(Here you can see that the shadow is applied to the button, not to the icon inside.)

How can I solve above issue and add a shadow only to the icon?

Thanks in advance.

Jane Lestra
  • 1
  • 1
  • There is no option to style icon in react-native-paper, so you can design your own custom with TouchableOpacity according to your requirement. – Alok Singh May 10 '22 at 09:04

0 Answers0