CODEWITHSUNDEEP
react-native
kukab
kukab

Reputation: 571

image is not showing on api call

i have a listng screen on this card when you touch you will go to the detail screen ,this images and title are coming from backend problem is that when I click card it go the detail screen and it shows only title and subtitle they are not showing image

export default function ListingsScreens({ navigation }) {
  const [listings, setListing] = useState([]);
  useEffect(() => {
    loadListings();
  }, []);
  const loadListings = async () => {
    const response = await listingApi.getListings();
    setListing(response.data);
  };
  return (
    <ExpoScreen style={styles.screen}>
      <FlatList
        data={listings}
        keyExtractor={(listings) => listings.id.toString()}
        renderItem={({ item }) => (
          <CardList
            title={item.title}
            subtitle={"$" + item.price}
            imageUrl={item.images[0].url}
            onPress={() => navigation.navigate("ListingDetails", item)}
          />
        )}
      />
    </ExpoScreen>
  );
}

this is my listing detail screen

export default function ListingDetailsScreen({ route }) {
  console.log(route);
  const listing = route.params;
  return (
    <View style={styles.Screen}>
      <View style={styles.card}>
        <Image style={styles.CardImage} source={listing.image} />
        <View style={styles.tittleContainer}>
          <AppText style={styles.title}>{listing.title}</AppText>
          <AppText style={styles.subtitle}>{listing.price}</AppText>
        </View>
      </View>
      <ListItem
        image={require("../assets/dummyFemale.png")}
        title="Anna bella"
        sutitle="suck 5 person blood"
      />
    </View>
  );
}

and this is my API enter image description here

when I click on this card image disappear only show title and subtitle enter image description here

Upvotes: 1

Views: 742

Answers (2)

Muhammad Ovi
Muhammad Ovi

Reputation: 1086

Looking at the JSON data, you should do:

<Image style={styles.CardImage} source={{ uri: listing.images[0].url }} />

Upvotes: 3

Zayn
Zayn

Reputation: 741

You must be getting image as an url so change your source prop

from:

<Image style={styles.CardImage} source={listing.image} />

To:

 <Image style={styles.CardImage} source={{uri: listing.image}} />

Upvotes: 1

Related Questions