How to add text title with react native FlatGride?

user_12721555 0
Viewed 52

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?

react-native
2 Answers

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

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>
  )}
/>
user_85233690
Related