webshell

Craft Robust React Native WebView-based components with ease.

Get Started ☕
const Webshell = makeWebshell(
WebView,
new HandleLinkPressFeature()
);
const onLinkPress = (target) => {
Linking.openURL(target.uri);
};
export default function AugmentedWebView(
webViewProps
) {
return (
<Webshell
onDOMLinkPress={onLinkPress}
{...webViewProps}
/>
);
}

Don't Repeat Ourselves

scanner

The ultimate goal of webshell is to refactor scattered behaviors reimplemented in so many WebView-based components and reuse these at will.

Leveraging WebViews

web

Implement, test and compose rich behaviors embedded in injected scripts to craft amazing, reliable WebView-based components.

Bidirectional Communication

sync_alt

Send to and receive messages from WebView. webshell forms an abstraction layer over WebView messaging system, enabling declarative and legible communication flows.

Autoheight Done Right

height

Discorver a landmark use-case: the Autoheight WebView. We depict caveats and workarounds to convey transparency over magic and let API consumers decide.

Expressive API

developer_mode

The API is terse, declarative, and can be extended at will. It has been developped with user comfort in mind: we strive at providing a maximum of feedback and help messages in addition to exhaustive documentation.

Written in Typescript

We are using advanced typing techniques to augment components with props in HOCs. 80% of this package codebase are types, resulting in a small bundle and powerful intellisense.

React Native 0.59+

React Logo

This library provides hooks and thus requires React Native 0.59 or greater, and expo SDK 33.0 or greater.