Note

You may also likeExpo DOM components

Why?

Features

Install

npm install react-native-react-bridge react-native-webview# Necessary only if you render React app in WebViewnpm install react-dom# Necessary only if you render Preact app in WebView# preact >= 10.0npm install preact# Necessary only if you render React Native Web app in WebViewnpm install react-dom react-native-web

Requirements

Usage

1. Fixmetro.config.js to use babelTransformer from this library.

React Native

module.exports={transformer:{// This detects entry points of React app and transforms them// For the other files this will switch to use default `metro-react-native-babel-transformer` for transformingbabelTransformerPath:require.resolve('react-native-react-bridge/lib/plugin'),    ...},/*  // optional config  rnrb: {    // Set `true` if you use Preact in web side.    // This will alias imports from `react` and `react-dom` to `preact/compat` automatically.    preact: true,    // Set `true` if you use react-native-web in web side.    // This will alias imports from `react-native` to `react-native-web` automatically.    web: true  },*/  ...};

Expo

const{ getDefaultConfig}=require("expo/metro-config");constconfig=getDefaultConfig(__dirname);config.transformer.babelTransformerPath=require.resolve("react-native-react-bridge/lib/plugin");module.exports=config;

Projects with Multiple Transformers

// root/customTransformer.jsconstreactNativeReactBridgeTransformer=require("react-native-react-bridge/lib/plugin");constsvgTransformer=require("react-native-svg-transformer");module.exports.transform=function({ src, filename, options}){if(filename.endsWith(".svg")){returnsvgTransformer.transform({ src, filename, options});}else{returnreactNativeReactBridgeTransformer.transform({      src,      filename,      options,});}};

// root/metro.config.jsconst{ getDefaultConfig}=require("metro-config");module.exports=(async()=>{const{resolver:{ sourceExts, assetExts},}=awaitgetDefaultConfig();return{transformer:{babelTransformerPath:require.resolve("./customTransformer.js"),},resolver:{assetExts:assetExts.filter((ext)=>ext!=="svg"),sourceExts:[...sourceExts,"svg"],},};})();

Custom Esbuild options

// root/customTransformer.jsconstreactNativeReactBridgeTransformer=require("react-native-react-bridge/lib/plugin");constesbuildOptions={pluglins:[],};consttransform=reactNativeReactBridgeTransformer.createTransformer(esbuildOptions);module.exports.transform=function({ src, filename, options}){returntransform({ src, filename, options});};

2. Make entry file for web app.

// WebApp.jsimportReact,{useState}from"react";import{webViewRender,emit,useNativeMessage,}from"react-native-react-bridge/lib/web";// Importing css is supportedimport"./example.css";// Images are loaded as base64 encoded stringimportimagefrom"./foo.png";constRoot=()=>{const[data,setData]=useState("");// useNativeMessage hook receives message from React NativeuseNativeMessage((message)=>{if(message.type==="success"){setData(message.data);}});return(<div><imgsrc={image}/><div>{data}</div><buttononClick={()=>{// emit sends message to React Native//   type: event name//   data: some data which will be serialized by JSON.stringifyemit({type:"hello",data:123});}}/></div>);};// This statement is detected by babelTransformer as an entry point// All dependencies are resolved, compressed and stringified into one fileexportdefaultwebViewRender(<Root/>);

3. Use the entry file in your React Native app with WebView.

// App.jsimportReactfrom"react";importWebViewfrom"react-native-webview";import{useWebViewMessage}from"react-native-react-bridge";importwebAppfrom"./WebApp";constApp=()=>{// useWebViewMessage hook create props for WebView and handle communication// The argument is callback to receive message from Reactconst{ ref, onMessage, emit}=useWebViewMessage((message)=>{// emit sends message to React//   type: event name//   data: some data which will be serialized by JSON.stringifyif(message.type==="hello"&&message.data===123){emit({type:"success",data:"succeeded!"});}});return(<WebView// ref, source and onMessage must be passed to react-native-webviewref={ref}// Pass the source code of React appsource={{html:webApp}}onMessage={onMessage}/>);};

4. Start your React Native app!

Documentation

FAQs

My webview displays a blank page.

Demo

git clone git@github.com:inokawa/react-native-react-bridge.gitcd examples/DemoAppnpm installnpm run ios# or npm run android

Contribute

Making a Pull Request