Getting the path of an image stored locally from a JSON file - React Native

Question

I've been looking for a way to get paths of images stored locally in my project from a JSON file . I already saw answers suggesting dropping the JSON file and using an array in a .JS file instead, just like this:

const DATA = [
   {
    "ID": 0,
    "Image": require('../assets/image0.png')
   },
   {
    "ID": 1,  
    "Image": require('../assets/image1.png')
   }
]

Thing is I can solely use a JSON file to get my data from, which results from converting an Excel to JSON file , and nothing else. So let's say I have a data.json file as follows:

{  
  "data": [
        {
            "ID": 0,
            "Image": "require('../assets/image0.png')"
        },
        {
            "ID": 1,  
            "Image": "require('../assets/image1.png')"
        }
    ]
}

Currently, it is not possible to use the paths stored in the "Image" attributs as a source in <Image source = {}/> to display an image. Does somebody know a way to conserve the JSON file and somehow get and use the paths from it?

EDIT:

My structure:

- assets
       - favicon.png // Image I want to display
       - icon.png // Image I want to display
- screens
       - File1.js // Where I want to display images
       - images.json // From where to get paths

File1.js

 // Other imports
 import assets from "./images.json;
 require("../assets/favicon.png");
 require("../assets/icon.png");

const File1 = () => {
    return (
       <View>
        {assets.data.map((i) => (
            <Image
              source={{
                uri: require(i.Image.replace("require('", "").replace("')", ""))
              }}
              resizeMode="contain"
              style={styles.logo}
            />
          ))}
            {/*<Image source={require('../assets/favicon.png')}></Image> Its working but not above*/}
      </View>
    )
};

export default File1;

const styles = StyleSheet.create({
   logo: {
        height: 80
    },
});

images.json

{
    "data": [
        {
            "ID": 0,
            "Image": "require('../assets/favicon.png')"
        },
        {
            "ID": 1,
            "Image": "require('../assets/icon.png')"
        }
    ]
}

But getting:

TransformError src\screens\File1.js: src\screens\File1.js:Invalid call at line 323: require(i.Image.replace("require('", "").replace("')", ""))
- node_modules\react-native\Libraries\Utilities\HMRClient.js:320:31 in showCompileError
- node_modules\react-native\Libraries\Utilities\HMRClient.js:227:26 in client.on$argument_1
- node_modules\eventemitter3\index.js:181:21 in emit
- node_modules\metro\src\lib\bundle-modules\HMRClient.js:142:10 in _ws.onmessage
- node_modules\event-target-shim\dist\event-target-shim.js:818:20 in EventTarget.prototype.dispatchEvent
- node_modules\react-native\Libraries\WebSocket\WebSocket.js:231:8 in _eventEmitter.addListener$argument_1
- node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:189:10 in emit
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

Answer 1

You need to store in an array only the path, for example:

const images = {data : [
    {
        "ID": 0,
        "Image": "require('../assets/image0.png')"
    },
    {
        "ID": 1,  
        "Image": "require('../assets/image1.png')"
    }
]}

and in your render component:

return (<>{
images.data.map(i => <Image source={require(i.Image.replace("require('", "").replace("')", ""))}/>)
}</>)