adjustsFontSizeToFit not working

@pabloga265 I took your code and took out the constants. TLDR: you’re code breaks for some font-families, mine should fix that. See below.

Basically, I took figured if we have to render the text twice, we might as well get some useful information, so I’m rendering the first pass at fontSize 5 (if we start out too small it gets less accurate because the letters are so small). I did some testing and found the following: monospace width = length * fontSize * 3 / 5 where length is the number of characters in the text. We can also get the width at fontSize 5: monospace width at fontSize 5 = length * 5 * 3 / 5 = length * 3 Now, we can calculate how wide our actual text would be in myFontFamily after render by applying the ratio between these two monospace widths to the reported width at fontSize 5 from onLayout:

myFontFamily width = myFontFamily width at 5 (reported width ) * ( monospace width / monospace width at 5)
myFontFamily width = reported width * length * fontSize * 3 / (length * 3 * 5)
myFontFamily width = reported width * fontSize / 5

We can use also use this equation to calculate an appropriate fontSize to get the desired width of the text element.

I was also running into some problems with multiple adjustments so I created a switch that would only allow it to be adjusted one time.

I also made sure to use the smaller of the two fontSize values, as your code adjusts no matter what, while the adjustsFontSizeToFit property only shrinks text that is clipping.

export default class ResponsiveText extends React.Component {
  /*
    This is an extension of text that handles implements the adjustsFontSizeToFit for android. The bug that it's
    patching is documented here:

    https://github.com/facebook/react-native/issues/20906

   */
  state = {
    _style: {
      fontSize: 5,
      width: null,
    },
    _adjusted: false
  }

  onLayout = (event) => {
    const { adjustsFontSizeToFit, style, children } = this.props
    if (adjustsFontSizeToFit && style.width && typeof children === 'string') {
      if (!this.state._adjusted) {
        const {width} = event.nativeEvent.layout
        this.setState({
          _style: {
            fontSize: Math.min(style.fontSize, Math.floor(5 * style.width / width)),
            width: style.width,
          },
          _adjusted: true,
        })
      }
    }
    else {
      this.setState({
        _style: {
          fontSize: this.props.style.fontSize,
          width: this.props.style.width,
        },
        _adjusted: true,
      })
    }
  }

  render() {
    return (
      Platform.OS === 'ios'
        ? <Text {...this.props}/>
        : <Text onLayout={this.onLayout} {...this.props}
                style={[this.props.style, this.state._style]}
          />
    )
  }
}

This is still happening in 0.56 and 0.57, adjustsFontSizeToFit works fine on iOS but does nothing on Android