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;

android ios

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 3
  • Comments: 15 (3 by maintainers)

Most upvoted comments

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?