CODEWITHSUNDEEP
javascriptreactjsreact-native
Lucas de Freitas Miranda
Lucas de Freitas Miranda

Reputation: 41

FlatList don't render images

I got a problem with FlatList, I'm trying to render images with data I get from a database. But nothing is showing up. I can see the data from console, as you can see here:

enter image description here

But when I try o access photo it gives me two errors:

  1. TypeError: Cannot read property 'photo' of undefined
  2. Warning: Can't perform a React state update on an unmounted component.

Right now I don't know why it's giving undefined, and the second error I have no clue about it.

This is my request to the backend:

    loadGames = async () => {
        const response = await api.get("/games")

        const  { games }  = response.data
        console.log(games)
        this.setState({ games })
    }

I make the request as soon as the component mounts, so:

    componentDidMount() {
        this.loadGames();
        this.loadPlayers();
        console.log(this.state.games)     
    }

I've declared the state:

    state = {
        games:[],
        teams:[],
        players:[]
    }

Now the FlatList:

<View style={{ height: 130, marginTop: 20, justifyContent:'center'}}>
    <FlatList
        horizontal
        showsHorizontalScrollIndicator={false}
        data={this.state.games}
        keyExtractor={item => item._id}
        renderItem={({ item }) => this.renderGames(item)}
     />
</View>

The method that I call in renderItem:

renderGames = ({ item }) => {
    <View>
        <TouchableOpacity style={{flex:1/3, aspectRatio:1}} >
            <Image source={{ uri: `./image/games/${item.photo}` }} />
        </TouchableOpacity>
    </View>
}

Anyone know where I'm doing wrong? How can I make it work?

Upvotes: 0

Views: 404

Answers (2)

0xPingo
0xPingo

Reputation: 2197

Aside from your renderGames() function not returning anything like @RutherfordWonkington mentioned, the React Native Image component does not accept .ico (windows icon) files.

The currently supported formats are png, jpg, jpeg, bmp, gif, webp (Android only), psd (iOS only) https://facebook.github.io/react-native/docs/image#source

Upvotes: 0

Chris B.
Chris B.

Reputation: 5763

Your renderGames function isn't actually returning anything.

renderGames = ({ item }) => (
    <View>
        <TouchableOpacity style={{flex:1/3, aspectRatio:1}} >
            <Image source={{ uri: `./image/games/${item.photo}` }} />
        </TouchableOpacity>
    </View>
)

Should work.

Also, you should pass that function in to the renderItem prop, rather than creating your own arrow function, since you're passing in item as an argument, but then destructuring another item prop off of it:

renderItem={this.renderGames}

Upvotes: 1

Related Questions