How to change image and text color when clicking using react-native?

Question

I am using TouchableHighlight, but I can change only background color using underlayColor. But how to change other content?

Answer 1

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} = React;

var  colors = ['#ffffd', '#efefef', 'red', '#666', 'rgba(0,0,0,.1)', '#ededed'];
var backgroundcolors = ['green', 'black', 'orange', 'blue', 'purple', 'pink'];

var SampleApp = React.createClass({

  getInitialState() {
    return {
        color: 'orange',
      backgroundColor: 'rgba(0,0,0,.1)'
    }
  },

  _changeStyle() {
    var color = colors[Math.floor(Math.random()*colors.length)];
    var backgroundColor = backgroundcolors[Math.floor(Math.random()*backgroundcolors.length)];
    this.setState({
        color: color,
      backgroundColor: backgroundColor
    })
  },

  render: function() {
    return (
      
         this._changeStyle() }
        style={{ backgroundColor: this.state.backgroundColor, height: 60, flexDirection: 'row', alignItems:'center', justifyContent: 'center' }}>
                CHANGE COLOR
        

        
          Click Me
        
      
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:60
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);