Question 274417 in React native Question posted in
The official React Native documentation can be found here.

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

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 ..

enter image description here

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    I believe you need wrap ionicons withing TouchableOpacity component ..

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


</TouchableOpacity>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search