Flatlist won't show images from json (React Native)

user_5070119 0
Viewed 3137

i've been having this issue with my images not showing in my application.

Im using FlatList: colors.js

Here is my javascript file holding the json which im importing into the View: json file

I've been trying so many ways to get the Image component to accepts the images but its just not showing, many of the ways i've been trying doesn't show as an error, the images is just not showing at all.

Hope someone can help me out of this dilemma, been stuck for days and googling as a mad man -.-

react-native json javascript
2 Answers

You have 2 problems in your code:

  1. you need to use require instead of { uri: '' } for local images
  2. when you use require you can't pass a variable as path, so you need to pass just literal string.

So replace each path line in your colors array to include require

example: 

{
  id: 1,
  path: require('../../assets/character-customs/albert/colors/c1.png'),
}

Also update Image component line with this

<Image style={styles.images} source={item.path} />

This should work for you

user_63946440

For me flatlist was wrapping all data inside item so this fixed the problem for me

 <Image source={{uri:item.path}}/>

if this doesnt work try to log item from from renderitem method

user_96261230
Related