Set Text Color in React Native Android iOS Tutorial

How to change Text component color using custom css style sheet class in react native application example with source code.

Text component is the most basic component in react native. So in this tutorial we would going to apply custom Hex color code on Text using style sheet class. So let’s get started ūüėČ .

Contents in this project Set Text Color in React Native :

  1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
  2. Add StyleSheet, View and Text component in import block.
  3. Add View tag in render’s return block.
  4. Add inline style in View to make the all the Text component items align center.
  5. Add Three Text component inside View .
  6. Create StyleSheet just above the AppRegistry.registerComponent line.
  7. Inside StyleSheet create three classes named as Purple, Red and Orange.
  8. Call each CSS class into each Text.
  9. Complete Source Code.

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add StyleSheet, View and Text component in import block.

3. Add View tag in render’s return block.

4. Add inline style in View to make the all the Text component items align center.

5. Add Three Text component inside View .

6. Create StyleSheet just above the AppRegistry.registerComponent line.

7. Inside StyleSheet create three classes named as Purple, Red and Orange.

8. Call each CSS class into each Text.

9. Complete Source Code for index.android.js file :

Screenshot in iOS device :

Text Color

Screenshot in Android device :

Leave a Reply

Your email address will not be published. Required fields are marked *