Showing images from an array of file names using react native Flatlist-CodePudding

I have made a dummy data file called avatars in the folder assets/dummy-data/Avatars.ts.

export default [
    {id: 1, levels: ["pichu", "picachu", "raichu"]},
    {id: 2, levels: ["charmander", "charmeleon", "charizard"]},
    {id: 3, levels: ["totodile", "croconaw", "feraligatr"]},
    {id: 4, levels: ["squirtle", "wartortle", "blastoise"]},
    {id: 5, levels: ["bulbasaur", "ivysaur", "venusaur"]},
    {id: 6, levels: ["cyndaquil", "quilava", "typhlosion"]},
    {id: 7, levels: ["pidgey", "pidgeotto", "pidgeot"]},
    {id: 8, levels: ["turtwig", "grotle", "torterra"]},
    {id: 9, levels: ["igglybuff", "jigglypuff", "wigglytuff"]},
    {id: 10, levels: ["cleffa", "iclefairy", "clefable"]},
    {id: 11, levels: ["litten", "torracat", "incineroar"]},
    {id: 12, levels: ["nidoran", "nidorina", "vnidoqueen"]},
]

What I want to do is to load this data in another file, and there make a Flatlist component with them. My code is:

import { StyleSheet, Text, View, FlatList, Image } from 'react-native'
import Avatars from '../assets/dummy-data/Avatars'

const OnboardingScreen = () => {
    const test = "charizard"
    console.log(Avatars)
    return (
        <View>
            <FlatList
                data = {Avatars}
                renderItem = {
                    ({item}) =>
                        (
                            <Image source={require(`../assets/images/avatars/${{item}.levels[0]}pichu.jpg`)} />
                        )
                }
            />
        </View>
    )
}

export default OnboardingScreen

const styles = StyleSheet.create({})

And this is the error that I get: Screen capture of the error

Thank you

CodePudding user response：

Dynamic images are not supported in React Native. Currently, support only static image resources because the image name in require has to be known statically.

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./'   icon   '.png')} />

// GOOD
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />

In order to to fix your problem change your avatar data as below

export default [
    {
        id: 1, levels: [
            require('./assets/images/avatars/pichu.jpg'),
            require('./assets/images/avatars/picachu.jpg'),
            require('./assets/images/avatars/raichu.jpg')
        ]
    },
    {
        id: 2, levels: [
            require('./assets/images/avatars/charmander.jpg'),
            require('./assets/images/avatars/charmeleon.jpg'),
            require('./assets/images/avatars/charizard.jpg')
        ]
    },
]

then you can render your images

<Image source={item.levels[0]} />

Hope this helps you. Feel free for doubts.