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

change background color on click react native

i want to make my button update its background color from white to blue and when i click again i want to make the background white again. how can is it possible to do this from the stylesheet? if not how can i do this

button:

<TouchableOpacity style = {styles.circular}></TouchableOpacity>

style:

circular:{
    width:15,
    height:15,
    borderColor:'#55bcf6',
    borderRadius:5,
    borderWidth:3,
    backgroundColor:'white'
},
Tags:

3

Answers


  1. 0

    Try adding an onClick attribute, a color state and a dynamic style, something like this:

    const [color, setColor] = useState("white");

<TouchableOpacity
    onPress={() => setColor(color === 'blue' ? 'white' : 'blue')}
    style={{backgroundColor: color}}
>
</TouchableOpacity>
    Login or Signup to reply.
  2. 0

    using [] in style

    const [color, setColor] = useState("white");

 <TouchableOpacity
      onPress={() => setColor(color==='blue' ? 'white' : 'blue')}
         style={[styles. circular, {backgroundColor: color}]}
 >
 </TouchableOpacity>
    Login or Signup to reply.
  3. 0

    there you can you change the background Color and apply it with the default

    const [color, setColor] = useState("white");

 <TouchableOpacity
      onPress={() => setColor(color==='blue' ? 'white' : 'blue')}
         style={{...styles.circular, backgroundColor: color}}
 >
 </TouchableOpacity>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search