@reason-react-native/webview

v10.8.0

Published

3 years ago

ReScript bindings for react-native-webview.

Downloads

0High
0Medium
0Low

rescript reason reasonml bucklescript react-native react-native-webview webview

`@reason-react-native/webview`

ReScript / Reason bindings for react-native-webview.

Exposed as the ReactNativeWebView module.

@reason-react-native/webview X.y.* means it's compatible with @react-native-community/react-native-webview X.y.*

Installation

When react-native-webview is properly installed & configured by following their installation instructions, you can install the bindings:

npm install @reason-react-native/webview
# or
yarn add @reason-react-native/webview

@reason-react-native/webview should be added to bs-dependencies in your bsconfig.json. For example,

{
  //...
  "bs-dependencies": [
    "reason-react",
    "reason-react-native",
    // ...
+    "@reason-react-native/webview"
  ],
  //...
}

Usage

Types

`DataDetectorTypes.t`

Valid values are:

• DataDetectorTypes.phoneNumber • DataDetectorTypes.link • DataDetectorTypes.address • DataDetectorTypes.calendarEvent • DataDetectorTypes.none • DataDetectorTypes.all • DataDetectorTypes.trackingNumber • DataDetectorTypes.flightNumber • DataDetectorTypes.lookupSuggestion

`DecelerationRate.t`

Values 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.t`

Valid values are:

• NavigationType.click • NavigationType.formsubmit • NavigationType.backforward • NavigationType.reload • NavigationType.formresubmit • NavigationType.other

`Source.t`

Source to be loaded in the WebView, as specified by the [source(#source-source.t) prop can be either a URI or static HTML.

`Source.uri`

Creates 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.html`

Creates 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.t`

Type of function passed to the onLoadEnd prop, to handle the union type webViewNavigationOrError. Defined as

ReactNative.Event.syntheticEvent(Js.t(webViewNavigationOrError)) => unit

`UnionCallback.make`

Creates a function of type UnionCallback.t

make:
  (
    ~navigationCallback: WebViewNavigationEvent.t => unit,
    ~errorCallback: WebViewErrorEvent.t => unit
  ) =>
  t;

`UnionCallback.uncurriedMake`

Creates a function of type UnionCallback.t

uncurriedMake:
  (
    ~navigationCallback:(. webViewNavigationEvent) => unit,
    ~errorCallback:(. webViewErrorEvent) => unit
  ) =>
  t;

`element`

Represents a WebView instance, to be used with methods.

`nativeConfig`

Should 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.