To add multiple data in one container in flatlist - react-native

Question

Hello I am new in react native. I am working on flatlist I want multiple items to be shown in list in one container. Example I want to add multiple data in one container. My code is given below any help will be appreciated.
this.state = {
FlatListItems: [
{ key: "Skptricks" },
{ key: "Sumit" },
{ key: "Amit" },
{ key: "React" },
{ key: "React Native" },
{ key: "Java" },
]
};
and the I have print the key.
<View style={styles.container}>
<FlatList
data={ this.state.FlatListItems }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) =>
<Text style={styles.item} onPress={this.GetItem.bind(this, item.key)} >
{item.key} </Text>
}
/>
</View>
i want this kind of layout i have flatlist i want to show thw data like this given in image.

Answer 1

Modify state as below, add more items similar to data & key
this.state = {
FlatListItems: [
{ key: "Skptricks", data: "one" },
{ key: "Sumit" , data: "two"},
{ key: "Amit" , data: "three"},
{ key: "React", data: "four" },
{ key: "React Native" , data: "five"},
{ key: "Java", data: "six" },
]
};
And render it inside the FLatlist as :
<View style={styles.container}>
<FlatList
data={ this.state.FlatListItems }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) =>(
<View>
<Text style={styles.item} onPress={this.GetItem.bind(this, item.key)} >
{item.key} </Text>
<Text {item.data} </Text>
</View>
)}
numColumns={2}
keyExtractor={(item, index) => index}
/>
</View>

Answer 2

just add them as as keys in your sample array of objects. and access them in item in your FlatList component.
FlatListItems: [
{ title: "Skptricks",subTitle:"Asdasd" },
{ title: "melons",subTitle:"melons are great" }
]
and in your FlatList component
<FlatList
data={ this.state.FlatListItems }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) =>
(<View>
<Text style={styles.item} onPress={this.GetItem.bind(this, item.key)} >
{item.title} </Text>
<Text style={styles.item} onPress={this.GetItem.bind(this, item.key)} >
{item.subTitle} </Text>
</View> )
}
keyExtractor={(item,index)=>index}
/>
Edit: give the numColumns prop to FlatList Component as
numColumns={2}