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

'use strict';var React = require('react-native');var {  AppRegistry,  StyleSheet,  Text,  View,  TouchableHighlight} = React;var  colors = ['#ddd', '#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 (      <View style={styles.container}>        <TouchableHighlight         onPress={ () => this._changeStyle() }        style={{ backgroundColor: this.state.backgroundColor, height: 60, flexDirection: 'row', alignItems:'center', justifyContent: 'center' }}>                <Text style={{ fontSize: 22, color: this.state.color }}>CHANGE COLOR</Text>        </TouchableHighlight>        <TouchableHighlight style={{ backgroundColor: 'red', height: 60, flexDirection: 'row', alignItems:'center', justifyContent: 'center' }}>          <Text style={{ color: 'white', fontSize:22 }} >Click Me</Text>        </TouchableHighlight>      </View>    );  }});var styles = StyleSheet.create({  container: {    flex: 1,    marginTop:60  }});AppRegistry.registerComponent('SampleApp', () => SampleApp);

This answer is assuming you want to change the color just while the button is depressed:

Use TouchableWithoutFeedback and define your own onPressIn and onPressOut functions to change the text color.

<TouchableWithoutFeedback onPressIn={this.colorText}  onPressOut={this.resetText}>   <Text style={[styles.textColored()]}>MyText</Text></TouchableWithoutFeedback>colorText: function() {  this.setState({textColored: true});},resetText: function() {  this.setState({textColored: false});},textColored: function() {  if(this.state.textColored) {    return styles.textColored;  } else {    return styles.textNormal;  }}

With TouchableHighlight you can do it like this

state = { selected: false };setSelected(selected: boolean) {    this.setState({ selected: selected });}textStyle() {    return this.state.selected ? styles.textSelected : styles.text;}

And then in the render function

<TouchableHighlight    underlayColor={Theme.palette.accent}    onPress={() => onPress()}    onShowUnderlay={() => this.setSelected(true)}    onHideUnderlay={() => this.setSelected(false)}>    <Text style={this.textStyle()}>{text}</Text></TouchableHighlight>