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 iOS

Usage

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 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(), 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