I can't pull the url from the bottom of the image in react local data file

Emre Can Akyol 0
Viewed 29

I can't pull the URL from the bottom of the image in the react local data file. All other titles are working. I just can't see the picture.

//MoviesCard

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

const MoviesCard = ({movies}) => {
       return (
        <View style={{flex: 1}}>
            <Image
            style={{height: 50, width: 50}}
            source={{uri: movies.url}}/>
            <Text>{movies.title}</Text>
            <Text>{movies.programType}</Text>
            <Text>{movies.releaseYear}</Text>
        </View>
       )
}
export default MoviesCard;

//Sample Data

{
  "total": 100,
  "entries": [
    {
      "title": "Wolf Creek",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "programType": "series",
      "images": {
        "Poster Art": {
          "url": "https://streamcoimg-a.akamaihd.net/000/128/61/12861-PosterArt-ec32a81986a45eac7e080112075ab466.jpg",
          "width": 1000,
          "height": 1500
        }
      },
      "releaseYear": 2016
    }...
react-native javascript
1 Answers

Your uri is incorrectly mapped, according to your object/sample data. Try this:

<View style={{flex: 1}}>
            <Image
            style={{height: 50, width: 50}}
            {/*Adjust here*/}
            source={movies.images["Poster Art"].url}
            />
            <Text>{movies.title}</Text>
            <Text>{movies.programType}</Text>
            <Text>{movies.releaseYear}</Text>
        </View>
Arky Asmal0
Related