react-native: Wrong width on text component with multiline content for Android
Description
A react-native Text component with multiline content should automatically scale the width of the longest line. It works fine on ios but not on Android.
React Native version:
0.63.2
Steps To Reproduce
- display Text component on one line -> auto-scaling width ok on ios and android
- display Text component with multiline -> auto-scaling width ok on ios and nut not on android
Expected Results
The text component should automatically scale the width of the longest line.
Snack, code example, screenshot, or link to a repository:
COMPONENT :
interface Props {
label: string;
}
class ChatBubble extends Component<Props> {
// --------------------------
// RENDER
// --------------------------
render() {
return (
<View
style={[
styles.root,
this.props.align === DisplayAlign.Left ? styles.borderLeft : styles.borderRight,
]}>
<Text
style={
styles.label
}>
{this.props.label}
</Text>
</View>
);
}
}
export default ChatBubble;
STYLE:
import {Fonts} from 'addict-common';
import {StyleSheet, Dimensions} from 'react-native';
import storyStyles from '../../../../core/styles/StoryStyles';
import ScreenUtils from '../../../../utils/screen/ScreenUtils';
const styles = StyleSheet.create({
root: {
display: 'flex',
maxWidth: '85%',
},
label: {
fontFamily: Fonts.MONTSERRAT_MEDIUM,
fontSize: ScreenUtils.getFontScale() * 16,
color: 'white',
backgroundColor: 'red',
},
});
export default styles;
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 3
- Comments: 15 (3 by maintainers)
Appreciate the repro! It confirms the issue.
I am faced with the same problem, which makes the layout very difficult in some moments. React-native 0.63.3. Any fix planned?
Any updates on this?