CODEWITHSUNDEEP
javascriptandroidreactjsreact-native
MoKhajavi75
MoKhajavi75

Reputation: 2702

React Native Text color not working

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?

Upvotes: 16

Views: 73264

Answers (3)

Abdul Basit Rishi
Abdul Basit Rishi

Reputation: 2425

You have to give style to the Text for color.

 <Text style={styles.steelblue}>Sign Up</Text>

Give this style to Text.

const styles = StyleSheet.create({
  steelblue: {
    color: "steelblue",
  },
});

Upvotes: 0

sumit kumar pradhan
sumit kumar pradhan

Reputation: 653

try this example this may help you to solve problem.

import React, { Component } from 'react';
import { Platform, StyleSheet, View, Text } from 'react-native';


export default class App extends Component {

  render() {

    return (
      <View style={styles.container}>
        <Text style={[styles.setFontSize,styles.setColorRed]}> React Native Font example 1</Text>
        <Text style={[styles.setFontSize,styles.setColorPink]}> React Native Font example 2</Text>
        <Text style={[styles.setFontSize,styles.setColorPurple]}> React Native Font example 3</Text>
        <Text style={[styles.setFontSize,styles.setColorBlue]}> React Native Font example 4</Text>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  setFontSize: {
    fontSize: 20,
    fontWeight : 'bold' 
  },
  setColorRed : {
    color: '#f44336'
  },
  setColorPink :{
    color: '#e91e63'
  },
  setColorPurple :{
    color: '#9c27b0'
  },
  setColorBlue :{
    color: '#2196f3'
  },
});

Upvotes: 2

Tholle
Tholle

Reputation: 112777

The flag variable is not in your component state, so the component will not re-render when it changes.

Put it in your component state instead and toggle it with setState and it will work.

class MyTest extends Component {
  state = { flag: true };

  changeColor = () => {
    this.setState(previousState => {
      return { flag: !previousState.flag };
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={{ flex: 1, backgroundColor: "#888888", margin: 20 }}
          onPress={this.changeColor}
        >
          <Text style={{ color: this.state.flag ? "red" : "blue" }}>One</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Upvotes: 19

Related Questions