so I'm very new to react native and I'm trying to create a FlashList. Seems to work fine with most elements but my images aren't really playing along.

Seems like the FlashList is importing the image styling since it's creating space for the height and width I've declared but no Image is showing, it's simply blank.

Appreciate some help!

Expo App (How it looks)

My Code:

import React from "react";
import { Text, StyleSheet, Image, View } from "react-native";
import { FlashList } from "@shopify/flash-list";

const ListScreen = () => {
  const Trips = [
    {
      id: 1,
      Place: "Tuscany",
      TripLength: "4 days",
      description: "A trip to a WineCountry",
      image: require("../../assets/Tuscany.jpg"),
    },
    {
      id: 2,
      Place: "Venice",
      TripLength: "7 days",
      description: "A trip to a floating city",
      image: require("../../assets/Venice.jpg"),
    },
    {
      id: 3,
      Place: "Rome",
      TripLength: "3 days",
      description: "A trip back in time",
      image: require("../../assets/Rome.jpg"),
    },
    {
      id: 4,
      Place: "Paris",
      TripLength: "8 days",
      description: "Drink wine under the Eiffel Tower",
      image: require("../../assets/Paris.jpg"),
    },
    {
      id: 5,
      Place: "Aix-enProvence",
      TripLength: "14 days",
      description: "A city of thousand fountains and lavender gardens",
      image: require("../../assets/Aix-en-Provence.jpg"),
    },
  ];

  return (
    <FlashList
      data={Trips}
      renderItem={({ item }) => (
        <View>
          <Text>{item.Place}</Text>
          <Text>{item.TripLength}</Text>
          <Text>{item.description}</Text>
          <Image style={styles.image} Source={item.image} />
        </View>
      )}
    />
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    marginTop: 10,
  },
  place: {
    fontSize: 18,
  },
  TripLength: {
    fontSize: 12,
  },
  description: {},
  image: {
    height: 500,
    width: "100%",
  },
});

export default ListScreen;

You can see in the code what I tried and I expected the image to show. But I can't figure out what's missing.

CodePudding user response：

You made a very minor mistake. Source should be source. I also added a resizeMode="contain" to stop the image from exceeding its container's width/height link:

 return (
    <FlashList
      data={Trips}
      renderItem={({ item }) => (
        <View>
          <Text>{item.Place}</Text>
          <Text>{item.TripLength}</Text>
          <Text>{item.description}</Text>
          <Image style={styles.image} source={item.image} resizeMode="contain"/>
        </View>
      )}
    />
  );
};