0

I googled so far and tried to find out the solution but not yet.

I know require() works only with static path, so I want alternative ways to solve my problem. I found this answer here but it doesnt make sense for thousands of resources.

Please advise me the best approach to handle such case.

Background

I have thousand of json files that containing app data, and declared all the file path dynamically like below:

export var SRC_PATH = {
    bible_version_inv: {
        "kjv-ot": "data/bibles/Bible_KJV_OT_%s.txt",
        "kjv-nt": "data/bibles/Bible_KJV_NT_%s.txt",
        "lct-ot": "data/bibles/Bible_LCT_OT_%s.txt",
        "lct-nt": "data/bibles/Bible_LCT_NT_%s.txt",
        "leb": "data/bibles/leb_%s.txt",
        "net": "data/bibles/net_%s.txt",
        "bhs": "data/bibles/bhs_%s.txt",
        "n1904": "data/bibles/na_%s.txt",
        .....
        "esv": "data/bibles/esv_%s.txt",
        .....
    },
    ....

As you can see, file path contains '%s' and that should be replace with right string depends on what the user selected.

For example if user select the bible (abbreviation: "kjv-ot") and the chapter 1 then the file named "data/bibles/Bible_KJV_OT_01.txt" should be imported.

I'm not good enough in react-native, just wondering if there is other alternative way to handle those thousands of resource files and require only one at a time by dynamically following the user's selection.

Any suggestions please.

Tiffgray34
  • 61
  • 1
  • 8
  • Can you provide an example scenario? Like what condition would result in what particular result? – Uzair A. Nov 17 '18 at 04:40
  • @UzairA., edited the question again, condition means the user behavior, so for example user select the "kjv-ot" bible and the chapter 1, then the file name should be "data/bibles/Bible_KJV_OT_01.txt". That means the app contents should be changed following the user's behavior. thanks – Tiffgray34 Nov 19 '18 at 04:25

1 Answers1

2

Instead of exporting a flat file, you could export a function that took a parameter which would help build out the paths like this:

// fileInclude.js
export const generateSourcePath = (sub) => {
     return {
         bible_version_inv: {
            "kjv-ot": `data/bibles/Bible_KJV_OT_${sub}.txt`
         }
     }
}


//usingFile.js
const generation = require('./fileInclude.js');
const myFile = generation.generateSourcePath('mySub');

const requiredFile = require(myFile);

then you would import (or require) this item into your project, execute generateSourcePath('mysub') to get all your paths.

Petrogad
  • 4,405
  • 5
  • 38
  • 77
  • as you know require() and import() are working with the static file path not with dynamic variables, if this is the solution then how I use this func with the require(). – Tiffgray34 Nov 19 '18 at 04:29
  • You would import this function, and inline require the file that you're attempting to use locally. Require can happen dynamically. – Petrogad Nov 19 '18 at 14:40
  • any sample script please. so something like this? require (generateSourcePath(sub)); – Tiffgray34 Nov 19 '18 at 15:59
  • Updated answer to see how it could be used. – Petrogad Nov 19 '18 at 19:20
  • Thanks for your help, @Petrogad. By the way still getting error. => invalid call require(myFile)(null) and when I output the myFile to the console simulator says "No bundle URL present". – Tiffgray34 Nov 20 '18 at 03:52
  • This is unrelated then. Honestly if you're using react-natie you can import in the fileInclude then you need to make sure your files are relative to the the file including them which makes it all the more tricky. So your usingFile.js needs to have a relative path to where data is. It might be require(`../../${myFile}`) or something to that extent. – Petrogad Nov 20 '18 at 14:36
  • I'm using react-native and require() doesn't work with variables. I'm going to get the data dynamically from the web server with the source url. By the way thanks for sharing your suggestions. – Tiffgray34 Nov 20 '18 at 14:49