React-native: [WebView] Is it possible to load local js file in WebView html prop?

Created on 29 May 2015 · 26Comments · Source: facebook/react-native

For Example, I put a web/jquery.js file in bundle, then I would like to use:

var html=`
<html>
<script src="web/jquery.js"></script>
...`;

then use WebView to set html prop to html.

I tried to set src to jquery in CDN, it works fine. but don't work with above code.

Is it because currently local js in WebView not be supported? Or I miss something at here?

Good first issue Locked

Source

bright-sea

Most helpful comment

If I package my app and view it on an iOS device, the asset files are not there. The only file, that is there, is the html file used by the WebView (and required).
How can I make sure, the packager copies the *.js and *.css files to the asset directory?

richardbrammer on 5 Mar 2016

👍7

All 26 comments

I'm not sure you can do this, but if you can you would use a file:// protocol, which you would grab from the following snippet (I'm assuming jquery.js is in your xcode project)

NSURL *jqueryLocation = [[NSBundle mainBundle] urlForResource:@"jquery" withExtension:@"js"];

That would return a uri with something like file://something/Devices/abcd-123/caches/bundle/jquery.js which is the absolute path on the device/emulator after compiling your app

JohnyDays on 29 May 2015

@bright-sea - I think what we want here is something like:

<WebView url="/web/index.html" />

Then we just check if the url is http http or not - if not, we do something like this

Or we could explicitly support setting a root

<WebView baseURL="/web" html={html} />

And then you can pass in your html prop just like above.

Do you want to try submitting a patch for that? cc @JohnyDays

brentvatne on 29 May 2015

👍1

@brentvatne I don't have access to a MAC over the weekend, if noone takes it up until monday I'll give it a shot.
However I don't think that's what @bright-sea was asking for! His question was more about requiring a <script> tag inside of the html(which is inlined and dynamically generated), where the source script was a file required inside the app bundle. Though perhaps you just explained how to do that and I misunderstood.

JohnyDays on 29 May 2015

@brentvatne - set url or html to a local html file isn't what I want. What I need is to put some js files( orcss files or any other web assets) into bundle, then in html template we can use these files so that we can do any kinds of works from there.

@JohnyDays - Thanks, your suggestion helps me. I use react-native-fs to get the path of main bundle, then use list below code and it works fine:

<script src="file://${mainBundlePath}web/jquery.js"></script>

Of couse, if we can have this kinds of support in react native directly instead of depends on third party module would be great.

bright-sea on 29 May 2015

@bright-sea - the second option I proposed would help:

<WebView baseURL="/web" html={html} />

By setting the baseURL, like in the example I linked to on StackOverflow, the WebView knows where to look for the css/js that you link to :smile:

The html var I'm using there is just the same as what you used in your original post.

brentvatne on 29 May 2015

👍5 😄2

@JohnyDays - that would be great! looking forward to seeing it when you have time.

Given that this issue has been solved for now I'll close this, but I hope to see a PR to add something like what I mentioned above to WebViews - I think that would be very useful.

brentvatne on 29 May 2015

@brentvatne yes, you are right! Your proposal will be more elegant.

bright-sea on 29 May 2015

Oops apparently having a <script> tag in your comment hides the rest, apologies!

JohnyDays on 29 May 2015

@bright-sea
Hi. Your solution works like a chart. But would that work even App is packaged and deployed on a device ?
Thanks You..

gs-akhan on 13 Nov 2015

richardbrammer on 5 Mar 2016

👍7

I have the same question as @richardbrammer. Any updates or guidance would be very welcome.

DanielApt on 26 Sep 2016

+1 on Android @richardbrammer .

qxqxqxqx on 21 Oct 2016

👍3

+1 on Android

ghost on 13 Nov 2016

+1 on Ios

matdru on 12 Apr 2017

+1 on android

VishwajeetDagar on 14 Apr 2017

what is will like to ask is how to load a react base webapp on a webview. i think that is what he is asking ..

AyubaMakoa on 18 Sep 2017

How this can be closed, when people still are having issues with loading local html, css, js files, crossplatform in react-native :( @brentvatne

brancooo1 on 9 Oct 2017

@brancooo1 - this isn't the right place for feature requests, if this hasn't been implemented it's because the contributors to the project don't need it for their apps. you can post a feature request to https://react-native.canny.io/feature-requests or implement it yourself or pay someone to implement it for you :)

brentvatne on 9 Oct 2017

I am also facing the same issue. My .js .css files are loaded on simulator and it is working as expected. But those files are not loaded on iOS device. any help?

sujitpk-perennial on 10 Oct 2017

After doing some R&D, for me expo was creating the issue. After uninstalling the expo from the app, app is working as expected. It looks like expo is ignoring the js, css files.

sujitpk-perennial on 10 Oct 2017

Hey guys!
I am also facing the same problem. Following is the my app folder structure.

<ProjectName>
  app
    Common
      assets
        fonts
        js
          myLocalFile.js
      components
      containers
      stores
      .
      .
      .
    Module1
      components
        WebViewComponent
          index.js    <- I'd like to import `myLocalFile.js` in html string and pass it to `WebView` 
    Module2
    Module3
    .
    .
   ```

In `WebViewComponent/index.js`,

const htmlString = '

some html code

render() {
return (
source={{ html: htmlString, baseUrl: 'app/Common/assets/js/' }}
scrollEnabled={false}
/>

}
```

I am rendering above code and unable to execute my js code.

Any suggestions?

0xc0d3r on 19 Nov 2017

I am facing the exact same problem, and haven't found any solutions online.

fedegl on 27 Nov 2017

I faced this issue multiple times. Each time it caused by different reason.
1 - First time after removing of expo it works.
2 - I used let keyword to declare a variable. 'let' not support in Safari. I replaced it with var.
3 - Need to add scripts in head for iOS and in body for Android.
4 - Specifically for iOS, if we need to run in release mode then we should create assets folder and need to add all images and js, css file at that path.
Refer: https://github.com/facebook/react-native/issues/4084
5 - Put alert into js file to check is it loading or not.

Better to debug webView in Safari and chrome. Few times I found that some functions was giving errors.

sujitpk-perennial on 22 Jan 2018

Do not use absolute path instead use relative path with dot(.) followed with the path.
Like this:
<script src="./js/jquery.js"></script>
^

kirtjarmona on 17 Feb 2018

The best solution is to encode the images in base 64 and works perfectly from the WebView.

brainbrain34 on 16 Apr 2018

hey guys
found the trick base on Image doesn't show after bundling into the apk.
as you know require('index.html') work on _simulator_ and _emulator_ for both &driod and IOS
but problem will faced when you bundle and you want release your app
for android just follow this enablejavascript and copy you files in assets folder in YOUR_APP/app/src/main/assets and use just picture below.

and for ios just bundle package with
react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios
when bundle created you have main.bundle.js and asset folder
just copy you files in .xcworkspace like this image
ios
and set free all refrence in will be and unchanged just like mine.
screen shot - - at
i hope this tutorial help you from confusing release app in RN