Set Text Color in React Native

This tutorial explains how to set text color in react native application. We will make this example as simple as possible, it may help you to build more understanding on react native to set color of text content. You need to use color attribute/property of stylesheet design, in order to set text color in your Text component.

Set text color in react native application :
Using below CSS properties you can set text color in your react native application.

color: '#f44336'  // apply the color code in color stylesheet property

React Native Text Color Stylesheet 

Lets follow the below steps, that help you to set text color in Text component of react native application.

Step-1: First create the new reactive project.

Step-2: Open App.js File  in your favorite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components.

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

Step-4: Open App.js component and  and Implement render method. The render method returns multiple Text component wrapped by root View 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>
    );
  }

Step-5 : Apply the below style sheet design.

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

Complete Source Code for App.js 

Lets see the complete source code that helps to set text color in Text component in react native application.

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

The above example will display the below output.

Screenshot :

This is all about setting text color in react native application. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.