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>
        );
      }
    }

Answer 1

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>
        );
    }