Simple WebView Bridge - JS SDK (React Native + Expo)

A lightweight WebView bridge for React Native and Expo that automatically posts app context to web pages.

Installation

For Expo Projects

npx expo install react-native-webview expo-application
npm install blutic-webview

For React Native Projects

npm install react-native-webview expo-application blutic-webview

For iOS in React Native (non-Expo):

cd ios && pod install

Usage

JavaScript

import React from "react";
import { View, StyleSheet } from "react-native";
import SimpleWebViewBridge from "blutic-webview";

export default function App() {
  return (
    <View style={styles.container}>
      <SimpleWebViewBridge
        web_url="https://your-website.com"
        style={styles.webview}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webview: {
    flex: 1,
  },
});

TypeScript

import React from "react";
import { View, StyleSheet } from "react-native";
import SimpleWebViewBridge from "blutic-webview";

export default function App() {
  return (
    <View style={styles.container}>
      <SimpleWebViewBridge
        web_url="https://your-website.com"
        style={styles.webview}
        onLoad={() => {
          console.log("WebView loaded");
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webview: {
    flex: 1,
  },
});

What It Does

When the WebView loads, it automatically sends this message to the web page:

{
  type: 'APP_CONTEXT',
  appId: 'com.example.yourapp',  // Your app's bundle identifier or package name
  platform: 'ios'                  // or 'android'
}

Receiving the Message in Your Web Page

In your web page, listen for the message like this:

window.addEventListener("message", (event) => {
  const data = event.data;

  if (data.type === "APP_CONTEXT") {
    console.log("App ID:", data.appId);
    console.log("Platform:", data.platform);

    // Now you can use this information to customize the web experience
    // or verify that the page is being loaded from your app
  }
});

Props

| Prop | Type | Required | Description | | --------- | ---------------------- | -------- | --------------------------------------- | | web_url | string | Yes | The URL to load in the WebView | | onLoad | () => void | No | Callback when the page finishes loading | | style | StyleProp<ViewStyle> | No | Style for the WebView |

SimpleWebViewBridge also accepts all other standard React Native WebView props. See the react-native-webview documentation for all available props.

License

MIT