How to change react native TouchableOpacity color when pressed

user_15529116 0
Viewed 1268

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 ? I want to use state for this. I already prepare some state for it.

Here's my code:

const Task = (props) => { 

  const[pressed, setPressed] = useState(false);
  const onPressHandler = () =>{
    setPressed(!pressed);
  };

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

        </View>
    )
}
react-native android
4 Answers

Hey instead of using TouchableOpacity You can also use Pressable

<Pressable
style={({ pressed }) => [
  {
    backgroundColor: pressed
      ? 'rgb(210, 230, 255)'
      : 'white'
  },
]}>
        <Text style={getTextStyle()}>{text}
       </Text>
</Pressable>

ref: https://reactnative.dev/docs/pressable

user_110265200

you can only change activeOpacity property which defaults to 0.2. If you want you Touchable component to tint with some other color, then you will have to create custom TouchableComponent using TouchableHighlight

user_110384210

You can add some inline style your TouchableOpacity by comparing the state

<TouchableOpacity style=[{
         backgroundColor: pressed ? 'green' : 'red
      }, styles.taskList]
      onPress={() => onPressHandler()}
>
  <Text style={styles.statusText}>On Going</Text>
</TouchableOpacity >
user_139130530 
const Task = (props) => {
    const [text, setText] = useState('Update')
    const [taskCompleted, setTaskCompleted] = useState(null)

    const onPressHandler = () => {
      setText('On Going...')
      setTimeout(() => {
        //Based on your task set status
        setText('Success')
        setTaskCompleted(true)

        //Error sample code
        // setText('Error')
        // setTaskCompleted(false)
      }, 2000)
    }

    const getTouchableOpacityStyle = () => {
      if (taskCompleted === null) {
        return styles.touchableOpacityDefaultstyle
      }
      return taskCompleted ? styles.touchableOpacityStyleOnComplete : styles.touchableOpacityStyleOnError
    }

    const getTextStyle = () => {
        if (taskCompleted === null) {
        return styles.textDefaultStyle
    }
        return styles.textStyleOnTaskExecuted
    }

    return (
      <View style={styles.container}>
        <Text>{props.text}</Text>
        <TouchableOpacity onPress={onPressHandler} style={getTouchableOpacityStyle()}>
            <Text style={getTextStyle()}>{text}</Text>
        </TouchableOpacity>
      </View>
    )
}

const styles = StyleSheet.create({
    container: {
      justifyContent: 'center',
      alignItems: 'center'
    },
    touchableOpacityDefaultstyle: {
      backgroundColor: 'grey',
      padding: 10
    },
    touchableOpacityStyleOnComplete: {
      backgroundColor: 'green',
      padding: 10
    },
    touchableOpacityStyleOnError: {
      backgroundColor: 'red',
      padding: 10
    },
    textDefaultStyle: {
      color: 'black'
    },
    textStyleOnTaskExecuted: {
      color: 'white'
    }
})
export default Task
user_57895450
Related