title: React Native fit Text Component
body: <p>I'm trying to fit my text inside available area and my constraints are something like this:</p>
  
  <ul>
  <li>Text should not overflow,</li>
  <li>Text must scales up inside all available view,</li>
  <li>Words should not broken into characters and goes to next line sentences can be,</li>
  <li>When I'm using flex inside parent view text should not expand view more than screen width horizontally.</li>
  </ul>
  
  <p>Here is my code snippet:</p>
  
  <pre><code>import React from "react";
  import { StyleSheet, Text, View } from "react-native";
  import { Font } from "expo";
  import Lorem from "./src/helpers/lorem-ipsum-gen";
  
  export default class App extends React.Component {
    constructor() {
      super()
      this.state = {
        fontLoaded: false,
      };
    }
    //theboldfont.ttf
    async componentWillMount() {
      await Font.loadAsync({
        "akzidenz-grotesk-bq-bold": require("./assets/fonts/AkzidenzGrotesk_BQ_Bold.otf"),
      });
      this.setState({ fontLoaded: true });
    }
  
    render() {
      let loremText = new Lorem().generate(20)
  
      return (
        &lt;View style={styles.container}&gt;
          &lt;View&gt;
            &lt;View style={{ flex: 0.37 }} &gt; &lt;/View&gt;
            &lt;View style={{ flex: 0.25, backgroundColor: "red" }} &gt;
              &lt;View &gt;
                {
                  this.state.fontLoaded ? (&lt;Text
                    style={{ fontFamily: "akzidenz-grotesk-bq-bold", fontSize: 50 }}
                    adjustsFontSizeToFit={true}
                  &gt;
                    {loremText}
                  &lt;/Text&gt;) : null
                }
  
              &lt;/View&gt;
            &lt;/View&gt;
            &lt;View style={{ flex: 0.38 }} &gt;
              &lt;Text&gt;
                {loremText}
              &lt;/Text&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: "#fff",
      alignItems: "center",
      justifyContent: "center",
    },
  });
  </code></pre>
  
  <p>And result of it:</p>
  
  <p><a href="https://i.stack.imgur.com/sXDO5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sXDO5.png" alt="sample screenshot"></a></p>
  
  <p>What I've tried to achieve my goal:</p>
  
  <ul>
  <li>I thought it's related with custom font &amp; changed to default font(Not worked)</li>
  <li>In some github issues people wrote adjustsFontSizeToFit={true} inside text style prop (Not worked)</li>
  <li>I tried allowFontScaling (Not worked)</li>
  <li>Removed fontsize (Not worked)</li>
  <li>Removed flex and set static width and height to view (Not worked) </li>
  <li>Combinations of all steps above (Not worked)</li>
  </ul>