title: Change Button Color onPress (toggle functionality) React Native
body: <p>hope all is well. </p>
  
  <p>I seem to be having difficulty with a basic button functionality. All I need is the state of the class to change and the button style to change every-time the button is pressed. Unlike TouchableHighlight, I need to color change to stay until the button is pressed again (to go back to the original color).</p>
  
  <p>I have tried to use SwitchIOS but it doesn't seem to be easily styled into a circular button, and therefore doesn't really work out. I am a novice so still learning and would greatly appreciate your help. Here is what I have so far:</p>
  
  <pre><code>'use strict';
  
  var React = require('react-native');
  var Dimensions = require('Dimensions');
  var window = Dimensions.get('window');
  var Icon = require('react-native-vector-icons/FontAwesome');
  var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    NavigatorIOS,
    Image, 
    TouchableHighlight,
    TextInput,
  } = React;
  
  
  class LS1 extends React.Component{
  
    constructor(props){
      super(props);
      this.state = {
        paleo: false, 
        vegan: false, 
        vegetarian: false, 
        nutfree: false, 
        dairyfree: false, 
        healthy: false,
        glutenfree: false,
      }
    }
  
    SkipLogin() {
      var num = window.height/8.335;
      console.log(num);
    }
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Image source={require('image!LS1')} style={styles.bgImage}&gt;
            &lt;Text style={styles.icontext}&gt;Help us get to know your dietary lifestyle.&lt;/Text&gt;
  
            &lt;View style={styles.container}&gt;
              &lt;View style={{flex: 1, alignItems: 'center', flexDirection: 'row',justifyContent: 'center',marginTop:-20}}&gt;
                &lt;TouchableHighlight underlayColor='rgba(73,182,77,1,0.9)' style={styles.bubblechoice}&gt;
                    &lt;Image style={styles.bubblechoice} source={require('image!vegan')}&gt;
                      &lt;View style={styles.overlay}&gt;
                        &lt;Text style={styles.choicetext}&gt;Vegan&lt;/Text&gt;
                      &lt;/View&gt;
                    &lt;/Image&gt;
                &lt;/TouchableHighlight&gt;
                &lt;TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} &gt;
                  &lt;Image style={styles.bubblechoice} source={require('image!paleo')}&gt;
                    &lt;View style={styles.overlay}&gt;
                      &lt;Text style={styles.choicetext}&gt;Paleo&lt;/Text&gt;
                    &lt;/View&gt;
                  &lt;/Image&gt;
                &lt;/TouchableHighlight&gt;
                &lt;TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} &gt;
                  &lt;Image style={styles.bubblechoice} source={require('image!nutfree')}&gt;
                    &lt;View style={styles.overlay}&gt;
                      &lt;Text style={styles.choicetext}&gt;Nut-Free&lt;/Text&gt;
                    &lt;/View&gt;
                  &lt;/Image&gt;
                &lt;/TouchableHighlight&gt;
                &lt;TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} &gt;
                  &lt;Image style={styles.bubblechoice} source={require('image!glutenfree')}&gt;
                    &lt;View style={styles.overlay}&gt;
                      &lt;Text style={styles.choicetext}&gt;Gluten-Free&lt;/Text&gt;
                    &lt;/View&gt;
                  &lt;/Image&gt;
                &lt;/TouchableHighlight&gt;
              &lt;/View&gt;
  
              &lt;View style={{flex: 1, alignItems: 'center', flexDirection: 'row',justifyContent: 'center',marginTop:-50}}&gt;
                &lt;TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} &gt;
                  &lt;Image style={styles.bubblechoice} source={require('image!dairyfree')}&gt;
                    &lt;View style={styles.overlay}&gt;
                      &lt;Text style={styles.choicetext}&gt;Dairy-Free&lt;/Text&gt;
                    &lt;/View&gt;
                  &lt;/Image&gt;
                &lt;/TouchableHighlight&gt;
                &lt;TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} &gt;
                  &lt;Image style={styles.bubblechoice} source={require('image!vegetarian')}&gt;
                    &lt;View style={styles.overlay}&gt;
                      &lt;Text style={styles.choicetext}&gt;Vegetarian&lt;/Text&gt;
                    &lt;/View&gt;
                  &lt;/Image&gt;
                &lt;/TouchableHighlight&gt;
                &lt;TouchableHighlight underlayColor='rgba(73,182,77,1,1)' style={styles.bubblechoice} &gt;
                  &lt;Image style={styles.bubblechoice} source={require('image!healthy')}&gt;
                    &lt;View style={styles.overlay}&gt;
                      &lt;Text style={styles.choicetext}&gt;Healthy&lt;/Text&gt;
                    &lt;/View&gt;
                  &lt;/Image&gt;
                &lt;/TouchableHighlight&gt;
              &lt;/View&gt;
            &lt;/View&gt;
  
            &lt;Image source={require('image!nextbtn')} style={{resizeMode: 'contain', width:200, height:50, alignSelf: 'center', marginBottom: 50}}/&gt;
  
            &lt;TouchableHighlight onPress={this.SkipLogin.bind(this)} underlayColor='transparent'&gt;
              &lt;View style={{backgroundColor: 'transparent', alignItems: 'center', marginBottom: 8}}&gt;
                &lt;Text&gt;skip this step&lt;/Text&gt;
              &lt;/View&gt;
            &lt;/TouchableHighlight&gt;
  
          &lt;/Image&gt;
        &lt;/View&gt;
      );
    }
  };
  
  var styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'transparent'
    },
    bgImage: {
      flex: 1,
      width: window.width,
      resizeMode: 'cover',
    },
    icontext: {
      color: '#5d5d5d',
      fontWeight: '400',
      fontSize: 20,
      backgroundColor: 'transparent',
      paddingLeft: 10,
      alignItems: 'center',
      marginTop: window.height/2.2,
      textAlign: 'center',
      margin: 10,
    },
    bubblechoice_click: {
      height: window.height/8.335,
      borderRadius: (window.height/8.3350)/2,
      marginRight: 2,
      width: window.height/8.335,
    },
    bubblechoice: {
      height: window.height/8.335,
      borderRadius: (window.height/8.3350)/2,
      marginRight: 2,
      width: window.height/8.335,
    },
    row: {
      flex: 1,
      alignItems: 'center',
      flexDirection: 'row',
      justifyContent: 'center',
      marginTop: -30,
    },
    choicetext: {
      alignItems: 'center',
      alignSelf: 'center',
      color: 'white',
      marginTop: 35,
      fontWeight: '600',
      marginLeft: -18,
      fontSize: 14,
      flex: 1,
      textAlign: 'center'
    },
    overlay: {
      backgroundColor:'rgba(80,94,104,0.7)',
      height: 100,
      width: 100,
      alignItems:'center'
    },
  
  });
  
  module.exports = LS1;
  </code></pre>
  
  <p>And here is a visual of what that produces:</p>
  
  <p><a href="https://i.stack.imgur.com/0TKwa.png"><img src="https://i.stack.imgur.com/0TKwa.png" alt="Frame when all buttons are un-pressed"></a></p>
  
  <p>Here's what the button should look like after being selected:</p>
  
  <p><a href="https://i.stack.imgur.com/QEasM.png"><img src="https://i.stack.imgur.com/QEasM.png" alt="Frame when button is pressed"></a></p>