[SOLVED] Is there a property that makes Ionicons have some press feedback?

Is there a property that makes Ionicons have some press feedback?

I'm using Ionicons from @expo/vector-icons in some parts of my application. I'm trying to ensure that all pressable elements in my UI have some sort of visual feedback. I checked the vector-icons API and didn't find any relevant properties but I just want to ensure I know the best way to achieve this.

My guess is that I would have to wrap all of the <Ionicons /> in a TouchableOpacity or another component of its type, other than TouchableWithoutFeedback. Is this correct? Is there a more direct way to achieve this? And is my suggestion the way to go?

I don't think code is relevant here, but here it is anyway:

import React from 'react'
import { StyleSheet } from 'react-native'
import { Ionicons } from '@expo/vector-icons'
import PropTypes from 'prop-types'

const HeaderIcon = (props) => {
    return (
        <Ionicons
            style={styles.icon}
            name={props.name}
            color={props.color}
            onPress={() => {
                props.onPress()
            }}
        />
    )
}

Solution

You can wrap your icon component with TouchableHighlight

it has underlayColor property where you can pass color.

e.g

      <TouchableHighlight onPress={onPress} underlayColor="red">
        <View style={styles.button}>
          <Text>Touch Here</Text>
        </View>
      </TouchableHighlight>

and also have two other underlay callbacks such as onShowUnderlay and onHideUnderlay these callbacks can be used in different scenarios

Like onShowUnderlay you can change icon color or trigger any other function.