Skip to content

codemotionapps/react-native-webview-alternative

Repository files navigation

react-native-webview-alternative

npm version PRs Welcome

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