WebView: Add an option to load local resource from the app bundle

[pilwon]

<WebView/> currently only supports url prop to control what content to load in the web view.

We need an option to load local resource (mainly html but could be others too) from the application bundle.

We could either introduce a new prop for that or reuse url and do some magic conversion. For example, local://<path>.<ext> can be automatically converted to file:///<converted-url>.

NSURL *convertedURL = [[NSBundle mainBundle] URLForResource:@"<path>" withExtension:@"<ext>"];

(Use case: #497)

---

[UPDATE]

As @nicklockwood mentioned in his comment #505 (comment), this works out of box by simply setting a relative file path to url prop. (ex: index.html)

[AbeEstrada]

👍

[adriansdev]

+1

[nicklockwood]

WebView now has an html property:

https://github.com/facebook/react-native/blob/master/Libraries/Components/WebView/WebView.ios.js#L84

[pilwon]

@nicklockwood What kind of string values does html prop expect? Looks like you closed a wrong issue. The above link points at a line modified by the commit 4b4e8ec and it partially fixes #506, not #505. Can we reopen this issue? I am afraid we are not ready to close #506 as well.

[nicklockwood]

Oh, sorry, quite right. But as it happens, any relative URL is considered to be relative to the app resource bundle, so <WebView url="foo.html" /> should load a file called foo.html that's been added to the project.

[nicklockwood]

Let me know if that isn't working, and I'll re-open.

[pilwon]

@nicklockwood It works! 🙀🙀🙀 This is the best solution for this issue 🤘 Thanks-

[mydearxym]

@nicklockwood i use the method <WebView url="test.html" /> and it show :

Error setting property 'url' of RCTWebView with tag #507: The file 'test.html -- file:///Users/xieyiming/Library/Developer/CoreSimulator/Devices/283F4434-57…rs/Bundle/Application/72594A59-1805-4D5C-B8AB-AB79958D08B6/phone_side.app/' does not exist

and i tried html option too , not work either~

[carbonphyber]

@mydearxym Local files must also be compiled into the bundle.
See step #2

[gs-akhan]

@carbonphyber @nicklockwood I am unable to load html file using query params
example "index.html?data=hello"
:(
Thanks

[nicklockwood]

@gs-akhan Yeah, that won't work - file paths can't have GET params.

[DaveAdams88]

This works great in iOS, but having trouble getting it to work with android - I've put the web view in "android/app/src/main/assets/" - and using "source='webview.html'" - is there a step I am missing? .. or am I flat out doing it wrong? :s

[nicklockwood]

@dmmiller, do relative paths work the same way in Android as they do in iOS? Can you use "foo.html" as a shorthand for "android/app/src/main/assets/foo.html" ?