Welcome back friends, As we all know fonts are the base of any application. Basically a font is a style or way to represent any text character in display manner. In react native there are a large amount of default font family available for both android and iOS platforms. Many of us don’t know how much the default font comes in Android and for iOS. In today’s tutorial we would learn only about React Native Android default fonts which come right out of the box. In android there are 10 types of font families available to use. We don’t have to download them just put their name in the Pop and they work like a charm. So in this tutorial we would learn about List of All Default Font Family Available in React Native for Android.
Contents in this project List of All Default Font Family Available in React Native for Android:
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 our main export default component App.
|
1 2 3 4 |
export default function App() { } |
3. Creating return() block, Now we would make 10 Text component, Each refers to a font family.
|
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 47 48 49 |
return ( <View style={styleSheet.MainContainer}> <Text style={{ fontSize: 26, color: 'orange', textAlign: 'center' }}> List of Default Android Font Family in React Native </Text> <Text style={{ fontSize: 26, fontFamily: 'monospace' }}> 1. Monospace </Text> <Text style={{ fontSize: 26, fontFamily: 'normal' }}> 2. Normal </Text> <Text style={{ fontSize: 26, fontFamily: 'notoserif' }}> 3. Notoserif </Text> <Text style={{ fontSize: 26, fontFamily: 'Roboto' }}> 4. Roboto </Text> <Text style={{ fontSize: 26, fontFamily: 'sans-serif' }}> 5. Sans-Serif </Text> <Text style={{ fontSize: 26, fontFamily: 'sans-serif-light' }}> 6. Sans-Serif-Light </Text> <Text style={{ fontSize: 26, fontFamily: 'sans-serif-thin' }}> 7. Sans Serif Thin </Text> <Text style={{ fontSize: 26, fontFamily: 'sans-serif-condensed' }}> 8. Sans-Serif-Condensed </Text> <Text style={{ fontSize: 26, fontFamily: 'sans-serif-medium' }}> 9. Sans Serif Medium </Text> <Text style={{ fontSize: 26, fontFamily: 'serif' }}> 10. Serif </Text> </View> ); |
4. Creating Style.
|
1 2 3 4 5 6 7 8 |
const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, padding: 10 } }); |
5. 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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
import React from 'react'; import { View, StyleSheet, Text } from 'react-native'; export default function App() { return ( <View style={styleSheet.MainContainer}> <Text style={{ fontSize: 26, color: 'orange', textAlign: 'center' }}> List of Default Android Font Family in React Native </Text> <Text style={{ fontSize: 26, fontFamily: 'monospace' }}> 1. Monospace </Text> <Text style={{ fontSize: 26, fontFamily: 'normal' }}> 2. Normal </Text> <Text style={{ fontSize: 26, fontFamily: 'notoserif' }}> 3. Notoserif </Text> <Text style={{ fontSize: 26, fontFamily: 'Roboto' }}> 4. Roboto </Text> <Text style={{ fontSize: 26, fontFamily: 'sans-serif' }}> 5. Sans-Serif </Text> <Text style={{ fontSize: 26, fontFamily: 'sans-serif-light' }}> 6. Sans-Serif-Light </Text> <Text style={{ fontSize: 26, fontFamily: 'sans-serif-thin' }}> 7. Sans Serif Thin </Text> <Text style={{ fontSize: 26, fontFamily: 'sans-serif-condensed' }}> 8. Sans-Serif-Condensed </Text> <Text style={{ fontSize: 26, fontFamily: 'sans-serif-medium' }}> 9. Sans Serif Medium </Text> <Text style={{ fontSize: 26, fontFamily: 'serif' }}> 10. Serif </Text> </View> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, padding: 10 } }); |
Screenshot:
