Can't display other component in React Natvie

user_7815893 0
Viewed 42

I have <flatlist /> Component in application homepage, I tried to put an <Image /> above it but it not displayed.It seems In my case React Native just shown the last component.I have tested it by putting <Image /> after <flatlist /> and the image displayed without problem but as i told flatlist vanished Cause thats wasn't the last component in home Function class, So here is my Homepage code

import React from 'react';
import {StyleSheet,View,Text,Image,FlatList} from 'react-native';


const DATA = [
    {
      id: '1',
      title: 'Icon 1',
      image: 'https://example.com/icon1.png',

    },
    {
      id: '2',
      title: 'Icon 2',
      image: 'https://example.com/icon2.png',

    },
    {
      id: '3',
      title: 'Icon 3',
      image: 'https://example.com/icon3.png',

    },
    {
      id: '4',
      title: 'Icon 4',
      image: 'https://example.com/icon4.png',
      },
  ];

export default function Home(){   

    return(
      <Image style={styles.banner} source={{uri: 'https://example.com/banner.jpg'}} />,
      
      <FlatList
      data={DATA}
      numColumns={'2'}
      keyExtriactor={(item) => item.id}
      renderItem={({ item }) => {
        return (

            <View style={styles.container}>
                {item.image && (
                    <Image style={styles.image} source={{ uri: item.image }}></Image>
                )}

                {item.title && (
                <Text>{item.title}</Text>
                )}

              </View>        
        );
      }}
    />
    
    );
      
}

const styles = StyleSheet.create({
    container:{
        marginTop:20,
        padding:20,
    },
    image:{
        width:70,
        height:50,
    },
    banner:{
      width:400,
      height:200,
      marginTop:10
    }

})
react-native reactjs javascript
4 Answers

Try this for Home function component:

export default function Home() {
  return (
    <>
      <Image
        style={styles.banner}
        source={{ uri: "https://example.com/banner.jpg" }}
      />

      <FlatList
        data={DATA}
        numColumns={"2"}
        keyExtriactor={(item) => item.id}
        renderItem={({ item }) => {
          return (
            <View style={styles.container}>
              {item.image && (
                <Image
                  style={styles.image}
                  source={{ uri: item.image }}
                ></Image>
              )}

              {item.title && <Text>{item.title}</Text>}
            </View>
          );
        }}
      />
    </>
  );
}

Your code return two JSX Element, that's probably the problem. It should only return one JSX Element

user_78702110

The problem is on your return statement:

return(
 <Image ... />
 <FlatList ... />
)

You should always return a single component or an Array of components. In this case you have two options:

...
return [
 <Image ... />,
 <Flatlist ... />
]

Or

...
return (
 <>
   <Image ... />
   <Flatlist ... />
 </>
)

Instead of <></> You could use any other component, a View for example, but keep in mind that you should always return a Single component or an Array of components.

user_98590160

Your return statement is not correct, which is why the component is not rendered properly. Each screen/component should be wrapped inside a View

export default function Home() {
  return (
    <View>
      <Image
        style={styles.banner}
        source={{ uri: "https://example.com/banner.jpg" }}
      />

      <FlatList
        data={DATA}
        numColumns={"2"}
        keyExtriactor={(item) => item.id}
        renderItem={({ item }) => {
          return (
            <View style={styles.container}>
              {item.image && (
                <Image
                  style={styles.image}
                  source={{ uri: item.image }}
                ></Image>
              )}

              {item.title && <Text>{item.title}</Text>}
            </View>
          );
        }}
      />
    </View>
  );
}
user_77333990

A more elegant solution could be to add the FlatList prop ListHeaderComponent that will put the Image (or whatever you want) on top of all your items.

export default function Home() {
  return (
      <FlatList
        data={DATA}
        numColumns={2}
        keyExtractor={(item) => item.id}
        ListHeaderComponent={(
         <Image
           style={styles.banner}
           source={{ uri: "https://example.com/banner.jpg" }}
         />
        )}
        renderItem={({ item }) => {
          return (
            <View style={styles.container}>
              {item.image && (
                <Image
                  style={styles.image}
                  source={{ uri: item.image }}
                ></Image>
              )}

              {item.title && <Text>{item.title}</Text>}
            </View>
          );
        }}
      />
  );
}
user_10615570
Related