Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rescript-react-native/webview

ReScript bindings for react-native-webview
https://github.com/rescript-react-native/webview

react react-native rescript rescript-react rescript-react-native webview

Last synced: 3 months ago
JSON representation

ReScript bindings for react-native-webview

Host: GitHub
URL: https://github.com/rescript-react-native/webview
Owner: rescript-react-native
License: mit
Created: 2019-09-03T19:17:33.000Z (over 5 years ago)
Default Branch: main
Last Pushed: 2023-03-05T16:19:44.000Z (almost 2 years ago)
Last Synced: 2024-10-07T11:37:29.396Z (4 months ago)
Topics: react, react-native, rescript, rescript-react, rescript-react-native, webview
Language: ReScript
Homepage:
Size: 181 KB
Stars: 8
Watchers: 4
Forks: 4
Open Issues: 3
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

# `@rescript-react-native/webview`

[![Build Status](https://github.com/rescript-react-native/webview/workflows/Build/badge.svg)](https://github.com/rescript-react-native/webview/actions)
[![Version](https://img.shields.io/npm/v/@rescript-react-native/webview.svg)](https://www.npmjs.com/@rescript-react-native/webview)
[![ReScript Forum](https://img.shields.io/discourse/posts?color=e6484f&label=ReScript%20Forum&server=https%3A%2F%2Fforum.rescript-lang.org)](https://forum.rescript-lang.org/)

[ReScript](https://rescript-lang.org) bindings for
[`react-native-webview`](https://github.com/react-native-webview/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.\*

## Installation

When
[`react-native-webview`](https://github.com/react-native-webview/react-native-webview)
is properly installed & configured by following their installation instructions,
you can install the bindings:

```console
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,

```diff
{
//...
"bs-dependencies": [
"@rescript/react",
"rescript-react-native",
// ...
+ "@rescript-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`

```rescript
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` 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

```rescript
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](https://developer.android.com/reference/android/webkit/WebView#loadDataWithBaseURL).

#### `UnionCallback.t`

Type of function passed to the [`onLoadEnd`](#onloadend-unioncallbackt) prop, to handle the union type [`webViewNavigationOrError`](#webviewnavigationorerror). Defined as

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

##### `UnionCallback.make`

Creates a function of type `UnionCallback.t`

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

##### `UnionCallback.uncurriedMake`

Creates a function of type `UnionCallback.t`

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

#### `element`

Represents a `WebView` instance, to be used with [methods](#methods).

#### `nativeConfig`

Should be constructed as below:

```rescript
nativeConfig:
(
~component: React.component('a)=?,
~props: Js.t('b)=?,
~viewManager: Js.t('c)=?
) =>
nativeConfig
```

You may refer to [iOS↗](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Custom-iOS.md) and [Android↗](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Custom-Android.md) specific guides on how to create a custom `WebView`.

#### `ref`

React `ref` intended to access a `WebView` instance. Defined as

```rescript
type ref = React.Ref.t(Js.nullable(element))
```

#### `Js.t(webViewNativeEvent)`