React Native ScrollView Wrapping for Complex Elements

Question

I've got a ScrollView and I'm listing a few Components in it. So far, I'd been putting just one big Text component in the ScrollView and it was wrapping fine. But now that I've created a new Component (in this case, ComplexText), the wrapping is a little off. (The ComplexText components are listed appropriately, it's just that long messages wrap a little funny and the last few characters of each wrapped line fall off of the screen.

Here's a basic form of my code:

import React, { ReactElement } from "react";
import {ScrollView, View, Text} from "react-native";

interface TextProps {
    person: string,
    message: string;
}

const ComplexText = ({person, message} : TextProps) : ReactElement => {
    return (
        <View style={{flexDirection: "row"}}>
            <Text textBreakStrategy={"simple"} style={{fontSize: 20, fontWeight: "bold"}}>{person + ": "}</Text>
            <Text textBreakStrategy={"simple"} style={{fontSize: 20}}>{message}</Text>
        </View>
    );
};

const ScrollingComplexText = () : ReactElement => {
    return (
        <>
            <View style={{flex:0.05}} key={"status-bar-background"}/>
            <ScrollView style={{backgroundColor: "lightblue"}} key={"scrolling-messages"}>
                <ComplexText person={"Samantha"} message={"Hello Anthony."} />
                <ComplexText person={"Anthony"} message={"Hello Samantha."} />
                <ComplexText person={"System"} message={"User Jonathan has joined the chat, say something to welcome him."} />
                <ComplexText person={"Anthony"} message={"Hello Jonathan."} />
                <ComplexText person={"Samantha"} message={"Hello Jonathan."} />
                <ComplexText person={"Jonathan"} message={"Hello everybody."} />
            </ScrollView>
        </>
    );
};

export default ScrollingComplexText;

And here's a screenshot of the issue (as you can tell, most of the word something is being cut off):

Edit I also tried doing this with a FlatList, but I'm seeing the exact same thing:

import React, { ReactElement } from "react";
import {View, Text, FlatList} from "react-native";

interface TextProps {
    person: string,
    message: string;
}

const ComplexText = ({person, message} : TextProps) : ReactElement => {
    return (
        <View style={{flexDirection: "row"}}>
            <Text textBreakStrategy={"simple"} style={{fontSize: 20, fontWeight: "bold"}}>{person + ": "}</Text>
            <Text textBreakStrategy={"simple"} style={{fontSize: 20}}>{message}</Text>
        </View>
    );
};

const messageJson = [
    {
        person: "Samantha",
        message: "Hello Anthony."
    },{
        person: "Anthony",
        message: "Hello Samantha."
    },{
        person: "System",
        message: "User Jonathan has joined the chat, say something to welcome him."
    },{
        person: "Anthony",
        message: "Hello Jonathan."
    },{
        person: "Samantha",
        message: "Hello Jonathan."
    },{
        person: "Jonathan",
        message: "Hello Everybody."
    }
];

const ScrollingComplexText = () : ReactElement => {

    const renderItem = ({item} : {item: TextProps}) => (
        <ComplexText person={item.person} message={item.message} />
    );

    return (
        <>
            <View style={{flex:0.05}} key={"status-bar-background"}/>
            <FlatList
                style={{backgroundColor: "lightblue"}}
                data={messageJson}
                renderItem={renderItem} />
        </>
    );
};

export default ScrollingComplexText;

score 0 · Answer 1 · answered Oct 27 '20 at 08:05

0

Try this way

<ScrollView key={"scrolling-messages"}>
   <View style={{flex:1, backgroundColor: "lightblue"}}>
      <ComplexText person={"Samantha"} message={"Hello Anthony."} />
      ......
   </View>
</ScrollView>

and this

const ComplexText = ({person, message} : TextProps) : ReactElement => {
    return (
        <View style={{flex:1, flexDirection: "row"}}> <-- add flex:1 here -->
            <Text textBreakStrategy={"simple"} style={{fontSize: 20, fontWeight: "bold"}}>{person + ": "}</Text>
            <Text textBreakStrategy={"simple"} style={{fontSize: 20}}>{message}</Text>
        </View>
    );
};

answered Oct 27 '20 at 08:05

Nooruddin Lakhani

7,507
2
19
39

Hmmm. I tried this and it doesn't seem to fix the problem. I'm still seeing parts of words getting cut off the screen. Just in case I missed something, I'll mention what I changed. But I added the `flex: 1` to the `ComplexText` `View` and I also added the `View` in the `ScrollView` which now contains all of the `ComplexText` components. – Austin Brown Oct 27 '20 at 14:44
Try adding contentContainerStyle={{flex:1 }} in scrollview then check – Nooruddin Lakhani Oct 27 '20 at 14:55
That doesn't seem to work, either. It adds a lot of vertical spacing, but text is still getting cut off. – Austin Brown Oct 27 '20 at 15:10
Might be because of the fontWeight, please try removing fontWeight then try – Nooruddin Lakhani Oct 27 '20 at 15:18
Got rid of the `fontWeight` and still no luck. :( – Austin Brown Oct 27 '20 at 17:33

score 0 · Accepted Answer · answered Nov 02 '20 at 20:34

I found my solution to this problem:

const ComplexText = ({person, message} : TextProps) : ReactElement => {
    return (
        <View style={{flexDirection: "row"}}>
            <Text textBreakStrategy={"simple"} style={{flex: 0.2, fontSize: 20, fontWeight: "bold"}}>{person + ": "}</Text>
            <Text textBreakStrategy={"simple"} style={{flex: 0.8, fontSize: 20}}>{message}</Text>
        </View>
    );
};

If it's unclear what I added, I needed to add some flex properties to each of the individual Text components within my ComplexText component.

React Native ScrollView Wrapping for Complex Elements

2 Answers2