
Security News
Attackers Are Hunting High-Impact Node.js Maintainers in a Coordinated Social Engineering Campaign
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
@rescript-react-native/webview
Advanced tools
@rescript-react-native/webviewReScript bindings for
react-native-webview.
Exposed as the ReactNativeWebView module.
@rescript-react-native/webview X.y.* means it's compatible with
@react-native-community/react-native-webview X.y.*
When
react-native-webview
is properly installed & configured by following their installation instructions,
you can install the bindings:
npm install @rescript-react-native/webview
# or
yarn add @rescript-react-native/webview
@rescript-react-native/webview should be added to bs-dependencies in your
bsconfig.json. For example,
{
//...
"bs-dependencies": [
"@rescript/react",
"rescript-react-native",
// ...
+ "@rescript-react-native/webview"
],
//...
}
DataDetectorTypes.tValid values are:
• DataDetectorTypes.phoneNumber
• DataDetectorTypes.link
• DataDetectorTypes.address
• DataDetectorTypes.calendarEvent
• DataDetectorTypes.none
• DataDetectorTypes.all
• DataDetectorTypes.trackingNumber
• DataDetectorTypes.flightNumber
• DataDetectorTypes.lookupSuggestion
DecelerationRate.tValues may be created using DecelerationRate.value
value: float => t
Other valid values are DecelerationRate.normal and DecelerationRate.fast which are equivalent to specifying 0.998 and 0.99 and match the underlying iOS settings for UIScrollViewDecelerationRateNormal and UIScrollViewDecelerationRateFast respectively.
NavigationType.tValid values are:
• NavigationType.click
• NavigationType.formsubmit
• NavigationType.backforward
• NavigationType.reload
• NavigationType.formresubmit
• NavigationType.other
Source.tSource to be loaded in the WebView, as specified by the [source(#source-source.t) prop can be either a URI or static HTML.
Source.uriCreates a URI source
uri:
(
~uri: string=?,
~method: [
| `CONNECT
| `DELETE
| `GET
| `HEAD
| `OPTIONS
| `PATCH
| `POST
| `PUT
| `TRACE
]
=?,
~headers: Js.t('a)=?,
~body: string=?,
unit
) =>
t
uri specifies the URI (local or remote) to load in the WebView.method specifies HTTP Method to use, defaults to `GET. Only `GET and `POST are supported on Android.headers specifies additional HTTP headers to send with the request. This can only be used with `GET requests on Android.body specifies HTTP body to send with the request. This must be a valid UTF-8 string, and will be sent exactly as specified, with no additional encoding (e.g. URL-escaping or base64) applied. This can only be used with `POST requests on Android.Source.htmlCreates a static HTML source
html: (~html: string=?, ~baseUrl: string=?, unit) => t
html specifies static HTML to display in the WebView as string.baseUrl specifies the base URL to be used for any relative links in the HTML. It is also used for the origin header with CORS requests made from the WebView. Refer to Android WebView Docs.UnionCallback.tType of function passed to the onLoadEnd prop, to handle the union type webViewNavigationOrError. Defined as
ReactNative.Event.syntheticEvent(Js.t(webViewNavigationOrError)) => unit
UnionCallback.makeCreates a function of type UnionCallback.t
make:
(
~navigationCallback: WebViewNavigationEvent.t => unit,
~errorCallback: WebViewErrorEvent.t => unit
) =>
t;
UnionCallback.uncurriedMakeCreates a function of type UnionCallback.t
uncurriedMake:
(
~navigationCallback:(. webViewNavigationEvent) => unit,
~errorCallback:(. webViewErrorEvent) => unit
) =>
t;
elementRepresents a WebView instance, to be used with methods.
nativeConfigShould be constructed as below:
nativeConfig:
(
~component: React.component('a)=?,
~props: Js.t('b)=?,
~viewManager: Js.t('c)=?
) =>
nativeConfig
You may refer to iOS↗ and Android↗ specific guides on how to create a custom WebView.
refReact ref intended to access a WebView instance. Defined as
type ref = React.Ref.t(Js.nullable(element))
Js.t(webViewNativeEvent)Has the below keys, which can be accessed with ##.
target: ReactNative.NativeTypes.nodeHandleurl: stringtitle: stringloading: boolcanGoBack: boolcanGoForward: boolJs.t(webViewError)Has the below keys, which can be accessed with ##.
target: ReactNative.NativeTypes.nodeHandleurl: stringtitle: stringloading: boolcanGoBack: boolcanGoForward: booldescription: stringdomain: option(string)code: intdidFailProvisionalNavigation: option(bool)Note: domain key only exists on iOS
Js.t(webViewHttpError)Has the below keys, which can be accessed with ##.
target: ReactNative.NativeTypes.nodeHandleurl: stringtitle: stringloading: boolcanGoBack: boolcanGoForward: booldescription: stringstatusCode: intNote: description key only exists on iOS
Js.t(webViewMessage)Has the below keys, which can be accessed with ##.
target: ReactNative.NativeTypes.nodeHandleurl: stringtitle: stringloading: boolcanGoBack: boolcanGoForward: booldata: stringJs.t(webViewNativeProgressEvent)Has the below keys, which can be accessed with ##.
target: ReactNative.NativeTypes.nodeHandleurl: stringtitle: stringloading: boolcanGoBack: boolcanGoForward: boolprogress: floatJs.t(webViewNavigation)Has the below keys, which can be accessed with ##.
target: ReactNative.NativeTypes.nodeHandleurl: stringtitle: stringloading: boolcanGoBack: boolcanGoForward: boolnavigationType: ReactNativeWebView_NavigationType.tmainDocumentURL: option(string)Js.t(webViewShouldStartLoadWithRequest)Has the below keys, which can be accessed with ##.
target: ReactNative.NativeTypes.nodeHandleurl: stringtitle: stringloading: boolcanGoBack: boolcanGoForward: boolnavigationType: ReactNativeWebView_NavigationType.tmainDocumentURL: option(string)lockIdentifier: intwebViewErrorEventwraps Js.t(webViewError) in ReactNative.Event.syntheticEvent
type WebViewErrorEvent.t =
ReactNative.Event.syntheticEvent(Js.t(webViewError));
passed to the handler specified for onError
webViewHttpErrorEventwraps Js.t(webViewHttpError) in ReactNative.Event.syntheticEvent
type WebViewHttpErrorEvent.t =
ReactNative.Event.syntheticEvent(Js.t(webViewHttpError));
passed to the handler specified for onHttpError
webViewMessageEventwraps Js.t(webViewMessage) in ReactNative.Event.syntheticEvent
type WebViewMessageEvent.t =
ReactNative.Event.syntheticEvent(Js.t(webViewMessage));
passed to the handler specified for onMessage
webViewNavigationEventwraps Js.t(webViewNavigation) in ReactNative.Event.syntheticEvent
type WebViewNavigationEvent.t =
ReactNative.Event.syntheticEvent(Js.t(webViewNavigation));
passed to handlers specified for onLoad or onLoadStart
webViewProgressEventwraps Js.t(webViewNativeProgressEvent) in ReactNative.Event.syntheticEvent
type WebViewProgressEvent.t =
ReactNative.Event.syntheticEvent(Js.t(webViewNativeProgressEvent));
passed to the handler specified for onLoadProgress
webViewTerminatedEventwraps Js.t(webViewNativeEvent) in ReactNative.Event.syntheticEvent
type WebViewTerminatedEvent.t =
ReactNative.Event.syntheticEvent(webViewNativeEvent);
passed to the handler specified for onContentProcessDidTerminate
webViewNavigationOrErrorUnion type passed to the handler specified for onLoadEnd, is of type webViewNavigationEvent if loading succeeds and webViewErrorEvent if it fails.
Refer to UnionCallback.t for information on how to create the appropriate handler.
ref: refShould be specified to be able to access the WebView instance and apply methods. Also refer to element and ref.
As an alternative, refer to React documentation on forwardRef.
allowingReadAccessToURL: stringSpecifies URLs which can be referenced in scripts, AJAX requests and CSS imports. Used only for URIs specified as file://. Defaults to the URL provided in the URI.
allowFileAccess: boolAllows access to the file system via URI specified as file:// when true, defaults to false.
allowUniversalAccessFromFileURLs: boolJavaScript running in the context of a file scheme URL should be allowed access to content from any origin including content from other file scheme URLs when true, defaults to false.
allowsBackForwardNavigationGestures: booliOS only
Horizontal swipe gestures are allowed when true, defaults to false.
allowsFullscreenVideo: boolFullscreen playback of videos is allowed when true, defaults to false.
allowsInlineMediaPlayback: boolDetermines whether HTML5 videos play inline or use the native full-screen controller, defaults false.
allowsLinkPreview: booliOS only required 3D Touch support
Pressing on a link displays a preview of the target when true. Defaults to true on iOS 10 and later, to false otherwise.
androidHardwareAccelerationDisabled: boolAndroid only
Disables Hardware Acceleration in the WebView when true, defaults to false.
androidLayerType: [ | `none | `software | `hardware ]Android only
Specifies the layer type.
applicationNameForUserAgent: stringSpecifies string value to append to the User-Agent header, will be overridden if userAgent is set.
For example when applicationNameForUserAgent="DemoApp/1.1.0" as below:
<ReactNativeWebView
source=ReactNativeWebView.Source.uri(~uri="https://facebook.github.io/react-native", ())
applicationNameForUserAgent="DemoApp/1.1.0"
/>
Resulting User-Agent may be as below:
Mozilla/5.0 (Linux; Android 8.1.0; Android SDK built for x86 Build/OSM1.180201.021; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/61.0.3163.98 Mobile Safari/537.36 DemoApp/1.1.0
Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 DemoApp/1.1.0
automaticallyAdjustContentInsets: boolControls whether to adjust the content inset for web views that are placed behind a navigation bar, tab bar, or toolbar. The default value is true.
bounces: boolWebView bounces as edge of the content is reached when true, defaults to true.
cacheEnabled: boolSets whether WebView should use browser caching, defaults to true.
cacheEnabled: [ | `default | `cacheOnly | `cacheElseNetwork | `noCache ]Overrides default caching behavior, which depends on the navigation type. For a normal page load, cache is checked and content is revalidated as needed. When navigating back, content is not revalidated, but simply retrieved from the cache.
| Value | Behavior |
|---|---|
`default | Default cache usage mode. If the navigation type doesn't impose any specific behavior, use cached resources when they are available and not expired, otherwise load resources from the network. |
`cacheOnly | Don't use the network, load resources from the cache. |
`cacheElseNetwork | Use cached resources when available, even when expired. Otherwise, load resources from the network. |
`noCache | Don't use the cache, load resources from the network. |
containerStyle: ReactNative.Style.tallows to customize the WebView container style. Please note that there are default styles (example: ~flex=0. needs to be specified to use the height prop).
contentInset: ReactNative.View.edgeInsetsRefer to rescript-react-native documentation on View.
contentInsetAdjustmentBehavior: [ | `never | `always | `automatic | `scrollableAxes]iOS only
Specifies how safe area insets are used to modify content area of the scroll view, defaults to `never. Available on iOS 11 and later.
contentMode: [ | `recommended | `mobile | `desktop]iOS only
Controls the type of content to load. Available on iOS 13 and later. Defaults to recommended, which loads mobile content on iPhone & iPad Mini but desktop content on larger iPads.
dataDetectorTypes: array(DataDetectorTypes.t)Specifies types of data to be converted to clickable URLs in content of the WebView, defaults to [|DataDetectorTypes.phoneNumber|]. Refer to DataDetectorTypes.t for all valid values.
decelerationRate: DecelerationRate.tiOS only
Specifies how quickly the scroll view should decelerate once the user lifts their finger, defaults to DecelerationRate.fast. Refer to DecelerationRate.t for all valid values.
directionalLockEnabled: booliOS only
Disables scrolling in a particular direction when true, defaults to true.
domStorageEnabled: boolAndroid only
DOM Storage is enabled when true.
geolocationEnabled: boolAndroid only
Set whether geolocation is enabled in the WebView, defaults to false.
hideKeyboardAccessoryView: booliOS only
Keyboard accessory view will be hidden when true.
incognito: boolDoes not store any data within the lifetime of the WebView.
injectedJavaScript: stringSpecifies JavaScript that will be injected into the web page when loaded. The string should evaluate to a valid type (e.g. true) and not otherwise throw an exception.
Example below passeswindow.location as a JSON object to be handled by the function passed to onMessage
let injectedJavaScript = "(function() {
window.ReactNativeWebView.postMessage(JSON.stringify(window.location));
})();";
<ReactNativeWebView
source=ReactNativeWebView.Source.uri(~uri="https://facebook.github.io/react-native", ())
injectedJavaScript=injectedJavaScript
onMessage={e => Js.Console.warn(e##nativeEvent##data)}
/>
Note that the JavaScript will only be run once when the page is loaded for the first time; it will not be run again even if the page is reloaded or navigated away.
Refer to the Communicating between JS and Native guide for more information.
On iOS, also refer to documentation on WKUserScriptInjectionTimeAtDocumentEnd.
injectedJavaScriptForMainFrameOnly: booliOS only
Script specified with injectedJavaScript will be loaded for all frames (main frame and iframes) when false, defaults to true (only for the main frame).
injectedJavaScriptBeforeContentLoaded: stringSpecifies JavaScript that will be injected into the web page after the document element is created, but before any other content is loaded. The string should evaluate to a valid type (e.g. true) and not otherwise throw an exception.
Example below passeswindow.location as a JSON object to be handled by the function passed to onMessage
let injectedJavaScript = "(function() {
window.ReactNativeWebView.postMessage(JSON.stringify(window.location));
})();";
<ReactNativeWebView
source=ReactNativeWebView.Source.uri(~uri="https://facebook.github.io/react-native", ())
injectedJavaScriptBeforeContentLoaded=injectedJavaScript
onMessage={e => Js.Console.warn(e##nativeEvent##data)}
/>
Refer to the Communicating between JS and Native guide for more information.
Also refer to documentation on WKUserScriptInjectionTimeAtDocumentStart.
injectedJavaScriptBeforeContentLoadedForMainFrameOnly: booliOS only
Script specified with injectedJavaScriptBeforeContentLoaded will be loaded for all frames (main frame and iframes) when false, defaults to true (only for the main frame).
Note that it may not be possible to inject JS into iframes in this stage of the page lifecycle, therefore exercise caution when setting to false.
javaScriptCanOpenWindowsAutomatically: boolA Boolean value indicating whether JavaScript can open windows without user interaction. The default value is false.
javaScriptEnabled: boolAndroid only
Enables JavaScript in the WebView when true, defaults to true. JavaScript is already enabled by default on iOS.
keyboardDisplayRequiresUserAction: booliOS only
Web content can programmatically display the keyboard when false, defaults to true.
mediaPlaybackRequiresUserAction: boolHTML5 audio and video playback requires the user to tap them when true, defaults to true.
Some videos may hang while loading on iOS when true. As the props defaults to true, setting mediaPlaybackRequiresUserAction=false may fix this issue.
mixedContentMode: [@bs.string] [ | `never | `always | `compatibility]Android only
Specifies mixed content mode, defaults to `never.
| Value | Behavior |
|---|---|
`never | WebView will not allow a secure origin to load content from an insecure origin. |
`always | WebView will allow a secure origin to load content from any other (even insecure) origin. |
`compatibility | WebView will attempt to be compatible with how modern web browsers treat mixed content. |
nativeConfig: nativeConfigOverrides the native component used to render the WebView. Enables a custom native WebView which uses the same JavaScript as the original WebView. Refer to the nativeConfig type on how to specify the custom component.
You may refer to iOS- and Android-specific guides on how to create a custom WebView.
onContentProcessDidTerminate: WebViewTerminatedEvent.t => unitiOS only
Specifies function to be invoked when the WebView content process is terminated. The process may be terminated due to reasons such as running too long or using too many resources, however, once terminated a blank page is displayed and the WebView becomes unusable. Please refer to the PR which added the functionality to allow handling this issue.
<ReactNativeWebView
source=ReactNativeWebView.Source.uri(~uri="https://facebook.github.io/react-native", ())
onContentProcessDidTerminate={_ =>
ReactNativeWebView.reload()
this.refs.webview.reload();
}}
/>
onFileDownload: WebViewDownloadEvent.t => unitiOS only
Specifies function to be invoked when the WebView is about to download a file.
onError: WebViewErrorEvent.t => unitSpecifies function to be invoked when the WebView fails to load.
onLoad: WebViewNavigationEvent.t => unitSpecifies function to be invoked when the WebView has finished loading.
onLoadEnd: UnionCallback.tSpecifies function to be invoked when the WebView succeeds or fails to load.
onLoadProgress: WebViewProgressEvent.t => unitSpecifies function to be invoked while the WebView is loading.
onLoadStart: WebViewNavigationEvent.t => unitSpecifies function to be invoked when the WebView starts to load.
onMessage: WebViewMessageEvent.t => unitSpecifies function to be invoked when the WebView calls window.ReactNativeWebView.postMessage. Setting this prop will inject that global into the webview.
window.ReactNativeWebView.postMessage accepts one string argument, which will be available as e.g. e##nativeEvent##data where e is the event object.
Refer to the Communicating between JS and Native guide for more information.
onNavigationStateChange: Js.t(webViewNavigation) => unitSpecifies function to be invoked when the WebView starts or ends loading.
Note that this method will not be invoked on hash URL changes (e.g. from https://example.com/users#list to https://example.com/users#help). A workaround may be found in the Guide.
onRenderProcessGone: WebViewRenderProcessGone.t => unitAndroid only
Function that is invoked when the WebView process crashes or is killed by the OS.
onShouldStartLoadWithRequest: Js.t(webViewShouldStartLoadWithRequest) => boolAllows custom handling of any WebView requests. Specified function should return true to allow requests and false to stop loading.
On Android, the function is not called on first load.
originWhitelist: array(string)Specifies array(string) listing origin strings to which navigation is allowed. Strings will be matched against just the origin (not the full URL) and wildcards are allowed. Any URL not whitelisted will be handled by the OS. Defaults to [|"http://", "https://"|].
overScrollMode: [ | `never | `always | `content]Android only
Specifies the over scroll mode, defaults to `always.
| Value | Behavior |
|---|---|
`always | Always allow a user to over-scroll the view if scrollable |
`never | Never allow a user to over-scroll the view |
`content | Allow a user to over-scroll the view only if scrollable and the content is large enough |
pagingEnabled: booliOS only
As the user scrolls, scroll view stops on multiples of the its bounds when true, defaults to false.
pullToRefreshEnabled: booliOS only
Boolean value that determines whether a pull to refresh gesture is available in the WebView. The default value is false. If true, sets bounces automatically to true.
renderError: string => React.elementSpecifies a function to be invoked when there is an error.
<ReactNativeWebView
source=ReactNativeWebView.Source.uri(~uri="https://facebook.github.io/react-native", ())
renderError={errorName => <Error name=errorName />}
/>
renderLoading: unit => React.elementSpecifies a function to be invoked when the WebView is loading. Requires setting startInLoadingState=true .
<ReactNativeWebView
source=ReactNativeWebView.Source.uri(~uri="https://facebook.github.io/react-native", ())
startInLoadingState=true
renderLoading={() => <Loading />}
/>
saveFormDataDisabled: boolAndroid only
bool determines whether the WebView should disable saving form data., defaults to false. Has no effect on Android API level 26 and abovem as there is an Autofill feature storing form data.
scalesPageToFit: boolAndroid only
Web content is scaled to fit the view and the user may change the scale when true, defaults to true.
scrollEnabled: booliOS only
Enables scrolling in the WebView, defaults to true. When false, document body will not be moved if the keyboard obstructs an input.
sharedCookiesEnabled: booliOS only
When set true, shared cookies from [NSHTTPCookieStorage sharedHTTPCookieStorage] should be used for every load request in the WebView, defaults to false.
showsHorizontalScrollIndicator: boolHorizontal scroll indicator is shown in the WebView when true, defaults to true.
showsVerticalScrollIndicator: boolVertical scroll indicator is shown in the WebView when true, defaults to true.
source: Source.tSpecifies the resource to be loaded in the WebView as static HTML or a URI (with optional headers). Note that setting originWhitelist to [|"*"|] is required when source is some static HTML. Refer to Source.t for information on how to create the appropriate type.
startInLoadingState: boolForces the WebView to show the loading view on first load; must be set to true for the renderLoading prop to work.
textZoom: floatAndroid only
Resolves issue where custom font sizes on Android leads to undesirable scaling of the interface when set to 100.0 (i.e. textZoom=100.0).
ignoreSilentHardwareSwitch: booliOS only
When set to true the hardware silent switch is ignored. Default: false
thirdPartyCookiesEnabled: boolEnables third party cookies in WebView when true, defaults to true on iOS and Android versions below 5.0.
userAgent: stringSpecifies User-Agent header for the WebView
View propsRefer to
rescript-react-native
documentation.
Please do note the below:
style: ReactNative.Style.tallows to customize the WebView style. Please note that there are default styles (example: ~flex=0. needs to be specified to use the height prop).
For the methods below, element representing the WebView instance needs to be determined from the ref which itself can be defined and passed to the WebView ref prop as below:
let ref = React.createRef();
<ReactNativeWebView
ref=ref
The element can be determined and the method reload may be called as below:
switch (ref -> React.Ref.current -> Js.Nullable.toOption) {
| None => Js.Console.warn("no element")
| Some(e) => ReactNativeWebView.reload(e)
};
clearFormData: element => unitAndroid only Removes the autocomplete popup (if present) from the currently focused form field.
clearCache: element => unitAndroid only Clears the resource cache for all WebViews in the application.
clearHistory: element => unitAndroid only Clears WebView's internal back/forward list
requestFocus: element => unitRequest focus for the WebView.
goBack: element => unitNavigates back one page in the WebView history.
goForward: element => unitNavigates forward one page in the WebView history.
reload: element => unitReloads the current page.
stopLoading: element => unitStop loading the current page.
injectJavaScript: (element, string) => unitInjects JavaScript as string into the web page. The string should evaluate to a valid type (e.g. true) and not otherwise throw an exception.
Refer to the Communicating between JS and Native guide for more information.
Check the changelog for more information about recent releases.
Read the contribution guidelines before contributing.
We want this community to be friendly and respectful to each other. Please read our full code of conduct so that you can understand what actions will and will not be tolerated.
FAQs
ReScript bindings for react-native-webview.
We found that @rescript-react-native/webview demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.

Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.

Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.