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 :
- Start a fresh React Native project. If you don’t know how then read my this tutorial.
- Add StyleSheet, View and Text component in import block.
- Add View tag in render’s return block.
- Add inline style in View to make the all the Text component items align center.
- Add Three Text component inside View .
- Create StyleSheet just above the AppRegistry.registerComponent line.
- Inside StyleSheet create three classes named as Purple, Red and Orange.
- Call each CSS class into each Text.
- 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.
|
1
|
import { AppRegistry, StyleSheet, Text, View } from ‘react-native’;
|
3. Add View tag in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
|
render() {
return (
<View>
</View>
);
}
|
4. Add inline style in View to make the all the Text component items align center.
|
1
2
3
4
5
6
7
8
9
10
|
render() {
return (
<View style = {{alignItems: ‘center’}}>
</View>
);
}
|
5. Add Three Text component inside View .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
render() {
return (
<View style = {{alignItems: ‘center’}}>
<Text>This is Red Color Text</Text>
<Text>This is Purple Color Text</Text>
<Text>This is orange Color Text</Text>
</View>
);
}
|
6. Create StyleSheet just above the AppRegistry.registerComponent line.
|
1
2
3
4
|
const styles = StyleSheet.create({
});
|
7. Inside StyleSheet create three classes named as Purple, Red and Orange.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
const styles = StyleSheet.create({
Purple: {
// Define your HEX color code here.
color: ‘#9C27B0’,
},
Red: {
// Define your HEX color code here.
color: ‘#F44336’
},
Orange:{
// Define your HEX color code here.
color : ‘#FF9800’
}
});
|
8. Call each CSS class into each Text.
|
1
2
3
4
5
6
7
8
9
|
<View style = {{alignItems: ‘center’}}>
<Text style={styles.Red}>This is Red Color Text</Text>
<Text style={styles.Purple}>This is Purple Color Text</Text>
<Text style={[styles.Orange]}>This is orange Color Text</Text>
</View>
|
9. Complete Source Code for index.android.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
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, Text, View } from ‘react-native’;
class Myproject extends Component {
render() {
return (
<View style = {{alignItems: ‘center’}}>
<Text style={styles.Red}>This is Red Color Text</Text>
<Text style={styles.Purple}>This is Purple Color Text</Text>
<Text style={[styles.Orange]}>This is orange Color Text</Text>
</View>
);
}
}
const styles = StyleSheet.create({
Purple: {
// Define your HEX color code here.
color: ‘#9C27B0’,
},
Red: {
// Define your HEX color code here.
color: ‘#F44336’
},
Orange:{
// Define your HEX color code here.
color : ‘#FF9800’
}
});
AppRegistry.registerComponent(‘Myproject’, () => Myproject);
|
Screenshot in iOS device :
Screenshot in Android device :
Also Read :
Use useEffect as componentdidmount behavior in React Native Hooks Example
React Native Increase Width Height of View using Animation Tutorial
React Native Create Custom Bottom Tab Bar Navigator Example
React Native NetInfo Example to Detect Internet Connection Android iOS
Error: Unable to resolve module `./index` from `node_modulesreact-nativescripts/ Solution
