1

My Reducer:

const initialState = {
  1: {
     id: '1',
     name: 'AryaStark',
     theimage: "https://upload.wikimedia.org/wikipedia/en/3/39/Arya_Stark-Maisie_Williams.jpg"
    },
  2: {
     id: '2',
     name: 'SansaStark',
     theimage: "https://upload.wikimedia.org/wikipedia/en/7/74/SophieTurnerasSansaStark.jpg"
    }
}

I am able to show rest of the content but not the image. My code:

const renDataNew = Object.keys(this.props.newData).map((key, idx) => {
   let data = this.props.newData[key]
    return (
      <View key={idx} style={styles.myStyle1}>
        <Text style={styles.myStyle2}>{data.id} - {data.name}</Text>
        <Image
        style={{width: '100%', height: 600}}
        source={{uri:{data.theimage}}} //<= Error here expecting a ,
        />
      </View>

If I use the url in theimage directly in the uri source of Image, it works. What am I doing wrong?

What is the proper way to show the image? Many thanks.

Somename
  • 3,376
  • 16
  • 42
  • 84

1 Answers1

1

I think it should be:

<Image
  style={{width: '100%', height: 600}}
  source={{ uri: data.theimage }}
/>

You don't need extra {} around data object.

mradziwon
  • 1,206
  • 1
  • 9
  • 13
  • Thanks a lot! That actually worked. Why won't I need the curly braces around the `data.theimage`? – Somename Sep 07 '17 at 19:53
  • 1
    In example you are creating invalid object, it's syntax error. Second thing is that Image in [source](https://facebook.github.io/react-native/docs/image.html#source) prop accepts the image source as a String not Object. – mradziwon Sep 07 '17 at 20:07