Hello friends, In today’s example we would discuss about fontVariant style prop of Text in react native. The fontVariant prop is used to apply different type of font variants on Text. There are 5 different type of font variants available in react native. So in this tutorial we would learn about Example of Font Variant on Text in React Native Android iOS.
All font variant list :-
- small-caps – Used on Alphabets.
- oldstyle-nums – Used on Numbers .
- lining-nums -Used on Numbers .
- tabular-nums -Used on Numbers .
- proportional-nums -Used on Numbers .
NOTE :- Friends I don’t know but in Android If we want to use font Variant then we must have to use font Weight along with it. I have tried many attempts to use font Variant single but it dose not work alone.
Contents in this project Example of Font Variant on Text in React Native Android iOS :-
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 main App component. Now here we would make 5 Text component with font variant ‘small-caps’, ‘oldstyle-nums’, ‘lining-nums’ and ‘tabular-nums’.
|
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 |
export default function App() { return ( <View style={styleSheet.MainContainer}> <Text style={{color: 'red', fontSize: 28, textAlign: 'center'}}> Font Variant Example in React Native </Text> <View style={{width: '95%', height: 5, backgroundColor: 'green'}} /> <Text style={{ fontVariant: ['small-caps'], fontSize: 28, fontWeight: 'normal' }}> Font Variant small-caps </Text> <Text style={{ fontSize: 28, fontVariant: ["oldstyle-nums"], fontWeight: 'normal' }}> oldstyle-nums 123456789 </Text> <Text style={{ fontSize: 28, fontVariant: ["lining-nums"], fontWeight: 'normal' }}> lining-nums 123456789 </Text> <Text style={{ fontSize: 28, fontVariant: ["tabular-nums"], fontWeight: 'normal' }}> tabular-nums 123456789 </Text> <Text style={{ fontSize: 28, fontVariant: ["proportional-nums"], fontWeight: 'normal' }}> tabular-nums 123456789 </Text> </View> ); } |
3. Creating Style.
|
1 2 3 4 5 6 7 8 9 |
const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' } }); |
4. Complete Source Code for 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: 28, textAlign: 'center'}}> Font Variant Example in React Native </Text> <View style={{width: '95%', height: 5, backgroundColor: 'green'}} /> <Text style={{ fontVariant: ['small-caps'], fontSize: 28, fontWeight: 'normal' }}> Font Variant small-caps </Text> <Text style={{ fontSize: 28, fontVariant: ["oldstyle-nums"], fontWeight: 'normal' }}> oldstyle-nums 123456789 </Text> <Text style={{ fontSize: 28, fontVariant: ["lining-nums"], fontWeight: 'normal' }}> lining-nums 123456789 </Text> <Text style={{ fontSize: 28, fontVariant: ["tabular-nums"], fontWeight: 'normal' }}> tabular-nums 123456789 </Text> <Text style={{ fontSize: 28, fontVariant: ["proportional-nums"], fontWeight: 'normal' }}> tabular-nums 123456789 </Text> </View> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' } }); |
Screenshot:-
