Commit Graph

44 Commits

Author SHA1 Message Date
Luke Miles 13b4c2d77b <WebView>: Add propType for injectJavaScript
Summary:
Small fix. Adds a proptype for the injectJavaScript function, added in da9a712a9e.
Closes https://github.com/facebook/react-native/pull/12665

Differential Revision: D4645803

Pulled By: hramos

fbshipit-source-id: 863e5bf82b853914ac08f9f5b2c141d35882afc7
2017-03-02 15:31:19 -08:00
Luke Miles da9a712a9e Add a injectJavaScript method to the WebView component
Summary:
Currently, < WebView > allows you to pass JS to execute within the view. This works great, but there currently is not a way to execute JS after the page is loaded. We needed this for our app.

We noticed that the WebView had messaging support added (see #9762) . Initially, this seemed like more than enough functionality for our use case - just write a function that's injected on initial load that accepts a message with JS, and `eval()` it. However, this broke once we realized that Content Security Policy can block the use of eval on pages. The native methods iOS provide to inject JS allow you to inject JS without CSP interfering. So, we just wrapped the native methods on iOS (and later Android) and it worked for our use case. The method injectJavaScript was born.

Now, after I wrote this code, I realized that #8798 exists and hadn't been merged because of a lack of tests. I commend what was done in #8798 as it sorely solves a problem (injecting JS after the initial load) and has more features than what I'
Closes https://github.com/facebook/react-native/pull/11358

Differential Revision: D4390425

fbshipit-source-id: 02813127f8cf60fd84229cb26eeea7f8922d03b3
2017-01-06 20:29:02 -08:00
Thomas Beverley b6a38e80e0 Expose setAllowUniversalAccessFromFileURLs in Android WebView
Summary:
This pull request exposes the `setAllowUniversalAccessFromFileURLs` method of Android WebViewSettings as a property. The reason for this is when loading pages with a `file://` baseUrl it's sometimes desirable to allow loading other assets from a file base url. (For example loading an image into a canvas). More information on its use and purpose can be found [in the android docs here](https://developer.android.com/reference/android/webkit/WebSettings.html#setAllowUniversalAccessFromFileURLs%28boolean%29)

Usage example:

``` jsx
return (
  <WebView
    source={{ html: myhtml, baseUrl: 'file://' }}
    allowUniversalAccessFromFileURLs={true}
    javaScriptEnabled={true} />
)
```
Closes https://github.com/facebook/react-native/pull/8905

Differential Revision: D4147245

Pulled By: hramos

fbshipit-source-id: 7eaa884b8c0268de52b284954a34acec0fbd4061
2016-11-08 08:43:38 -08:00
leeight 9db8910e36 Clean unused import modules.
Summary:
Thanks for submitting a pull request! Please provide enough information so that others can review your pull request:

> **Unless you are a React Native release maintainer and cherry-picking an *existing* commit into a current release, ensure your pull request is targeting the `master` React Native branch.**

Explain the **motivation** for making this change. What existing problem does the pull request solve?

Prefer **small pull requests**. These are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.

**Test plan (required)**

Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.

Make sure tests pass on both Travis and Circle CI.

**Code formatting**

Look around. Match the style of the rest of the codebase. See also the simple [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide).

For more info, see
Closes https://github.com/facebook/react-native/pull/10413

Differential Revision: D4028108

fbshipit-source-id: 99a864dfda578d640f582b296583591415ba26cd
2016-10-16 11:13:40 -07:00
Jacob Parker abb8ea3aea Implement a postMessage function and an onMessage event for webviews …
Summary:
JS API very similar to web workers and node's child process.

Work has been done by somebody else for the Android implementation over at #7020, so we'd need to have these in sync before anything gets merged.

I've made a prop `messagingEnabled` to be more explicit about creating globals—it might be sufficient to just check for an onMessage handler though.

![screen shot 2016-09-06 at 10 28 23](https://cloud.githubusercontent.com/assets/7275322/18268669/b1a12348-741c-11e6-91a1-ad39d5a8bc03.png)
Closes https://github.com/facebook/react-native/pull/9762

Differential Revision: D4008260

fbshipit-source-id: 84b1afafbc0ab1edc3dfbf1a8fb870218e171a4c
2016-10-16 06:43:46 -07:00
Tim Yung 331c13d4dc RN: Require {react/lib/ => }ReactNative
Reviewed By: sebmarkbage

Differential Revision: D4024375

fbshipit-source-id: cd2226a3580a7a4ff319d6a93b67b68f2942eb00
2016-10-14 18:59:10 -07:00
Nobuhito Kurose 5ba40fe6ef Improve loading error handling on Android WebView
Summary:
Loading invalid urls will happen in normal use so this line should be console.warn instead.
Actually ios WebView uses console.warn for this.
See https://github.com/facebook/react-native/issues/2904.
Closes https://github.com/facebook/react-native/pull/9623

Differential Revision: D3815167

Pulled By: spicyj

fbshipit-source-id: 0badb811b79d89d54c70b41692c609da0a3ef169
2016-09-02 23:28:35 -07:00
Andrew Y. Chen 22de6550d6 Add onContentSizeChange prop to WebView
Summary: Added support for WebViews to take in an onContentSizeChange prop, which will return a native event that contains the width and height of the html content in the WebView. Also moved the ContentSizeChangeEvent from the recyclerview dir to the uimanager/events dir

Reviewed By: andreicoman11

Differential Revision: D3775399

fbshipit-source-id: 19a0579f8345e5853cc7311b80f1f1393c77ab58
2016-08-29 12:28:52 -07:00
Ben Alpert a2fb703bbb Convert from React.createClass to ES6 classes
Reviewed By: cpojer

Differential Revision: D3619143

fbshipit-source-id: e14e81468d467437ee3d79c34c34b7780a46ca1c
2016-07-26 01:13:31 -07:00
David Aurelio bd60d828c5 Remove `node_modules/react` from the list of discoverable haste modules
Summary: This removes `node_modules/react` from the list of directories that are used for haste module resolutions. Modules required from React are now imported with `require('react/lib/…')`.

Reviewed By: astreet

Differential Revision: D3509863

fbshipit-source-id: 32cd34e2b8496f0a6676dbe6bb1eacc18124c01e
2016-07-05 06:44:33 -07:00
Janic Duplessis 4c245160bd Replace deprecated ActivityIndicatorIOS and ProgressBar with ActivityIndicator
Summary:
This replaces ActivityIndicatorIOS and indeterminate ProgressBar that were deprecated recently with ActivityIndicator across the codebase and examples and a few other cleanups.

This also make a small tweak to ActivityIndicator so it uses the Android theme color instead of gray when no color is specified.

Use Slider instead of SliderIOS in CameraRoll example.

Remove the line about unifying ActivityIndicator and ProgressBar.

**Test plan**
Tested the affected components in UIExplorer on iOS and Android, tested the changes made in Movies example on iOS and Android.
Closes https://github.com/facebook/react-native/pull/8082

Differential Revision: D3429770

fbshipit-source-id: 3b2e1196a8b9fe00d47a7aa1bbc079b094796421
2016-06-13 22:28:24 -07:00
Andrew Gray 774296b263 Implemented stopLoading
Summary:**Motivation:** In my app, I'm using a WebView that loads content from my mobile site.  What I want to do is when a user presses a link on the loaded page, I want to stop the WebView's request, hijack the URL and open the URL in a new WebView, pushed to the top of the navigator stack.  To me, this gives the overall app a more native feel, instead of implementing a rudimentary navbar on the main WebView to go back.

**Attempted Workarounds:** I've attempted to get similar functionality by capturing the onNavigationStateChange event in the WebView, and then within calling goBack + pushing the new view to the navigator stack.  From a functionality standpoint, this works.  However, from a UI standpoint, the user can clearly see the webview change states to a new page + go back before having the new view pushed on top of their nav stack.
Closes https://github.com/facebook/react-native/pull/6886

Differential Revision: D3212447

Pulled By: mkonicek

fb-gh-sync-id: 05911e583d9ba54ddbd54a772153c80ed227731e
fbshipit-source-id: 05911e583d9ba54ddbd54a772153c80ed227731e
2016-04-22 08:15:25 -07:00
Sebastian Markbage 613ca14612 React.findNodeHandle -> ReactNative.findNodeHandle
Summary:Since the React 0.14 split of modules, the findNodeHandle feature is part of the
renderer and not the generic React API.

This just greps for React.findNodeHandle and replace them with ReactNative.findNodeHandle. I fixed up the imports manually.

I also found two callers each of ReactNative.createClass and React.render with the exception of downstream and examples will fix them separately.

I'll need to find more things like `var { PropTypes } = ReactNative;` separately. I think this is a good start though.

Reviewed By: vjeux

Differential Revision: D3149356

fb-gh-sync-id: 50ed60bc67270b16f561d4c641f2f19e85724d3b
fbshipit-source-id: 50ed60bc67270b16f561d4c641f2f19e85724d3b
2016-04-07 19:44:31 -07:00
Nicolas Charpentier a74d05be62 Add default render loading on Android WebView
Summary:I just noticed that Android WebView do not have a render loading default like iOS, so I added one.

**Test plan**

I used WebView without renderLoading on Android.

![image](https://cloud.githubusercontent.com/assets/7189823/14028408/bd94c83e-f1d2-11e5-8791-3372684b429e.png)
Closes https://github.com/facebook/react-native/pull/6635

Differential Revision: D3126416

Pulled By: andreicoman11

fb-gh-sync-id: 422966ba3dd6912cbcb0b540e26a3ec48c85daea
fbshipit-source-id: 422966ba3dd6912cbcb0b540e26a3ec48c85daea
2016-04-01 08:05:21 -07:00
Thomas Beverley 0be6031bc6 Added mediaPlaybackRequiresUserAction to WebView
Summary:Just added a pass through to the `WebView` for `mediaPlaybackRequiresUserAction` and `setMediaPlaybackRequiresUserGesture` to allow auto-playing audio and video elements
Closes https://github.com/facebook/react-native/pull/5956

Differential Revision: D3053554

Pulled By: mkonicek

fb-gh-sync-id: a1f362c1551de1a0218f5d23c70668e4c8078993
shipit-source-id: a1f362c1551de1a0218f5d23c70668e4c8078993
2016-03-16 10:03:26 -07:00
David Aurelio ad8a335864 Remove knowledge of fbjs from the packager
Summary:Follow-up to https://github.com/facebook/react-native/pull/5084

This…
- changes all requires within RN to `require('fbjs/lib/…')`
- updates `.flowconfig`
- updates `packager/blacklist.js`
- adapts tests
- removes things from `Libraries/vendor/{core,emitter}` that are also in fbjs
- removes knowledge of `fbjs` from the packager

Closes https://github.com/facebook/react-native/pull/5084

Reviewed By: bestander

Differential Revision: D2926835

fb-gh-sync-id: 2095e22b2f38e032599d1f2601722b3560e8b6e9
shipit-source-id: 2095e22b2f38e032599d1f2601722b3560e8b6e9
2016-03-02 04:28:38 -08:00
AbilashK 4b97137eee Enable scalesPageToFit on Android
Summary:PR for https://github.com/facebook/react-native/issues/5958. The viewport meta tags if present, are overridden from the page and it is rendered according to the screen size. An example has been added in the Web View section of UIExplorer demo app.
Closes https://github.com/facebook/react-native/pull/6013

Differential Revision: D2953940

Pulled By: nicklockwood

fb-gh-sync-id: 012769f3a2a3f7dc942b60de02a9d1b80a27236e
shipit-source-id: 012769f3a2a3f7dc942b60de02a9d1b80a27236e
2016-02-19 06:28:34 -08:00
Dave Miller d0f1466cdd Default javaScriptEnabled to true
Summary:public
Default javaScriptEnabled to true on Android WebView
Also remove an old (about 6 weeks old) warning about a back compat supported property

Reviewed By: nicklockwood

Differential Revision: D2939482

fb-gh-sync-id: 2d476c3365f657da27ea370a033b23154750c2ea
shipit-source-id: 2d476c3365f657da27ea370a033b23154750c2ea
2016-02-17 04:05:29 -08:00
trave7er 4237a27ec9 pick up some easy-to-fix lint warnings
Reviewed By: svcscm

Differential Revision: D2938097

fb-gh-sync-id: e3373bd44267251d8351d5203be1c88676aa8685
shipit-source-id: e3373bd44267251d8351d5203be1c88676aa8685
2016-02-16 02:00:57 -08:00
Nick Lockwood 81fb985335 Support non-image assets in packager
Summary:
public
The packager currently assumes that all assets that are not JSON or JS files must be images. Although it is possible to add other extension types, they crash the packager if you try to require them, because it attempts to get their dimensions, assuming that they are an image.

This is a crude workaround for that problem, which skips the image-specific processing for non-image assets, but really it would be better if the packager was properly aware of different asset types and treated them differently (e.g. for sounds it could include the duration, for HTML pages it could parse and include linked CSS files, etc).

I've also added an example of using `require('...')` to load a packager-managed HTML page in the UIExplorer WebView example. In future I anticipate that all static asset types (sounds, fonts, etc.) could be handled in this way, which allows them to be edited or added/removed on the fly instead of needing to restart the app.

Reviewed By: martinbigio

Differential Revision: D2895619

fb-gh-sync-id: cd93794ca66bad838621cd7df3ff3c62b5645e85
2016-02-03 17:30:39 -08:00
Nick Lockwood 46106f756a Ported `source` prop over to iOS WebView
Summary:
public
https://github.com/facebook/react-native/pull/5494 added a new `source` property to WebView on Android that provides a better API, as well as allowing for request headers to be set.

This diff ports that functionality over to iOS, so we can have a consistent API cross-platform.

I've also extended the API to include `method` (GET or POST) and `body` when setting the WebView content with a URI, and `baseUrl` when setting static HTML.

Reviewed By: javache

Differential Revision: D2884643

fb-gh-sync-id: 83f24494bdbb4e1408aa8f3b7428fee33888ae3a
2016-02-01 18:01:35 -08:00
Michael Tostenson 80a2f5d50f Add headers prop to Android WebViews
Summary:
Related to [issue #5418](https://github.com/facebook/react-native/issues/5418)

This is a follow-up to [this previous pull request.](https://github.com/facebook/react-native/pull/5419)

~~Adds a new ReactProp 'urlWithHeaders' to Android WebViews that takes an object with a 'url' string and a 'headers' map.~~

[Update] Adds a new prop 'source' to Android WebViews
```
{
   html: string,
   url: string,
   headers: map<string, string>,
}
```

Update: resolves TODO 8495359
Closes https://github.com/facebook/react-native/pull/5494

Reviewed By: svcscm

Differential Revision: D2881313

Pulled By: nicklockwood

fb-gh-sync-id: 7cad8490d4932d0a7ef559165f3ec279d873c537
2016-02-01 10:06:35 -08:00
Dotan J. Nahum 5712e0c3eb Typo: Change WebWiew to WebView
Summary: Closes https://github.com/facebook/react-native/pull/5648

Reviewed By: svcscm

Differential Revision: D2884296

Pulled By: androidtrunkagent

fb-gh-sync-id: 50340c0fc06926fbb3dc41c3078aa985ff48ccd3
2016-01-31 08:41:33 -08:00
Horcrux 274a3e0585 add onLoading* prop for WebView
Summary:
add onLoadingStart,onLoadingError,onLoadingFinish prop for WebView
Closes https://github.com/facebook/react-native/pull/5335

Reviewed By: svcscm

Differential Revision: D2834003

Pulled By: nicklockwood

fb-gh-sync-id: bbe84297ebeb5a6c2bf1caaacee8c59e0bcef1db
2016-01-15 09:31:33 -08:00
odino 6edcebef9c Stop using platform-specific names for props
Summary:
Follows up on [this comment](https://github.com/facebook/react-native/pull/5065#issuecomment-168353782) by nicklockwood in #5065.

Rely on using the platform annotation and keep the API / naming less redundant.
Closes https://github.com/facebook/react-native/pull/5081

Reviewed By: svcscm

Differential Revision: D2803143

Pulled By: nicklockwood

fb-gh-sync-id: 9bdf028f5022ef46fcb63aa6c3fc931fdcc46f2b
2016-01-05 10:32:43 -08:00
odino 6793128435 Allowing turning on / off DOM storage on android webviews
Summary:
Was developing on a WebView and couldnt get it to run. Turns out its JS code mostly depends on `localStorage` and I realized it wasnt turned on in RN. This PR adds a prop, similar to `javascriptEnabledAndroid` to be able to turn DOM storage on / off.

TBH I dont really know how it works on IOS, so I created an android specific thingy. I assume DOM storage is enabled by default on IOS.
Closes https://github.com/facebook/react-native/pull/5065

Reviewed By: svcscm

Differential Revision: D2797735

Pulled By: androidtrunkagent

fb-gh-sync-id: cd60cfa4d24d80fb82e4f54f387a4517a99e75ab
2015-12-31 18:04:29 -08:00
Martin Konicek 8cd7730080 Open source Android WebView
Summary:
Keep `WebView.android.js` and `WebView.ios.js`, there are
some small differences. Use the same example on both platforms.

public

Reviewed By: bestander

Differential Revision: D2769446

fb-gh-sync-id: be3d0afcbfd6ddcbaa49f70555063b3081ba03cb
2015-12-17 12:47:39 -08:00
Nick Lockwood 60db876f66 Wrapped UIManager native module for better abstraction
Summary: public

RCTUIManager is a public module with several useful methods, however, unlike most such modules, it does not have a JS wrapper that would allow it to be required directly.

Besides making it more cumbersome to use, this also makes it impossible to modify the UIManager API, or smooth over differences between platforms in the JS layer without breaking all of the call sites.

This diff adds a simple JS wrapper file for the UIManager module to make it easier to work with.

Reviewed By: tadeuzagallo

Differential Revision: D2700348

fb-gh-sync-id: dd9030eface100b1baf756da11bae355dc0f266f
2015-11-27 07:00:32 -08:00
Krzysztof Magiera f2545bafc9 Use requireNativeComponent everywhere.
Reviewed By: sahrens

Differential Revision: D2663780

fb-gh-sync-id: 94a7e2265f6f869a2bdf1576dd8ea76b4c5f0b34
2015-11-18 09:43:28 -08:00
Martin Konicek 8167f40163 Document that WebView is iOS-only until we open source the Android implementation
Summary: The absence of docs can be confusing:
https://twitter.com/40_thieves/status/659500246632939520

public

Reviewed By: davidaurelio

Differential Revision: D2595809

fb-gh-sync-id: b741263782ad579bb40e94a383992dca3a6e8040
2015-10-29 10:09:34 -07:00
Hedger Wang 2cbcfcea88 [Android][JS]: supports prop "html" in WebView 2015-07-10 12:33:16 -08:00
Hedger Wang bb141e3a3c Rename prop "injectedJavascriptIOS" to "injectedJavaScript
Summary:
Android WebView now supports the prop "injectedJavaScript", too.
It's time to rename "injectedJavascriptIOS" to "injectedJavaScript" for API
consistency between IOS and Android.
2015-07-07 17:17:22 -08:00
Andrei Coman 3ff6abb6d1 [react_native] JS files from D2139723: [react_native] Set WebView user-agent from JS 2015-06-12 02:37:57 -08:00
Spencer Ahrens 1c70f33511 [ReactNative] clean lint for Libraries/Components 2015-05-18 15:54:07 -08:00
Ben Alpert a0440daf98 [react-native] Codemod .getNodeHandle, .getNativeNode to React.findNodeHandle 2015-05-13 13:24:37 -07:00
Krzysztof Magiera ff00e1496c [ReactNative] Rename ReactIOS JS module (and relatives) to ReactNative. 2015-05-13 13:24:35 -07:00
Krzysztof Magiera 4402c4c885 [react_native] JS files from D2038965: Extract view specific commands from UIManager. 2015-05-05 02:58:05 -08:00
Krzysztof Magiera 46db1826c5 [react_native] JS files from D2017699: Expose JavaScriptEnabled property for WebView component on android. 2015-04-24 11:53:35 -08:00
Andrei Coman 96e9ad9aec [react_native] JS files from D1980312: [react_native] Fix webview 2015-04-09 15:21:13 -08:00
Christopher Chedeau e1ef0328d9 [ReactNative] Expanded license on js files 2015-03-23 13:17:54 -08:00
Christopher Chedeau 4b42f8c9e9 [ReactNative] s/render*View/render/ in <WebView> 2015-03-18 16:02:19 -08:00
Spencer Ahrens 9086365faf [ReactNative] Strip prefixes from NativeModules keys 2015-03-17 21:54:27 -08:00
Spencer Ahrens b396de3cc8 [ReactNative] s/RK/RCT in OSS 2015-03-17 02:48:57 -08:00
Nick Lockwood 66bb821a31 Unforked RKWebView 2015-03-14 00:22:43 -08:00