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}>°</Text>
</Text>
: <Text style={styles.mainValueStyle} >{min}°</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}>°</Text>
</Text>
:
<Text style={styles.mainValueStyle} > - {maxSet}°</Text>
)
}
</Text>
:
//same styling for android
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.
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.
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.
Simply set adjustFontSizeToFit and numberOfLines DONT SET fontSize
<Text adjustsFontSizeToFit numberOfLines={1}>This text will fit the width of the container</Text>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With