Are there any alternatives to adjustsFontSizeToFit

Question

I am using flex in Text field to display my values/range. For IOS I am using the properties adjustsFontSizeToFit and minimumFontScale props for Text to achieve the ideal font size and scaling. I want the same scaling to be enabled for Android. Does anyone use any tricks for Android?

<View style={{flex: 40}}>
  {
   (Platform.OS === 'ios') ?
    <Text style={{flex: 1, paddingRight: 2}} adjustsFontSizeToFit 
    minimumFontScale={0.5}>
     //if decimal value exists show range
     (pointFivePart_1 === '5') ? 
        <Text style={{ flexDirection: 'row' }} >
          <Text style={styles.mainValueStyle}>{first_1}</Text>
          <Text style=styles.decimalValueStyle}> .pointFivePart_1}</Text>
          <Text style={styles.mainValueStyle}>&deg;</Text>
         </Text>
         : <Text style={styles.mainValueStyle} >{min}&deg;</Text>
        }
        //if two values then show the second value as range
{// render largest value if different than min
            (maxSet === minSet) ? null : (
                (pointFivePart_2 === '5') ?
                <Text style={{ flexDirection: 'row' }} >
                    <Text style={styles.mainValueStyle}> - {first_2}</Text>
                    <Text style={styles.decimalValueStyle}>.{pointFivePart_2}</Text>
                    <Text style={styles.mainValueStyle}>&deg;</Text>
                    </Text>
                :
                    <Text style={styles.mainValueStyle} > - {maxSet}&deg;</Text>
                    )
                }
                </Text>
                :
                //same styling for android

Answer 1

Simple but somehow working solution (crossplatform):

fontSize = Math.sqrt(textWidth*textHeight/text.length)

where textWidth, textHeight - size of your Text component, text.length - length of your text.

minimumFontScale can be achieved with

fontSize = Math.max(fontSize,minimumFontSize)

I came to this formula by solving such system of equations:

lettersInLine = textWidth/fontSize
lines = textLength/lettersInLine
lines*fontSize = textHeight

assuming here that font has square sized (width equal to height) letters.

Though this formula makes sense even without equations. You just

1. calculate square of whole text element
2. calculate square for each letter (dividing whole square to letters number)
3. take square root from letter square to get font size

Answer 2

@aaltaf In android I generally define dimension of TextView into dimension file inside values and for font generally use default font from fontfamily
here is an example...

<TextView
   android:id="@+id/shipment_text_view"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginTop="@dimen/send_two_dp"
   android:gravity="center_vertical"
   android:text="@{locationViewModel.sameDayShipmentText}"
   android:textColor="@color/black"
   android:textSize="@dimen/send_fourteen_sp"
   android:fontFamily="sans-serif"
   tools:text="6-8 hour delivery" />

Hope it will helped :)

Answer 3

I am using slightly modified version of @nazar solution. I was not able to make it scale as i needed, text would get cut off, because the dynamic height based on screen device would affect the fontSize too much.

Anyways, here is my solution.

var fontSize = width / text.length;
var maxSize = width / 5;
fontSize = Math.min(fontSize, maxSize);

Maximum font size is defined by 5 letters. Less letters would make too big fontSize in this case. This value can be of course anything. You can make simple function out of this and call it anywhere you need with width parameter, which is idealy something like screen.width * 0.1, second parameter being length of the text and third parameter for the maxSize. So something like this:

export function GetFontSize(width, length, max) {      
    var fontSize = width / length;

    var maxSize = width / max;
    fontSize = Math.min(fontSize, maxSize);

    return fontSize;
}