How to fit text size to parent container in React Native? Code Example

There are situations when we do not want to fix the text size. Else we want it to expand or shrink according to the size of enclosing parent view.

React Native provides adjustsFontSizeToFit prop which when set to true, adjust the size of text according to parent contraint.

Code Example

import React, { useState } from "react";
import { Text, StyleSheet, View } from "react-native";

const ScaledFont = () => {
  
  return (
    <View style={styles.container}>
      <View
       style={[styles.border, {width: 100, height: 100}]}
      >
        <Text
         style={styles.baseText}
         adjustsFontSizeToFit={true}
        >
          This text will Scale with View
        </Text>
      </View>

      <View style={[styles.border, {width: 300}]}>
        <Text
         style={styles.baseText}
         adjustsFontSizeToFit={true}
        >
          This text will Scale with View
        </Text>
      </View>

      <View style={[styles.border, {width: 300, height: 30}]}>
        <Text
         style={styles.baseText}
         adjustsFontSizeToFit={true}
        >
          This text will Scale with View
        </Text>
      </View>

      <Text>All text elements above are of size 30 but they all adjusted their size according to View.</Text>
    </View>

  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'space-between',
    height: 300,
    marginTop: 40
  },
  border: {
    borderWidth: 1,
    borderColor: '#888888',
  },
  baseText: {
    fontFamily: "Cochin",
    fontSize: 30
  },
  
});

export default ScaledFont;

Output –

From the image you can see that the text is auto scaled according to the View box. It worked better on Android phones.

In the code we are setting three views with different width and height in line 8, 19, and 28. The text adjust it’s size according to views size.

Live Demo

Conclusion

adjustsFontSizeToFit is the prop used to indicate text blocks to adjust their size according to the parent element.