How to dynamically import images in react native?

Question

i am using react native with expo and i need to import all images in a folder and use them by name on each loop i used this component called FlatGrid from react-native-super-grid to create a CSS grid with images from a dictionary like this

[
    { name: "AppleMusic.png"},
    { name: "discord.png" },
]

<FlatGrid
          itemDimension={150}
          data={items}
          spacing={10}
          windowSize={300}
          renderItem={({ item }) => (
            <View>
              <Image
                source={require(`../ui/icons/${item.name}.png`)}
              />
              <Text>
                {item.name}
              </Text>
            </View>
          )}
        />

but i did not work with source={require(`../ui/icons/${item.name}.png`)} and i tried everything i can think of like importing the images in a seprate file and exporting them like this

 const images = {
  applemusic: require("../ui/icons/AppleMusic.png"),
  discord: require("../ui/icons/discord.png")
}
export default images;

just to help you! it did work when I imported a single image like this import AppleMusic from "../ui/icons/AppleMusic.png"; and used it like this source={require(AppleMusic)} but even if i did this to all the images (25image to be exact) i still can't solve the problem of iterating through the imported images

Answer 1

Inside your Image folder create a index.js file and import all images like this

export const image1 = require('./image1.jpg')
export const image2 = require('./image2.jpg')
export const image3 = require('./image3.jpg')
export const image4 = require('./image4.jpg')

then inside your Class you can import images and use those images to create image array

import {image1,image2,image3,image4} from './images'

const items=[
        { name: image1},
        { name: image2 },
        { name: image3 },
        { name: image4 },
   ]

then you can use it like this

<FlatGrid
      itemDimension={150}
      data={items}
      spacing={10}
      windowSize={300}
      renderItem={({ item }) => (
        <View>
          <Image
            source={item.name}
          />
          <Text>
            {item.name}
          </Text>
        </View>
      )}
    />

Answer 2

const images = {
  applemusic: require("../ui/icons/AppleMusic.png"),
  discord: require("../ui/icons/discord.png")
}
export default images;

Should works! I have tried some similar code.It works as the pic show.

const images = {
    test: require("../assets/test.png"),
    splash: require("../assets/splash.png"),
    icon: require("../assets/icon.png")
}

export default images

function Feed() {
    const list = ["icon", "test", "splash"];
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Feed!</Text>
            <TouchableOpacity
                style={{
                    alignItems: "center",
                    justifyContent: "center",
                    width: 200,
                    height: 50,
                    backgroundColor: "green"
                }}
                onPress={
                    () => {
                        DeviceEventEmitter.emit("ADD_COUNT")
                    }
                }
            >
                <Text>add</Text>
            </TouchableOpacity>
            {
                list.map((name) => {
                    return (
                        <Image
                            source={Images[name]}
                            style={{ width: 100, height: 100 }}
                        />
                    )
                })
            }
        </View>
    );
}