Is there a way to set the underlayColor?

[LongicornYu]

When pressed on the icon, there is a squared background color. Is there a way to set it as transparent or other colors like the underlayColor property for components in react-native-elements Header.

[hampustagerud]

Do you have some example code?

[RnbWd]

any tips / tricks?

[alburdette619]

@hampustagerud I am seeing this issue too, I have set underlayColor="white"/"transparent and tried activeOpacity={1} but when the Icon.Button is pressed in, it shows a grey background.

<View style={style.drawerHeaderIconContainer}>
  <Icon.Button
    name="small-x"
    size={32}
    color={colors.lightGrey}
    backgroundColor="white"
    style={style.clearButton}
    iconStyle={style.clearIcon}
    onPress={closeDrawer}
    underlayColor="transparent"
    activeOpacity={1}
    />
</View>

  clearButton: {
    backgroundColor: 'white',
    alignSelf: 'flex-end',
    padding: 0,
  },
  clearIcon: {
    marginRight: 7,
    marginLeft: 2,
  },

Here's a video: https://drive.google.com/file/d/1PNRuv80lrUxf9G5FjKozYtkG0fSptT-d/view?usp=sharing

[hampustagerud]

There might be some issues with how the Icon.Button class passes props to the TouchableHighlight element. When I create buttons with icons I just wrap an Icon with a TouchableOpacity wrapper which handles the touches. If you look at the source you can see how the button is implemented and you could easily create your own component which you would get full control over 🙂

[oblador]

This should work in 6.0.0 if not before.

[Manengelo]

const BLUE = "#428AF8"; const LIGHT_GRAY = "#D3D3D3";

state = { isPress:false, };

onIconPress = async()=> { this.props.onIcon(); await this.setState({isPress:true}); await setTimeout(() => this.setState({isPress: false}), 100); };

<Icon onPress={this.onIconPress} color={isPress ? BLUE : LIGHT_GRAY } />

[duongthetrung]

To set it as transparent you should use prop: activeOpacity={true} (default is false) To set color when pressed button then you can use: underlayColor={'#FFFFFF'}

[akshgods]

no also im facing this issue, any help "react-native-vector-icons": "^9.1.0",

[cheymonty]

no also im facing this issue, any help "react-native-vector-icons": "^9.1.0",

<Icon suppressHighlighting={true} .../> works