Example of Font Variant on Text in React Native Android iOS

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 :-

  1. small-caps – Used on Alphabets.
  2. oldstyle-nums – Used on Numbers .
  3. lining-nums -Used on Numbers .
  4. tabular-nums -Used on Numbers .
  5. 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.

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’.

3. Creating Style.

4. Complete Source Code for App.js File :-

Screenshot:-

Example of Font Variant on Text in React Native Android iOS

Leave a Reply

Your email address will not be published.