CODEWITHSUNDEEP
androidreact-native
Kim San
Kim San

Reputation: 805

How to change reactnative TouchableOpacity color when pressed

Hello guys so now I'm trying to create to do list application using react native and I'm able to make the user add task. Now I want the user to be able to update the Task status by pressing some button (touchableOpacity). I want the touchableOpacity to change color from red to green (if the task is finished) and turn the color from green to red if the task haven't finished. Can someone help me please ?

Here's my code:

const Task = (props) => { 
    return (
        <View style={styles.wrapper}>
            <Text style={styles.taskList}>{props.text}</Text>
            <TouchableOpacity style={styles.taskStatus}>
                <Text style={styles.statusText}>On Going</Text>
            </TouchableOpacity>
        </View>
    )
}

const styles = StyleSheet.create({ 
    wrapper:{
        flexDirection:'row',
        justifyContent:'space-between',
    },

    taskStatus:{
        left: 90,
        backgroundColor:'#ff3126',
        width: 75,
        height: 60,
        textAlign:'center',
        justifyContent:'center',
        alignItems:'center',
    },

    taskList: {
        padding:15,
        marginLeft: 3,
        fontSize: 18,
        color: 'black',
    }
  });

Upvotes: 1

Views: 138

Answers (1)

Sahesh
Sahesh

Reputation: 885

There are few ways to do that. This is one method you can try.

state={
  backgroundColor: red,
  pressed: false,
 };


changeColor(){
 //Write the condition- if the task is over inside if condition along with !this.sate.pressed
 if(!this.state.pressed){ 
   this.setState({ pressed: true,backgroundColor: ‘green’}); 
} else { 
   this.setState({ pressed: false, backgroundColor: ‘red’}); 
}


<TouchableOpacity
 style={{backgroundColor:this.state.backgroundColor}} 
  onPress={()=>this.changeColor()} >
 <Text style={styles.text}>1 Button</Text> 
</TouchableOpacity>

Upvotes: 1

Related Questions