How to add text title with react native FlatGride? - react-native

Question

Using the below code I can return FlatGrid according to my item list.
return (
<FlatGrid
itemDimension={130}
data={items}
style={styles.gridView}
// staticDimension={300}
// fixed
spacing={10}
renderItem={({ item }) => (
<ImageBackground source={ item.source} style={[styles.itemContainer, ]}>
<Text style={styles.itemName}>{item.name}</Text>
</ImageBackground>
)}
/>
);
But I want to add some text before the FlatGrid. So I update my code like below.
return (
<View>
<Text style={{color:'#000000'}}>This is the text</Text>
<FlatGrid
itemDimension={130}
data={items}
style={styles.gridView}
spacing={10}
renderItem={({ item }) => (
<ImageBackground source={ item.source} style={[styles.itemContainer, ]}>
<Text style={styles.itemName}>{item.name}</Text>
</ImageBackground>
)}
/>
</View>
);
But as the above code output, I can see only the text. ("This is the text").
I am new to react-native. Can anyone say how I fix this issue?

Answer 1

Try for SectionGrid
It will give you the title & list as well is same component
<SectionGrid
itemDimension={130}
sections={[
{
title: 'Numbers',
data: [1,2,3,4,5,6],
},
{
title: 'Alphabets',
data: ['A', 'B', 'C', 'D', 'E'],
},
]}
renderItem={({ item }) => (<Text>{item}</Text>)}
renderSectionHeader={({ section }) => (
<Text style={{ fontSize: 20 }}>{section.title}</Text>
)}
/>

Answer 2

This worked for me. Used different screen parts for each component.
return (
<View style={{flexDirection: "column",flex: 1, }}>
<View style={{ flex: 1,backgroundColor:'red' }}>
<Text style={{textAlign:'center',fontSize:20}}>This istext</Text>
</View>
<View style={{ flex: 10,backgroundColor:'blue'}}>
<FlatGrid
itemDimension={130}
data={items}
style={styles.gridView}
spacing={10}
renderItem={({ item }) => (
<ImageBackground source={ item.source} style={[styles.itemContainer, ]}>
<Text style={styles.itemName}>{item.name}</Text>
</ImageBackground>
)}/>
</View>
</View>
);