Hello friends, Font family is a set of fonts comes integrated with programming language. A language can support different type of fonts. In react native to call a integrated font we have to use fontFamily prop of text style. As we all know react native dose support both android and iOS mobile platforms so according to that it will support all the inbuilt fonts comes out of box for android and iOS. The iOS fonts will only work in iOS and Android fonts works only in Android. I had already make tutorial for both platforms individually. So in this tutorial we would learn about Example of Set Apply Font Family on Text in React Native Android iOS.
- List of All Default Android Fonts comes in React Native.
- List of All Default iOS fonts comes in React Native.
Contents in this project Example of Set Apply Font Family on Text in React Native :-
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 |
import React from 'react'; import { View, StyleSheet, Text } from 'react-native'; export default function App() { return ( <View style={styleSheet.MainContainer}> <Text style={{ fontSize: 28, textAlign: 'center', color: 'red'}}> Set Apply Font Family on Text in React Native </Text> <Text style={{ fontSize: 26, fontFamily: 'monospace' }}> Font Family monospace </Text> <Text style={{ fontSize: 26, fontFamily: 'normal' }}> Font Family normal </Text> <Text style={{ fontSize: 26, fontFamily: 'notoserif' }}> Font Family notoserif </Text> <Text style={{ fontSize: 26, fontFamily: 'Roboto' }}> Font Family Roboto </Text> </View> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' } }); |
Screenshot :-
