React Native: how to use require(path) with dynamic urls?

Question

I want to use WebView to show some html content

here is an example:

return (
            <WebView
                    style={styles.container}
                    source={source}
                    scalesPageToFit={Boolean(true)}
                    onNavigationStateChange={this._onNavigationStateChange} />
    )

and for the source variable I need to have two different values:

1) for android platform I need to use something like this:

source = {uri: `file:///android_asset/contents/${languageId}text.html`}

2) for ios I need to use smth. like this:

source = require(`../srv/localization/contents/${languageId}text.html`)

For android it works well, but for ios it doesn't work. And this url works fine for iOS also

require(`../srv/localization/contents/entext.html`)

As I understand that is because of dynamic url (${languageId}text.html)

The question is how to use dynamic urls for iOS?

Meysam Izadmehr · Accepted Answer · 2017-04-20 12:07:18Z

6

As you find out, you can't have dynamic url for require. That's because require get the source at the app start regardless it's place in the code. You shuld require all of the {languageId}text.html and pass the required variable to the source:

var language = {
   en: require(`../srv/localization/contents/entext.html`)
   ...
}

and use it as below:

source = require(language[en])

edited Apr 20, 2017 at 12:07

answered Apr 20, 2017 at 11:11

Meysam Izadmehr

3,2601 gold badge19 silver badges25 bronze badges

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

2 Comments

Dmitry Over a year ago

But what if I don't want to require all files. In one case I need to require entext.html, but in other case I need to require pttext.html. I don't want to store all the files that will probably required in the future. I want to add all necessary files before making a build and require them by prefix in the code @Meysam Izadmehr

Meysam Izadmehr Over a year ago

If your user can change the language in he app, there is not other way with require. If the user can't change the language and text.html is not a small file, make a build for each language. If you don't want to require all the files, maybe you shouldn't use it in the first place. for example you can fetching it from server when user want to change language.

Collectives™ on Stack Overflow

React Native: how to use require(path) with dynamic urls?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related