Change Text Font Size in React Native

This tutorial explains how to set or change text font size in react native application. We will make this example as simple as possible, it may help you to build more understanding on react native font size design. You need to use fontSize attribute/property of stylesheet design, in order to set text font size in your Text component.

Set Fontsize in react native application :
Using below CSS properties you can set font size in your react native application.
fontSize: 15 // Define font size here in Pixels

React Native Font Size Stylesheet 

Lets follow the below steps, that help you to set different size of font size in Text component of react native application.

Step-1: First create the new reactive project.

Step-2: Open App.js File  in your favorite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components.

import React, { Component } from 'react';
import { Platform, StyleSheet, View, Text } from 'react-native';

Step-4: Open App.js component and  and Implement render method. The render method returns multiple Text component wrapped by root View component.

render() {

    return (
      <View style={styles.container}>
        <Text style={styles.setFontSizeOne}> React Native Font example 1</Text>
        <Text style={styles.setFontSizeTwo}> React Native Font example 2</Text>
        <Text style={[styles.setFontSizeThree]}> React Native Font example 3</Text>
        <Text style={[styles.setFontSizeFour]}> React Native Font example 4</Text>
      </View>
    );
  }

Step-5 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  setFontSizeOne: {
    fontSize: 15 // Define font size here in Pixels
  },
  setFontSizeTwo: {
    fontSize: 20 // Define font size here in Pixels
  },
  setFontSizeThree: {
    fontSize: 25 // Define font size here in Pixels
  },
  setFontSizeFour: {
    fontSize: 30 // Define font size here in Pixels
  },

});

Complete Source Code for App.js 

Lets see the complete source code that helps to set font size in Text component in react native application.

import React, { Component } from 'react';
import { Platform, StyleSheet, View, Text } from 'react-native';


export default class App extends Component {

  render() {

    return (
      <View style={styles.container}>
        <Text style={styles.setFontSizeOne}> React Native Font example 1</Text>
        <Text style={styles.setFontSizeTwo}> React Native Font example 2</Text>
        <Text style={[styles.setFontSizeThree]}> React Native Font example 3</Text>
        <Text style={[styles.setFontSizeFour]}> React Native Font example 4</Text>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  setFontSizeOne: {
    fontSize: 15 // Define font size here in Pixels
  },
  setFontSizeTwo: {
    fontSize: 20 // Define font size here in Pixels
  },
  setFontSizeThree: {
    fontSize: 25 // Define font size here in Pixels
  },
  setFontSizeFour: {
    fontSize: 30 // Define font size here in Pixels
  },

});

The above example will display the below output.

Screenshot :

This is all about changing text font size in react native application. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.