Merge pull request #37 from inokawa/expo

Fix bug that babelTransformer do not work correctly in expo

Author: inokawa

README.md

@@ -58,7 +58,9 @@ npm install preact
 
 ## Usage
 
-1. Fix `metro.config.js` to use babelTransformer from this library.
+### 1. Fix `metro.config.js` to use babelTransformer from this library.
+
+#### React Native
 
 ```javascript
 module.exports = {
@@ -77,7 +79,25 @@ module.exports = {
 };
 ```
 
-2. Make entry file for web app.
+#### Expo
+
+```javascript
+const { getDefaultConfig } = require("expo/metro-config");
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = {
+  ...config,
+  transformer: {
+    ...config.transformer,
+    babelTransformerPath: require.resolve(
+      "react-native-react-bridge/lib/plugin"
+    ),
+  },
+};
+```
+
+### 2. Make entry file for web app.
 
 - If you use React in web, import modules from `react` and `react-native-react-bridge/lib/web`.
 - If you use Preact in web, import modules from `preact` and `react-native-react-bridge/lib/web/preact`.
@@ -126,7 +146,7 @@ const Root = () => {
 export default webViewRender(<Root />);
 ```
 
-3. Use the entry file in your React Native app with WebView.
+### 3. Use the entry file in your React Native app with WebView.
 
 ```jsx
 // App.js
@@ -160,12 +180,14 @@ const App = () => {
 };
 ```
 
-4. Start your React Native app!
+### 4. Start your React Native app!
 
 ## Demo
 
 This repository includes demo app.
 
+### React Native
+
 Before running this app, please prepare environment for React Native (https://reactnative.dev/docs/environment-setup).
 
 ```sh
@@ -174,3 +196,12 @@ cd examples/DemoApp
 npm install
 npm run ios # or npm run android
 ```
+
+### Expo
+
+```sh
+git clone [email protected]:inokawa/react-native-react-bridge.git
+cd examples/DemoAppExpo
+yarn
+expo start
+```

examples/DemoAppExpo/.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

examples/DemoAppExpo/.gitattributes

@@ -0,0 +1 @@
+*.pbxproj -text

examples/DemoAppExpo/.gitignore

@@ -0,0 +1,54 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+!debug.keystore
+
+# Bundle artifacts
+*.jsbundle
+
+# CocoaPods
+/ios/Pods/
+
+# Expo
+.expo/
+web-build/

examples/DemoAppExpo/App.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import {
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  View,
+  TextInput,
+  Pressable,
+} from "react-native";
+import WebView from "react-native-webview";
+import { useBridge } from "react-native-react-bridge";
+import webApp from "./WebApp";
+
+export default function App() {
+  const [data, setData] = useState("This is React Native");
+  const { ref, source, onMessage, emit } = useBridge<string>(
+    webApp,
+    (message) => {
+      if (message.type === "hi") {
+        setData(message.data);
+      }
+    }
+  );
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.top}>
+        <WebView ref={ref} source={source} onMessage={onMessage} />
+      </View>
+      <View style={styles.bottom}>
+        <TextInput
+          style={styles.input}
+          onChangeText={(text) => setData(text)}
+          value={data}
+        />
+        <Pressable
+          onPress={() => emit({ type: "hello", data: data })}
+          style={styles.button}
+        >
+          <Text>send to Web</Text>
+        </Pressable>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  top: {
+    flex: 1,
+    borderWidth: 4,
+    borderColor: "gray",
+  },
+  bottom: {
+    padding: 4,
+    flex: 1,
+  },
+  input: {
+    height: 40,
+    borderColor: "gray",
+    borderWidth: 1,
+  },
+  button: {
+    borderRadius: 10,
+    padding: 8,
+    backgroundColor: "lightgray",
+  },
+});

examples/DemoAppExpo/WebApp.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+import {
+  webViewRender,
+  emit,
+  useSubscribe,
+} from "react-native-react-bridge/lib/web";
+import "./example.css";
+
+const style = {
+  width: "100vw",
+  height: "100vh",
+  margin: "auto",
+  backgroundColor: "lightblue",
+};
+
+const Root = () => {
+  const [data, setData] = useState("This is Web");
+  useSubscribe<string>((message) => {
+    if (message.type === "hello") {
+      setData(message.data);
+    }
+  });
+  return (
+    <div style={style}>
+      <textarea value={data} onChange={(e) => setData(e.target.value)} />
+      <div>
+        <button onClick={() => emit({ type: "hi", data: data })}>
+          send to React Native
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default webViewRender(<Root />);

examples/DemoAppExpo/__tests__/App.js

@@ -0,0 +1,10 @@
+import 'react-native';
+import React from 'react';
+import App from '../App.tsx';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  renderer.create(<App />);
+});

examples/DemoAppExpo/android/app/BUCK

@@ -0,0 +1,55 @@
+# To learn about Buck see [Docs](https://buckbuild.com/).
+# To run your application with Buck:
+# - install Buck
+# - `npm start` - to start the packager
+# - `cd android`
+# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
+# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
+# - `buck install -r android/app` - compile, install and run application
+#
+
+load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")
+
+lib_deps = []
+
+create_aar_targets(glob(["libs/*.aar"]))
+
+create_jar_targets(glob(["libs/*.jar"]))
+
+android_library(
+    name = "all-libs",
+    exported_deps = lib_deps,
+)
+
+android_library(
+    name = "app-code",
+    srcs = glob([
+        "src/main/java/**/*.java",
+    ]),
+    deps = [
+        ":all-libs",
+        ":build_config",
+        ":res",
+    ],
+)
+
+android_build_config(
+    name = "build_config",
+    package = "com.demoappexpo",
+)
+
+android_resource(
+    name = "res",
+    package = "com.demoappexpo",
+    res = "src/main/res",
+)
+
+android_binary(
+    name = "app",
+    keystore = "//android/keystores:debug",
+    manifest = "src/main/AndroidManifest.xml",
+    package_type = "debug",
+    deps = [
+        ":app-code",
+    ],
+)