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:

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.