How to change text component font size in pixels in react native application using custom CSS style sheet class in both iOS and Android devices.
In react native font size can be customized through fontSize style attribute. You can define any number of size in pixels according to your requirement and that will apply on your Text component. So let’s get started .
Contents in this project Change Text Font Size 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 One, Two and Three.
- 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
11
|
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
11
|
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>Sample Text 1</Text>
<Text>Sample Text 2</Text>
<Text>Sample Text 3</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 One, Two and Three.
|
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({
One: {
// Define font size here in Pixels
fontSize : 20
},
Two: {
// Define font size here in Pixels
fontSize : 25
},
Three:{
// Define font size here in Pixels
fontSize : 30
}
});
|
8. Call each CSS class into each Text.
|
1
2
3
4
5
6
7
8
9
|
<View style = {{alignItems: ‘center’}}>
<Text style={styles.One}>Sample Text 1</Text>
<Text style={styles.Two}>Sample Text 2</Text>
<Text style={[styles.Three]}>Sample Text 3</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.One}>Sample Text 1</Text>
<Text style={styles.Two}>Sample Text 2</Text>
<Text style={[styles.Three]}>Sample Text 3</Text>
</View>
);
}
}
const styles = StyleSheet.create({
One: {
// Define font size here in Pixels
fontSize : 20
},
Two: {
// Define font size here in Pixels
fontSize : 25
},
Three:{
// Define font size here in Pixels
fontSize : 30
}
});
AppRegistry.registerComponent(‘Myproject’, () => Myproject);
|
Screenshot in iOS device :
Screenshot in Android device :
Also Read :
React Native Apply alignItems on View Explained With Example
React Native Show Floating Action Button Above ListView FlatList
React Native User Registration using PHP MySQL Database PART-1 – Creating PHP API
React Native Convert Text to Upper Case Lower Case on Button Click
React Native Fast Image Cache Package – Android iOS Example
