Android Text elements that have adjustsFontSizeToFit do not have their font size adjusted when the height of a parent element is changed. #30717
Description
Description
On Android, Text elements that have adjustsFontSizeToFit={true} do not have their font size adjusted when the height of a parent element is changed. This works as desired on iOS. This seems to be a defect in the excellent PR #26389 by @janicduplessis.
React Native version:
info Fetching system and libraries information...
System:
OS: Windows 10 10.0.18362
CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
Memory: 4.60 GB / 15.81 GB
Binaries:
Node: 10.17.0 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 6.11.3 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 27, 28, 29
Build Tools: 28.0.3, 29.0.2
System Images: android-27 | Google Play Intel x86 Atom, android-28 | Wear OS Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
Android NDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: Version 3.5.0.0 AI-191.8026.42.35.5791312
Visual Studio: Not Found
Languages:
Java: 1.8.0_221
Python: 2.7.16
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.4 => 0.63.4
react-native-windows: Not Found
npmGlobalPackages:
*react-native*: Not Found
Steps To Reproduce
- Run the following app:
import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
export default class App extends React.Component {
state = {
rowHeight: 60,
};
render() {
return (
<View style={styles.container}>
<View style={[styles.row, {height:this.state.rowHeight}]}>
<Text adjustsFontSizeToFit numberOfLines={1} style={styles.paragraph}>
Text text text text text text
</Text>
</View>
<Text>{this.state.version}</Text>
<View style={styles.button}>
<Button onPress={() => this.setState({rowHeight: 10})} title="Set row height to 10"/>
</View>
<View style={styles.button}>
<Button onPress={() => this.setState({rowHeight: 60})} title="Set row height to 60"/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
paddingTop: 100,
},
row: {
backgroundColor: 'lightblue',
marginBottom: 20,
},
button: {
margin: 10
},
paragraph: {
fontSize: 100,
fontWeight: 'bold',
textAlign: 'center',
backgroundColor: "yellow"
},
});
- Press the button labeled "Set row height to 10". Observe that on iOS the text's font size is reduced but is unchanged on Android.
Expected Results
The font size of the Text element should be changed when the height of a parent element is changed on Android, consistent with iOS.