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?

score 12 · Accepted Answer · edited Aug 21 '19 at 20:26

'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);

how can it work in ListView. I will used same code in listView but not changed colors in it. — Kirit Modi, Oct 10 '17 at 06:40
this only works for a single item, not a bunch of items, like a list. — DrCord, Aug 21 '19 at 20:30

score 7 · Answer 2 · answered Dec 04 '15 at 15:05

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;
  }
}

score 7 · Answer 3 · answered Sep 03 '18 at 20:20

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>

How to implement this for multiple tabs, at a time single tab should be active remaining tabs would be inactive and how to set for images too? — Anilkumar iOS - ReactNative, Jan 31 '19 at 12:17

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

3 Answers3

Linked