react-native-webview-alternative v0.0.3
react-native-webview-alternative
Alternative to react-native-webview. Less features. No Windows or macOS support. Not included in Expo.
Installation
npm install react-native-webview-alternative
(cd ios && pod install) # for iOSUsage
import WebView from "react-native-webview-alternative";
<WebView
source={{ html: '<h1>Hello World</h1>' }}
style={{ width: 300, height: 300 }}
/>Props
Extends ViewProps.
source
Load HTML into the WebView.
Properties
html(string) - The string to use as the contents of the webpagebaseURL(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(), and autofocus attribute 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()
focus()Android
Calls requestFocus() and shows the keyboard.
iOS
Calls HTMLElement.blur() and HTMLElement.focus() on document.activeElement. It won't work if keyboardDisplayRequiresUserAction is true or if document.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()
injectJavaScript(string: string)Executes the JavaScript string.
scrollTo()
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 to learn how to contribute to the repository and the development workflow.
License
MIT