Wrong width on text component with multiline content for Android
See original GitHub issueDescription
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;
Issue Analytics
- State:
- Created 3 years ago
- Reactions:3
- Comments:11
Top Results From Across the Web
Multiline TextView with width "wrap_content" - android
When the TextView reaches the width of its parent, then a new lines starts. Other than that where do you want the lines...
Read more >Android multiline TextView with accurate width | by Max Diland
Let's dive into TextView internals. The decision to be maximally wide was wrong and the reason why a TextView makes such a decision...
Read more >Specify the input method type - Android Developers
You should always declare the input method for your text fields by adding the android:inputType attribute to the <EditText> element. Figure 1.
Read more >Get height and width of multi-line text on canvas - CodeProject
For a multiline text, this element should be the block element, such as "p" or "div". In this case, there are no predefined...
Read more >Text fields - Material Design
Is most distinct from other components (like buttons) and surrounding content. A mobile UI for a contacts app form with many filled text...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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?