Require json file dynamically in react-native (from thousands of files)

Question

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.

Can you provide an example scenario? Like what condition would result in what particular result? — Uzair A.
– Uzair A., Commented Nov 17, 2018 at 4: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
– Tiffgray34, Commented Nov 19, 2018 at 4:25

Petrogad · Accepted Answer · 2018-11-19 19:20:23Z

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.

edited Nov 19, 2018 at 19:20

answered Nov 17, 2018 at 19:21

Petrogad

4,4335 gold badges41 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Tiffgray34 Over a year ago

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().

Petrogad Over a year ago

You would import this function, and inline require the file that you're attempting to use locally. Require can happen dynamically.

Tiffgray34 Over a year ago

any sample script please. so something like this? require (generateSourcePath(sub));

Petrogad Over a year ago

Updated answer to see how it could be used.

Tiffgray34 Over a year ago

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".

|

Collectives™ on Stack Overflow

Require json file dynamically in react-native (from thousands of files)

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related