Text doesn't wrap in React Native Component

Question

So I'm using Flatlist and I use data from an array and I'm showing it on my screen. And here is what I am getting at.

I want my output to be like the one shown in the red box.

Here is my code.

    _renderItem (item) {

        return(
            <View style={{ width: 350, flexGrow: 1, }}>            
              <Text style={{ fontSize: 16, color: 'black', }}>
                {item.law_practice_description} ,  // item.law_practice_description shows me the text like Administrative Adjudications etc
              </Text>
            </View>
        );
      }

     render() {

        return (
            <View style={{ flex: 1 }}>
             <Text style={styles.titleTxt}>Administrative Law</Text>

                    <FlatList
                        style={{ marginTop: 20,}}
                        data={this.state.data}
                        renderItem={({item}) => this._renderItem(item) }
                        keyExtractor={(index) => index.toString()}
                    />

            </View>
        );
      }
    }

This is more of a react-native JS question than android. . . — sansa, Feb 08 '19 at 11:58
@sansa I thought it might also be a css question in which case maybe a android developer could also help me. But I've removed the tag anyway — Shubham Bisht, Feb 08 '19 at 12:00

Brijesh Shiroya · Accepted Answer · 2019-02-08T13:09:53.590

2

Remove flatlist from code:

Replace your render method with below code:

     constructor(props) {
        super(props)
        this.state = {
            data: [{ law_practice_description: 'Administration  Administration' },
            { law_practice_description: 'Administration  Agency Prctice' },
            { law_practice_description: 'Administration  hearing and  appeals' },
            { law_practice_description: 'Administration  Administration' },
            { law_practice_description: 'Administration  Agency Prctice' },
            { law_practice_description: 'Administration  hearing and  appeals' },
            { law_practice_description: 'Administration  Administration' },
            { law_practice_description: 'Administration  Agency Prctice' },
            { law_practice_description: 'Administration  hearing and  appeals' }],
        };
    }

     render() {
        let str = ''
        this.state.data.map((item, index) => {
             if (index == 0) {
                str = item.law_practice_description
             } else {
                str = str + ', ' + item.law_practice_description
             }
        })
        return (
            <View style={{ flex: 1 }} >
                <Text style={styles.titleTxt}>Administrative Law</Text>
                <Text style={{ fontSize: 16, color: 'black', }}>
                    {str}
                </Text>
            </ View>
        );
    }

edited Feb 08 '19 at 13:09

answered Feb 08 '19 at 12:29

Brijesh Shiroya

3,323
1
13
20

@Brijesh Thank you! This worked for me. But I guess this solution won't be optimum when there I've 100s of items in my data array. In that case, what would be the right way to solve the problem? – Shubham Bisht Feb 08 '19 at 12:33
@ShubhamBisht Text component will manage it automatically, don't worry about that – Brijesh Shiroya Feb 08 '19 at 12:35
No I mean, if there will be 100 items in data, I'll have to use else if 99 times – Shubham Bisht Feb 08 '19 at 12:36
@ShubhamBisht No try to add dummy data into this.state.data and try it, – Brijesh Shiroya Feb 08 '19 at 12:40
@BrijeshShiroya how will it work for n number of items? I guess you just added the dummy data. – Shubham Bisht Feb 08 '19 at 12:46
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/188111/discussion-between-brijesh-shiroya-and-shubham-bisht). – Brijesh Shiroya Feb 08 '19 at 12:47
@BrijeshShiroya why did we had to add the last `else`? Wouldn't it be enough till `else if` ? – Shubham Bisht Feb 08 '19 at 12:59
Waah @BrijeshShiroya Waah!! – Kishore Jethava Feb 08 '19 at 13:04

Text doesn't wrap in React Native Component

1 Answers1