CODEWITHSUNDEEP
jsonreact-native
Nimila Hiranya
Nimila Hiranya

Reputation: 5182

Specifying JSON dynamically in React Native

I'm trying to get specific JSON files according to the prop passed to the page.

var data = require('./../mock-data/items/item_' + this.props.id + '.json');

But this fails and gives the following error message.

Unhandled JS Exception: Requiring unknown module "./../mock-data/items/item_2.json". If you are sure the module is there, try restarting the packager.

What is causing this? Any workaround?

Upvotes: 0

Views: 944

Answers (1)

Eyal Eizenberg
Eyal Eizenberg

Reputation: 4033

Requiring modules dynamically is not allowed in React Native. You need to create a switch/method/if/object that will require the file you need.

// 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} />

More info here: https://facebook.github.io/react-native/docs/images.html

Upvotes: 2

Related Questions