React Native image not showing when try to load location from json file

This is a json file that stores a title and a image location for every elements.

[
	{"key": "a", "title": "Bangladesh", "image": "require('./img/bangladesh.jpg')"},
	{"key": "b", "title": "Sports", "image": "require('./img/sports.jpg')"},
	{"key": "c", "title": "Politics", "image": "require('./img/politics.jpg')"},
	{"key": "d", "title": "Entertainment", "image": "require('./img/entertainment.png')"},
	{"key": "e", "title": "Economics", "image": "require('./img/economics.jpg')"},
	{"key": "f", "title": "Technology", "image": "require('./img/technology.jpg')"},
	{"key": "g", "title": "Others", "image": "require('./img/m.jpg')"},
]

And Now I want to show all image and title using a Flatlist. Title shows perfectly but image not shows.

<FlatList horizontal= {true}
  data={newsCategory}
	renderItem={({item}) => (
	  <TouchableOpacity
		style={styles.option}
	  >
      <Image
        style={styles.imgButton}
        source={item.image}
      />
      <Text style={styles.buttonText}>{item.title}</Text>
	</TouchableOpacity>
     )
   }
/>

I check that image location comes perfectly from json file but not shows the image. Don't understand why this occurs.

2 answers

  • answered 2018-01-16 12:45 Alp Coskun

    Your image source is string. You should eval it.

    <FlatList horizontal= {true}
      data={newsCategory}
        renderItem={({item}) => (
          <TouchableOpacity
            style={styles.option}
          >
          <Image
            style={styles.imgButton}
            source={eval(item.image)}
          />
          <Text style={styles.buttonText}>{item.title}</Text>
        </TouchableOpacity>
         )
       }
    />
    

  • answered 2018-01-16 13:23 sumesh

    remove string from require.

    change this

    [
        {"key": "a", "title": "Bangladesh", "image": "require('./img/bangladesh.jpg')"},
        {"key": "b", "title": "Sports", "image": "require('./img/sports.jpg')"},
        {"key": "c", "title": "Politics", "image": "require('./img/politics.jpg')"},
        {"key": "d", "title": "Entertainment", "image": "require('./img/entertainment.png')"},
        {"key": "e", "title": "Economics", "image": "require('./img/economics.jpg')"},
        {"key": "f", "title": "Technology", "image": "require('./img/technology.jpg')"},
        {"key": "g", "title": "Others", "image": "require('./img/m.jpg')"},
    ]
    

    to this

    [
        {"key": "a", "title": "Bangladesh", "image": require('./img/bangladesh.jpg')},
        {"key": "b", "title": "Sports", "image": require('./img/sports.jpg')},
        {"key": "c", "title": "Politics", "image": require('./img/politics.jpg')},
        {"key": "d", "title": "Entertainment", "image": require('./img/entertainment.png')},
        {"key": "e", "title": "Economics", "image": require('./img/economics.jpg')},
        {"key": "f", "title": "Technology", "image": require('./img/technology.jpg')},
        {"key": "g", "title": "Others", "image": require('./img/m.jpg')},
    ]