React Native - Problem Using Image Component-CodePudding

I am trying to use the Image component in my flatlist however i get this error when i try to use it.

"JSX element class does not support attributes because it does not have a 'props' property."

My Code:

export default function FlatList() {
const renderItem = ({ item }) => {
<View>
  <Image source={{ uri: item.picture }} />
</View>;
};

return(
 <View>
  <FlatList
    data={routeArray}
    renderItem={renderItem}
    keyExtractor={(item) => item.id}
  />
</View>
);}

CodePudding user response：

You need to specify that you want to use the React Native Image type, rather than the HTMLImageElement type. Make sure you have installed React Native to your project, then add the following to your imports:

import { Image } from "react-native";

See React Native Image Docs for a complete use example.

CodePudding user response：

Not sure but I think you need to add a return() wrapping your JSX, try this:

const renderItem = ({ item }) => {
    return(
      <View>
          <Image source={{ uri: item.picture }} />
      </View>
)};