CODEWITHSUNDEEP
reactjsreact-nativereact-android
Anjali
Anjali

Reputation: 2708

displaying multiple lines in flatlist

I am displaying my data in flatlist. I am reading the data from JSON file and rendering it in flatlist. How can I display multiple lines in flatlist. Below is my code:

 componentDidCatch
  render()
  {

 return(

<View style={styles.MainContainer}>

  <FlatList

     data={ newList }

     ItemSeparatorComponent = {this.FlatListItemSeparator}

     renderItem={({item}) => <Text style={styles.item} onPress={this.GetItem.bind(this, item.addr)} > {item.addr} </Text>}
    />


</View>
)

}

newlist is my json file that I am importing it at the top of the code by this statement 

import newListfrom '../reducers/ServiceDetails.json';

below is my JSON file:

 [
    {
       "id":"1",

       "addr": "111 Test Drive",
       "phone": "(951)-900-111",
    "state": "CA",
        "zip": "92831"
       "LatL":"33.935888",
       "Long2":"-117.284725",

    },

    {
        "id":"2",
         "addr": "2222 Test Drive",
       "phone": "(951)-910-111",
    "state": "CA",
        "zip": "92831"
        "LatL":"33.977111",
        "Long2":"-117.373423",

     },

     {
        "id":"3",
         "addr": "3333 Test Drive",
        "phone": "(951)-922-111",
    "state": "CA",
         "zip": "92831"
        "LatL":"33.761333",
        "Long2":"-116.971169",

     }
]

I want to display data like this on my screen:

111 Test Drive
(951)-900-111
CA-92831
__________________________
2222 Test Drive
(951)-910-111
CA-92831
_________________________


right now, I am just getting 

111 Test Drive
__________________________

2222 Test Drive

I want to display address, ,phone, state and zip on different lines. How can I achieve this.

Any help will be highly appreciated.

Upvotes: 0

Views: 2754

Answers (2)

Anjali
Anjali

Reputation: 2708

This is how I did it. I used style sheets too to put the data in different row.

<View style={styles.MainContainer}>

  <FlatList

     data={ newList }

     ItemSeparatorComponent = {this.FlatListItemSeparator}
     renderItem={this._renderItem}

    />


</View>

 _renderItem = ({item}) => {

        return(
            <View style={styles.item}>
                <Text>{item.addr} </Text>
                <Text>{item.phone}</Text>
            </View>


        );

  }

Upvotes: 0

Mark E
Mark E

Reputation: 3483

Just add all the information you want to show to the item render function. So you will change that line for this:
renderItem={({item}) => <Text style={styles.item} onPress={this.GetItem.bind(this, item.addr)} > {item.addr}{"\n"}{item.phone}{"\n"}{item.state}{item.zip} </Text>}

Upvotes: 1

Related Questions