How to Set the Text Color in React Native

Shiv Yadav Feb 15, 2024
How to Set the Text Color in React Native

This article covers changing the text color in a Native React application. This example will be as straightforward as possible so that you may better grasp how to set the text content’s color in React Native.

Set the Text Color in React Native

To set the text color in your Text component, you must utilize the color attribute or property of the CSS design. Let’s see how to set text color in the React Native application.

import {StatusBar} from 'expo-status-bar';
import {StyleSheet, Text, View} from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello and welcome to upwork environment</Text>
      <Text style={styles.text1}>Hello and welcome to upwork environment</Text>
      <StatusBar style='auto' />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 24,
    color: "red",
  },
  text1: {
    fontSize: 24,
    color: "blue",
  },
});

In the above program, there are two Text components. Each Text component has its styles, and they get their styles from the StyleSheet.

The first Text component gets the style from text which has its text color red, whereas the second Text component gets its style from text1, which has its text color blue.

Output:

React Native Text Color

In the above output, you can see two sentences of text with their color. You can change the color from the StyleSheet component if you want to change it.

Author: Shiv Yadav
Shiv Yadav avatar Shiv Yadav avatar

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

LinkedIn

Related Article - React Text