CODEWITHSUNDEEP
androidreactjsreact-native
jenna_3108
jenna_3108

Reputation: 435

React Native - change icon color on press

When the 'check' icon is being pressed, I want it to change color from default red to green. In my case, while I have another function for onpress, I use this conditional color statement

<Icon name="check" size={20} color={this.state.isCompleted ? '#1DA664' : '#DE5347'} onPress={() => this.isCompleted(rowData)} isCompleted={this.state.isCompleted}/>

I call this function for onpress

isCompleted(rowData){
     if (this.state.status != 'new'){
  this.itemsRef.child(rowData.id).update({
    status: 'completed'
  });
  this.setState({
    isCompleted: true
  })
}
}

When one of the icon in a list view is pressed, the icon changed color but everytime the color change is the icon of last item.

As shown in pic,

enter image description here

When I press on item 'cook lunch' , it should be the icon in cook lunch turn to green. Instead, the icon in the last item 'hello' changed. What did I do wrong?

Upvotes: 0

Views: 32464

Answers (2)

manuel fernando ramirez villam
manuel fernando ramirez villam

Reputation: 31

Solve this problem by creating a button component with a state and touchableOpacity.

import React, {useState} from 'react';
import {View, TouchableOpacity} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

const Boton = () => {
  const [estado, setEstado] = useState(false);

  const agregarFavoritos = () => {
    setEstado(!estado);
  };

  console.log(estado);

  return (
    <View>
      <TouchableOpacity onPress={() => agregarFavoritos()}>
        <Ionicons
          name={estado ? 'md-heart' : 'md-heart-empty'}
          size={20}
          color="#ff6347"
        />
      </TouchableOpacity>
    </View>
  );
};

export default Boton;

Then I import the component where I want it to be displayed

import Boton from '../Botones/Boton';

Then I call the 'Boton' where I imported my component 'Boton'.

<Boton/>

Ready, the state is controlled by the component 'Boton'.

Upvotes: 3

Saravanabalagi Ramachandran
Saravanabalagi Ramachandran

Reputation: 8879

Use touchableHighlight, it has onMouseDown and onMouseUp equivalent functions

<TouchableHighlight
  onPress={()=>{console.log("pressed");}}
  onShowUnderlay={()=>this.setState({touchableHighlightMouseDown:true})}
  onHideUnderlay={()=>this.setState({touchableHighlightMouseDown:false})}>
    <View>
        # Your other Views here
        <Icon color={this.state.touchableHighlightMouseDown?'#333333':(this.state.isCompleted ? '#1DA664' : '#DE5347')}
    </View>
</TouchableHighlight>

If you just want some feedback (and not any specific color changes) during mouseDown activity, you can simply use one of or both of the following properties

activeOpacity=0.8
underlayColor={'#EEE'}

Upvotes: 1

Related Questions