Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codemotionapps/react-native-webview-alternative
Alternative to react-native-webview
https://github.com/codemotionapps/react-native-webview-alternative
android ios react react-native reactjs typescript webview
Last synced: 5 days ago
JSON representation
Alternative to react-native-webview
- Host: GitHub
- URL: https://github.com/codemotionapps/react-native-webview-alternative
- Owner: codemotionapps
- License: mit
- Created: 2020-05-20T15:25:36.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T06:34:47.000Z (almost 2 years ago)
- Last Synced: 2024-04-27T02:26:26.178Z (7 months ago)
- Topics: android, ios, react, react-native, reactjs, typescript, webview
- Language: Objective-C
- Homepage:
- Size: 3.66 MB
- Stars: 2
- Watchers: 6
- Forks: 1
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-webview-alternative
[](https://www.npmjs.com/package/react-native-webview-alternative)
[](http://makeapullrequest.com)
Alternative to react-native-webview. Less features. No Windows or macOS support. Not included in Expo.
## Installation
```sh
npm install react-native-webview-alternative
(cd ios && pod install) # for iOS
```
## Usage
```js
import WebView from "react-native-webview-alternative";
Hello World' }}
style={{ width: 300, height: 300 }}
/>
```
## Props
Extends [`ViewProps`](https://reactnative.dev/docs/view).
### `source`
Load HTML into the WebView.
#### Properties
- `html` (string) - The string to use as the contents of the webpage
- `baseURL` (string or undefined) - A URL used to resolve relative URLs within the document
|Type|Required|Default value|
|----|--------|-------------|
|object|No|`null`|
### `scrollEnabled`
When set to `false` disables scrolling and pinch to zoom. Make sure to add `maximum-scale` to your viewport meta tag in order to prevent automatic scaling when focusing an input with a small font size on iOS.
|Type|Required|Default value|
|----|--------|-------------|
|boolean|No|`true`|
### `onLoad`
Called when page finishes loading.
|Type|Required|
|----|--------|
|function|No|
### `onMessage`
Called when a message is sent from the webview.
#### iOS
Use `webkit.messageHandlers.jsMessageHandler.postMessage(message)` to send your message. Supported types are object, string, number, and boolean. You will receive `message` as a property of `nativeEvent`.
#### Android
Use `JSBridge.postString(string)` to send a string. Use `JSBridge.postNumber(number)` to send a number. Use `JSBridge.postBoolean(boolean)` to send a boolean. Use `JSBridge.postNull()` to send `null`. You will receive your message as a property of `nativeEvent`.
|Type|Required|
|----|--------|
|function|No|
### `keyboardDisplayRequiresUserAction`
When set to `false` allows [`HTMLElement.focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus), and [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus) to display the keyboard.
|Type|Required|Default value|Platform|
|----|--------|-------------|--------|
|boolean|No|`true`|iOS|
### `hideKeyboardAccessoryView`
When set to `true` this will hide the default keyboard accessory view.
|Type|Required|Default value|Platform|
|----|--------|-------------|--------|
|boolean|No|`false`|iOS|
## Methods
### `focus()`
```typescript
focus()
```
#### Android
Calls [`requestFocus()`](https://developer.android.com/reference/android/webkit/WebView#requestFocus(int,%20android.graphics.Rect)) and shows the keyboard.
#### iOS
Calls [`HTMLElement.blur()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/blur) and [`HTMLElement.focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus) on [`document.activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement). It won't work if [`keyboardDisplayRequiresUserAction`](#keyboardDisplayRequiresUserAction) is `true` or if [`document.activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement) is not focusable. It is recommended to just focus your field from JavaScript instead of calling this method, calling blur beforehand may be required.
### `injectJavaScript()`
```typescript
injectJavaScript(string: string)
```
Executes the JavaScript string.
### `scrollTo()`
```typescript
scrollTo(options?: {x?: number, y?: number, animated?: boolean})
```
Scrolls to a given x, y offset, either immediately or with a smooth animation.
By default x and y are `0`, animated is `true`.
## Requirements
- React Native 0.60 or later
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT