Importing dynamic filenames into React-Native - react-native

Question

I have a menu.json file with hundreds of items in it:
menu_items = [
{
name: "Category 1",
file: "cat1.json"
},
{
name: "Category 2",
file: "cat2.json"
},
{
name: "Category 3",
file: "cat3.json"
},
{
name: "Category 4",
file: "cat4.json"
},
{
name: "Category 5",
file: "cat15.json"
}
]
I am able to read the menu.json file. I then create a Scrollable List showing each of the entries. When a user clicks on the entry, I want to load another screen that imports the specified json file.
Currently, when someone clicks an item in the list, the following module is loaded:
<DisplayItem file_name={this.state.selected_file} />
Then in my DisplayItem I have the following:
const item_data = require('./' + this.props.file_name);
However, I get the error:
Invalid call at line 52: require(file)
Apparently, I am unable to do imports or requires when the filename is dynamic. The only solutions I have seen is to manually require all of them first of all.
I find this solution a bit challenging because then I end up with redundant data. Any time I update the menu.json file then I have to remember to make the exact same update to the module requiring all the json files.
Is there a more efficient way to do this that eliminates the redundancy issue?

Answer 1

As I know You can't require a file in react native from a dynamic value, because it will make the compiler doesn't know which file to be included when building the app.
As written in React-Native's Image documentation
In order for this to work, the image name in require has to be known
statically.
For example
// GOOD
<Image source={require('./my-icon.png')} />;
// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;
// GOOD
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />;