I've got a Text component inside a TouchableOpacity which I want to change the color depend on a var.

Here is my code:

import React, { Component } from react;

import { StyleSheet, Text, View, TouchableOpacity } from react-native;



var flag = false;



export default class MyTest extends Component {

  changeColor() {

    flag = true;

  }



  render() {

    return (

      <View style={styles.container}>

        <TouchableOpacity

          style={{ flex: 1, backgroundColor: #888888, margin: 20 }}

          onPress={this.changeColor.bind(this)}

        >

          <Text style={[{ color: blue }, flag ? { color: red } : false]}>

            One

          </Text>

        </TouchableOpacity>

      </View>

    );

  }

}



const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: center,

    backgroundColor: #F5FCFF

  }

});

I have tried to use this.state.textColor but no result. I've also tried to use that in styles variable but again, not working.

Any idea?