How to remove or change a effect created by onpressing a button in react native

Question

I am using a simple icon from Ionicons and using it as a button by using onpress props. but issue is when ever I pressed setting icon ,it created a square effect as shown in below screenshot image. may I ask how can I either disable it or change the design to circle.

import { View, StyleSheet,Pressable } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

//
export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
   
    <View>
    <Ionicons name='settings' size={24} color={'black'} onPress={() => {console.log("bingo")}} />

</View>

  </View>
  );
}

const styles = StyleSheet.create({
 
});

code working can be found here using expo ...

In this link ..

Answer 1

I believe you need wrap ionicons withing TouchableOpacity component ..

  <TouchableOpacity onPress={() => setIconColor('brown')} >
  
          <Ionicons
           name='settings'
           size={24}
           color={'red}
         />


</TouchableOpacity>

Answer 2

You can use Pressable to wrap around your IonIcon.

<Pressable
  style={({ pressed }) => ({
    backgroundColor: pressed ? '#98eabf' : '#f4fcf5',
  })}
>
  {({ pressed }) => (
    <Ionicons name='settings' size={24} color={pressed ? 'red' : iconColor} />
  )}
</Pressable>

Learn more from official docs, [Pressable] - https://reactnative.dev/docs/pressable