The Text component in react native dose support all type of styling properties. One of them is color . The color styling property is used to set text color in react native. The color prop supports all the color properties like Hex color code, RGB color code, RGBA color code and also color constants provided by react native. So let’s get started 🙂 .
Contents in this project Change Set Text Color in React Native using CSS Stylesheet :-
1. Open your project’s main App.js file and import View, StyleSheet and Text component.
|
1 2 3 |
import React from 'react'; import { View, StyleSheet, Text } from 'react-native'; |
2. Creating our main export default App component. Now in the return block here we would make 4 Text components. In the 1st text component we would use the inline styling to style the Text color with Color constants. Now in the other 3 Text components I’m using custom styling and usages Hex color code, RGB color code and ARGB color code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
export default function App() { return ( <View style={styleSheet.MainContainer}> <Text style={{ color: 'red', fontSize: 26 }}> Sample Text 1 </Text> <Text style={styleSheet.text1}> Sample Text 2 </Text> <Text style={styleSheet.text2}> Sample Text 3 </Text> <Text style={styleSheet.text3}> Sample Text 4 </Text> </View> ); } |
3. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' }, text1: { fontSize: 26, color: '#FF6D00', }, text2: { fontSize: 26, color: 'rgb(255, 0, 128)' }, text3: { fontSize: 26, color: 'rgba(0,0,0,0.5)' } }); |
4. Complete Source Code for our React Native Project’s Main App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
import React from 'react'; import { View, StyleSheet, Text } from 'react-native'; export default function App() { return ( <View style={styleSheet.MainContainer}> <Text style={{ color: 'red', fontSize: 26 }}> Sample Text 1 </Text> <Text style={styleSheet.text1}> Sample Text 2 </Text> <Text style={styleSheet.text2}> Sample Text 3 </Text> <Text style={styleSheet.text3}> Sample Text 4 </Text> </View> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' }, text1: { fontSize: 26, color: '#FF6D00', }, text2: { fontSize: 26, color: 'rgb(255, 0, 128)' }, text3: { fontSize: 26, color: 'rgba(0,0,0,0.5)' } }); |
Screenshot :-
