Skip to content

Android Text elements that have adjustsFontSizeToFit do not have their font size adjusted when the height of a parent element is changed. #30717

Description

@kdo1234

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

  1. 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"
},
});
  1. 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.

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/TAJyBmNdv

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugComponent: TextImpact: RegressionDescribes a behavior that used to work on a prior release, but stopped working recently.Issue: Author Provided ReproThis issue can be reproduced in Snack or an attached project.Platform: AndroidAndroid applications.Resolution: LockedThis issue was locked by the bot.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions