CODEWITHSUNDEEP
androidreact-native
Kim San
Kim San

Reputation: 805

How to change react native 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 ? 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>
    )
}

Upvotes: 2

Views: 3814

Answers (4)

Bisma Azher
Bisma Azher

Reputation: 749

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

Upvotes: 2

Noveen
Noveen

Reputation: 56

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

Upvotes: 0

Rahman Haroon
Rahman Haroon

Reputation: 1145

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 >

Upvotes: 0

Kamron Jurayev
Kamron Jurayev

Reputation: 97

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

Upvotes: 0

Related Questions