[Android] Opening local HTML file as text #428

filiptdz · 2019-03-18T14:19:05Z

When I use source={require('./filePath.html')}, the iOS WebView loads the file correctly, but Android renders it as text instead:

The text was updated successfully, but these errors were encountered:

ateymoori · 2019-03-19T05:15:08Z

same problem

maxschmeling · 2019-03-20T16:25:12Z

I'm having an issue on Android also, but it's actually crashing with this error:
TypeError: source is not an Object. (evaluating "method' in source')

It is working if I use a URI source to a local asset (which is what I do when __DEV__ isn't truthy) but this breaks dev reloading:
{ uri: "file:///android_asset/overlay.html" }

sunkaigoon · 2019-04-09T04:04:12Z

same problem with Android
render() {
let html = require('./tpl.html');
if (!__DEV__ && global.ANDROID) {
html = { uri: 'file:///android_asset/tpl.html' };
}
return (
<WebView
ref={(ref) => { this.chart = ref; }}
javaScriptEnabled
scrollEnabled={false}
injectedJavaScript={renderChart(this.props)}
style={{
flex: 1,
backgroundColor: this.props.backgroundColor || 'transparent'
}}
originWhitelist={['*']}
source={html}
onMessage={event =>
(this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null)}
/>
);
}
When __DEV__ crashing with this error:
TypeError: source is not an Object. (evaluating "method' in source'),
but When !__DEV__ it get a blank view

tusharmutreja · 2019-04-16T07:14:42Z

same error , Opening html file as text in IOS. Any updates???

filiptdz · 2019-04-16T11:48:20Z

@tusharmutreja wait, this is happening to you on iOS? Care to show your code?

danielgindi · 2019-04-25T07:38:13Z

Does not happen in iOS, happens in Android as no Content-Type header is returned for the asset.
I think this is only in Debug mode though.

SnaiNeR · 2019-04-27T21:07:38Z

Error

TypeError: TypeError: TypeError: source is not an Object. (evaluating ''method' in source')

with local file in source prop
source={require('../index.html')}

But works correctly with url in source prop
source={{uri: 'mysite' }}

Android Debug

filiptdz · 2019-04-29T19:27:43Z

Does not happen in iOS, happens in Android as no Content-Type header is returned for the asset.
I think this is only in Debug mode though.

@danielgindi I found this in my investigation as well, but either that isn't the only problem, or I wasn't successful in adding the Content-Type

RBrNx · 2019-06-14T10:13:27Z

Currently having the same issue with Expo SDK 33 as they have now added support for this package. Did anyone find a proper solution for Dev + Prod?

reggie3 · 2019-06-23T17:03:12Z

@filiptdz How did you attempt to set the Content-Type header?

filiptdz · 2019-06-23T22:33:43Z

Yeah, but either I was unsuccessful (I couldn't debug that it was working) or it didn't solve the issue.

…

On Sun, Jun 23, 2019, 14:03 Reginald Johnson ***@***.***> wrote: @filiptdz <https://github.com/filiptdz> How did you attempt to set the Content-Type header? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#428>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AE4KTRXTQ23XAMSTGVBXQG3P36UFFANCNFSM4G7HSZHQ> .

reggie3 · 2019-06-25T22:43:13Z

@filiptdz Do you mind saying what you did and how you did it?

filiptdz · 2019-06-26T16:08:29Z

@reggie3 I'm sorry, but it's been a couple months. My best guess would be adding it on the WebView createViewInstance method on /android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java

smontlouis · 2019-06-27T12:13:40Z

I fixed the issue by doing the following:

Create an js file with export default 'your html file in string'
<WebView source={{ html: require('./html.js') }} />

danielgindi · 2019-06-28T04:06:22Z

I fixed the issue by doing the following:

Create an js file with export default 'your html file in string'

<WebView source={{ html: require('./html.js') }} />

This does not fix the issue, as it will not load any resources referenced by the HTML.

smontlouis · 2019-06-28T04:25:35Z

Actually yes it will. Since the html will be processed like an html file. I am just changing the way its imported. I am using webpack and preact with some loaders to generate my html. Everything is working flawlessly.

danielgindi · 2019-06-28T07:16:04Z

You're not getting it. It you have an assets folder with assets/index.html + assets/logo.png, then index.html won't be able to reference the logo.png. It could reference external resources, but for local resources - you would have to modify the HTML and change the urls of the resources.
I'm guessing those urls are also different between dev and prod.

smontlouis · 2019-06-28T20:55:02Z

Oh this is what you mean. Ok but this is not really an issue, it makes sense.

Sorry I was talking about the first issue.

If you want to use local assets you need to bundle them inline using webpack or host them externally.

danielgindi · 2019-06-30T05:33:16Z

Well that defeats the purpose of the property that's meant to load an HTML from the assets folder :-)

PaddyLock · 2019-07-09T11:23:34Z

If it helps anyone, I resorted to hosting my html file in an S3 bucket and including using

source={{uri: 'https://mys3bucket.s3-eu-west-1.amazonaws.com/mobile_assets/myfile.html'}}

paldepind · 2019-07-10T12:08:02Z

Per this comment it appears that source={require('./filePath.html')} is not supported by react-native-webview.

dellwatson · 2019-07-15T08:06:33Z

anyone fix this on Android ? need this urgent.

I can't even path the file in android, this path didnt work { uri: "file:///android_asset/index.html" }

filiptdz · 2019-07-17T12:14:12Z

You're free to try fixing it :)

…

On Mon, Jul 15, 2019, 05:06 Dale Watson ***@***.***> wrote: anyone fix this on Android ? need this urgent — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#428>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AE4KTRXQVS37GOECLCKJL7TP7QVYXANCNFSM4G7HSZHQ> .

paldepind · 2019-07-30T14:47:00Z

@dellwatson This workaround may help. That's what we did to get around this issue. It's essentially what @bulby97 suggested above but with a Webpack configuration that bundles everything into a single HTML file to fix the problem pointed out by @danielgindi.

filiptdz · 2019-07-30T16:47:08Z

@paldepind nice one! thanks for sharing

Satish1729 · 2019-08-01T18:16:06Z

Error
TypeError: TypeError: TypeError: source is not an Object. (evaluating ''method' in source')
with local file in source prop
source={require('../index.html')}

But works correctly with url in source prop
source={{uri: 'mysite' }}

Android Debug

Any fix for this issue? Appreciate the help

filiptdz · 2020-01-03T00:19:12Z

I'd say this issue is still unresolved

…

On Thu, Jan 2, 2020, 21:07 github-actions[bot] ***@***.***> wrote: Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like *still searching for solutions* and if you found one, please open a pull request! You have 7 days until this gets closed automatically — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#428>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4KTRW5SNQ2RKX7GXKYJ6TQ3Z6VXANCNFSM4G7HSZHQ> .

assetcorp · 2020-01-05T22:52:46Z

It seems there are many things that need to be looked into in order to solve this issue. It would be a dream come true if it's resolved though. :)

khurana3192 · 2020-01-06T13:02:58Z

still searching for solutions

jamonholmgren · 2020-05-28T17:08:05Z

@danielgindi I appreciate your detailed comment from last September. Have you learned any more about this in the meantime?

samithaf · 2020-06-11T07:14:27Z

The following solution works in both iOS and Android Apps. Also I have tested it on Debug and Release builds.

Web view component:

<WebView
        ref={webView}
        source={{html: require('./chart-template').template()}}
        showsHorizontalScrollIndicator={false}
        bounces={false}
        scrollEnabled={false}
      />

chart template file:

export const template = () => `<!doctype html>

<html lang="en">
<head>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/>
</head>

<body>
  <h1>Hey React Native</h1>
</body>
</html>`

jamonholmgren · 2020-06-13T20:34:19Z

Very interesting, @samithaf !

jtreat3 · 2020-07-22T17:21:47Z

And if that html template references JS scripts, or images?
Doesn't work for me.

jtreat3 · 2020-09-09T17:52:17Z

Samithaf's solution doesn't render js or css linked by that html file.

…

On Sat, Jun 13, 2020 at 4:34 PM Jamon Holmgren ***@***.***> wrote: Very interesting, @samithaf <https://github.com/samithaf> ! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#428 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEN5EZWZ6N7RAGRL35OYTVTRWPPFTANCNFSM4G7HSZHQ> .

-- Jay Treat

samithaf · 2020-09-09T23:07:33Z

@jtreat3 I used this solution to wire up a charting library which had a JS script and it was working. I can tryout again if you can specify the build type that you noticed the problem

Here is a sample working solution which got JS and CSS in the HTML file, https://snack.expo.io/@samithaf/react-native-web-view

jtreat3 · 2020-09-10T16:32:49Z

I was able to apply CSS with an inline style tag, but I wasn't able to execute JS, inline or otherwise.

…

On Wed, Sep 9, 2020 at 7:07 PM Samitha Fernando ***@***.***> wrote: @jtreat3 <https://github.com/jtreat3> I used this solution to wire up a charting library which had a JS script and it was working. I can tryout again if you can specify the build type that you noticed the problem — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#428 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEN5EZU4CE2TZZGN7KUQR3LSFADELANCNFSM4G7HSZHQ> .

-- Jay Treat

samithaf · 2020-09-10T23:03:50Z

I was able to apply CSS with an inline style tag, but I wasn't able to execute JS, inline or otherwise.
…
On Wed, Sep 9, 2020 at 7:07 PM Samitha Fernando @.***> wrote: @jtreat3 https://github.com/jtreat3 I used this solution to wire up a charting library which had a JS script and it was working. I can tryout again if you can specify the build type that you noticed the problem — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#428 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEN5EZU4CE2TZZGN7KUQR3LSFADELANCNFSM4G7HSZHQ .
-- Jay Treat

If you looked at the sample project that I have shared, for sure it execute the JS and draws the chart as well.

jeloagnasin · 2020-10-03T23:10:25Z

@samithaf, your solution worked! But I had to add String.raw to escape all characters.

@jtreat3, you might want to try adding String.raw at the start of your HTML content like below.

export const template = () => String.raw`<!doctype html>

<html lang="en">
<head>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/>
</head>

<body>
  <h1>Hey React Native</h1>
</body>
</html>`

samithaf · 2020-10-04T11:23:40Z

@jeloagnasin Good to hear that the solution worked for you. Maybe the solution can be added to readme.md since it looks so many people stuck with the same problem.

Alain1405 · 2020-10-29T12:09:46Z

@jtreat3 I used this solution to wire up a charting library which had a JS script and it was working. I can tryout again if you can specify the build type that you noticed the problem

Here is a sample working solution which got JS and CSS in the HTML file, https://snack.expo.io/@samithaf/react-native-web-view

@samithaf as your solution anything to do with TradingView? I am currently investigating the best way to support loading TV files from local files on Android.

samithaf · 2020-10-31T23:04:55Z

@Alain1405 I found this workaround when I wanted to show the high-charts in a simple web-view within React Native. Probably you can apply the sample principal to TradingView too?

prasanna-ML-expert · 2021-01-15T11:27:25Z

@samithaf, your solution worked! But I had to add String.raw to escape all characters.

@jtreat3, you might want to try adding String.raw at the start of your HTML content like below.
export const template = () => String.raw`<!doctype html>

<html lang="en">
<head>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/>
</head>

<body>
  <h1>Hey React Native</h1>
</body>
</html>`

Did your html had div tags and js files and script tags? Only static part of html file worked for me, but not dynamic javascript code.

samithaf · 2021-01-17T23:06:39Z

@jkreddy123 could you please check the following working sample? (this one creates a chart on run time) https://snack.expo.io/@samithaf/react-native-web-view

dpwiese · 2021-01-24T17:32:32Z

The following solution works in both iOS and Android Apps. Also I have tested it on Debug and Release builds.

@samithaf your solution is quite nice, although using strings of html and JavaScript becomes a problem when the JS itself contains functions which use template literals. Have you encountered the same or figured out a solution for this case?

Shishir-Tiwari · 2021-02-04T08:03:14Z

The following solution works in both iOS and Android Apps. Also I have tested it on Debug and Release builds.

@samithaf your solution is quite nice, although using strings of html and JavaScript becomes a problem when the JS itself contains functions which use template literals. Have you encountered the same or figured out a solution for this case?

Hi @dpwiese , we could preserve functions by using a custom replacer.

const stringifyWithFunctions = (options): string => {
      const functions =  {};
      let serializedOptions: string;
      let i = 0;

      serializedOptions = JSON.stringify(options, (val, key) => {
        const fcId = `###Function${i}###`;

        // set reference to function for the later replacement
        if (typeof key === 'function') {
          functions[fcId] = key.toString();
          i += 1;
          return fcId;
        }

        return key;
      });

      // replace ids with functions.
        Object.keys(functions).forEach(key => {
          serializedOptions = serializedOptions.replace(`"${key}"`, functions[key]);
        });

      return serializedOptions;
    };

Updated version of @samithaf 's example.
https://snack.expo.io/ccYbFcyT7

Corrob · 2022-08-12T17:36:47Z

In case anyone else is looking for a different solution here, this is what worked for me: https://medium.com/@snehabagri.90/reactnative-webview-with-local-content-c98a09340801

It is essentially just adding the HTML, JS, and CSS files to android assets and the iOS IPA and then using a local file URI to show it.

mihkuno · 2022-12-31T00:23:42Z

I got this to work on expo, ios, android somehow

https://stackoverflow.com/a/74966760/12724665

SnaiNeR mentioned this issue Jun 15, 2019

[Android] Local html file don't work on debug #549

Closed

reggie3 mentioned this issue Jun 23, 2019

Error Opening HTML File with Bundled JS and CSS in Android #667

Closed

paldepind mentioned this issue Jul 10, 2019

TypeError: Cannot use 'in' operator to search for 'method' in 9 #518

Closed

paldepind mentioned this issue Jul 10, 2019

Webview HTML renders as string on Android in dev environment expo/expo#4566

Closed

github-actions bot added the Stale label Jan 3, 2020

github-actions bot closed this as completed Jan 14, 2020

bovesan mentioned this issue Apr 8, 2020

Update Guide.md #1305

Merged

jamonholmgren reopened this May 28, 2020

github-actions bot closed this as completed Jun 5, 2020

azha1983 mentioned this issue Oct 21, 2020

how to install on Expo.io fusioncharts/react-native-fusioncharts#2

Closed

bisak mentioned this issue Oct 16, 2022

the graphic does not appear in the example dpwiese/react-native-canvas-charts#8

Open

TheAlmightyBob mentioned this issue Nov 26, 2022

Html doesn`t work on android device (example LocalPageLoad.tsx) #2760

Closed

thehale mentioned this issue May 2, 2024

Offline cubing.js SpeedcuberOSS/speedcuber-timer#125

Open

[Android] Opening local HTML file as text #428

[Android] Opening local HTML file as text #428

Comments

filiptdz commented Mar 18, 2019 • edited Loading

ateymoori commented Mar 19, 2019

maxschmeling commented Mar 20, 2019

sunkaigoon commented Apr 9, 2019 • edited Loading

tusharmutreja commented Apr 16, 2019

filiptdz commented Apr 16, 2019

danielgindi commented Apr 25, 2019 • edited Loading

SnaiNeR commented Apr 27, 2019 • edited Loading

filiptdz commented Apr 29, 2019

RBrNx commented Jun 14, 2019

reggie3 commented Jun 23, 2019

filiptdz commented Jun 23, 2019 via email

reggie3 commented Jun 25, 2019

filiptdz commented Jun 26, 2019

smontlouis commented Jun 27, 2019

danielgindi commented Jun 28, 2019

smontlouis commented Jun 28, 2019

danielgindi commented Jun 28, 2019

smontlouis commented Jun 28, 2019 • edited Loading

danielgindi commented Jun 30, 2019

PaddyLock commented Jul 9, 2019

paldepind commented Jul 10, 2019 • edited Loading

dellwatson commented Jul 15, 2019 • edited Loading

filiptdz commented Jul 17, 2019 via email

paldepind commented Jul 30, 2019 • edited Loading

filiptdz commented Jul 30, 2019

Satish1729 commented Aug 1, 2019

filiptdz commented Jan 3, 2020 via email

assetcorp commented Jan 5, 2020

khurana3192 commented Jan 6, 2020

jamonholmgren commented May 28, 2020

samithaf commented Jun 11, 2020

jamonholmgren commented Jun 13, 2020

jtreat3 commented Jul 22, 2020

jtreat3 commented Sep 9, 2020 via email

samithaf commented Sep 9, 2020 • edited Loading

jtreat3 commented Sep 10, 2020 via email

samithaf commented Sep 10, 2020

jeloagnasin commented Oct 3, 2020

samithaf commented Oct 4, 2020

Alain1405 commented Oct 29, 2020

samithaf commented Oct 31, 2020

prasanna-ML-expert commented Jan 15, 2021

samithaf commented Jan 17, 2021

dpwiese commented Jan 24, 2021

Shishir-Tiwari commented Feb 4, 2021

Corrob commented Aug 12, 2022 • edited Loading

mihkuno commented Dec 31, 2022 • edited Loading

filiptdz commented Mar 18, 2019 •

edited

Loading

sunkaigoon commented Apr 9, 2019 •

edited

Loading

danielgindi commented Apr 25, 2019 •

edited

Loading

SnaiNeR commented Apr 27, 2019 •

edited

Loading

smontlouis commented Jun 28, 2019 •

edited

Loading

paldepind commented Jul 10, 2019 •

edited

Loading

dellwatson commented Jul 15, 2019 •

edited

Loading

paldepind commented Jul 30, 2019 •

edited

Loading

samithaf commented Sep 9, 2020 •

edited

Loading

Corrob commented Aug 12, 2022 •

edited

Loading

mihkuno commented Dec 31, 2022 •

edited

Loading