Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Are there any alternatives to adjustsFontSizeToFit for Android?

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
like image 929
aaltaf Avatar asked Dec 05 '17 15:12

aaltaf


People also ask

How do you handle long texts in react native?

just put text in a tag view and text will adapt to property of View. Not really, if you put a text of 22100 chars the whole component goes blank.

How do I change text size in react?

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.

How do you change the color of text in react native?

To set text color in React, we can set the style prop to an object with the color property. to set the style prop of the h1 element to an object that has the color property set to 'red' . Now we should see that the color of the text is red.


2 Answers

Simply set adjustFontSizeToFit and numberOfLines DONT SET fontSize

<Text adjustsFontSizeToFit numberOfLines={1}>This text will fit the width of the container</Text>
like image 154
Daniel Melo Alencar Avatar answered Oct 22 '22 09:10

Daniel Melo Alencar


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
like image 31
nazar kuliyev Avatar answered Oct 22 '22 09:10

nazar kuliyev