0

I'm trying to display image by map an array of image, but i faced this error Invalid call at line 13: require(item)

Here is the code

/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {Image, TouchableOpacity, View} from 'react-native';

export default function ImageShow() {
  const imagePath = ['./Ellipse2.png', './Ellipse3.png'];
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      {imagePath.map((item, index) => (
        <TouchableOpacity
          key={index}
          style={{width: 80, height: 80, borderColor: 'grey', borderWidth: 1}}>
          <Image source={require(item)} />.  ==> ERROR HERE
        </TouchableOpacity>
      ))}
    </View>
  );
}

Image path is correct, i try to change item with path to item, and it work, so it not because of path, but i still don't know how to display multi image at the sametime, using expo

Please help, thank a lots

Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
CODEforDREAM
  • 863
  • 1
  • 8
  • 24
  • How can you show multiple images into single component? If you want to show multiple images then you have to use Flatlist. – Rakesh Saini Nov 25 '21 at 04:11
  • 1
    The error message might be different but the issue is same, you can't use dynamic require to import images in react native. [Static Image Resources - React Native Docs](https://reactnative.dev/docs/images#static-image-resources) Specifically `In order for this to work, the image name in require has to be known statically.` – Ugur Eren Nov 25 '21 at 04:26
  • 2
    update your image array like this `const imagePath = [require('./Ellipse2.png'), require('./Ellipse3.png')];` – cain Nov 25 '21 at 05:18
  • 2
    @maddy this is the answer, thank you – CODEforDREAM Nov 25 '21 at 06:29

0 Answers0