Fix react router for mobile

frontend/src/components/HomePage.js

@@ -38,6 +38,12 @@ export default class HomePage extends Component {
     }
 
     render() {
+        window.nativeMessage = (event) => {
+            alert(event.detail)
+        };
+        window.ReactNativeWebView.postMessage(JSON.stringify({
+          title: 'TEST TO ANDROID'
+        }));
         return (
               <Router >
                   <div className='appCenter'>

frontend/webpack.config.ts

@@ -24,10 +24,21 @@ const config: Configuration = {
   resolve: {
     extensions: [".tsx", ".ts", ".jsx", ".js"],
   },
+};
+
+var configWeb = Object.assign({}, config, {
+  name: "configWeb",
   output: {
-    path: path.resolve(__dirname, "static/frontend"),
-    filename: "main.js",
+      path: path.resolve(__dirname, "static/frontend"),
+      filename: "main.js",
   },
-};
+});
+var configMobile = Object.assign({}, config, {
+  name: "configMobile",
+  output: {
+      path: path.resolve(__dirname, "../mobile/html/Web.bundle/js"),
+      filename: "main.js",
+  },
+});
 
-export default config;
+export default [configWeb, configMobile];

mobile/App.tsx

@@ -1,31 +1,37 @@
-import React from 'react';
-import { WebView, WebViewMessageEvent } from "react-native-webview";
+import React, {useRef} from 'react';
+import {WebView, WebViewMessageEvent, WebViewProps} from 'react-native-webview';
 import {SafeAreaView, Text, Platform} from 'react-native';
-// import Tor from "react-native-tor";
+import Tor from 'react-native-tor';
 
 // Initialize the module
-// const tor = Tor();
+const tor = Tor();
 
-// const makeTorRequest = async()=>{
-//     // Start the daemon and socks proxy (no need for Orbot and yes iOS supported!)
-//     await tor.startIfNotStarted();
+const makeTorRequest = async () => {
+  // Start the daemon and socks proxy (no need for Orbot and yes iOS supported!)
+  await tor.startIfNotStarted();
 
-//     try{
-//        // Use built in client to make REST calls to .onion urls routed through the Sock5 proxy !
-//        const resp = await tor.get('http://robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion/api/info');
-//        return resp
-//     } catch(error){
-//       // Catch a network or server error like you normally with any other fetch library
-//     }
-// }
+  try {
+    // Use built in client to make REST calls to .onion urls routed through the Sock5 proxy !
+    const resp = await tor.get(
+      'http://robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion/api/info',
+    );
+
+    return resp;
+  } catch (error) {
+    // Catch a network or server error like you normally with any other fetch library
+  }
+};
+makeTorRequest();
 
 const App = () => {
-  // Webview with local html/js in a single location for andrid/iOS
-  // https://yelotofu.com/react-native-load-local-static-site-inside-webview-2b93eb1c4225
-  const htmlPath = (Platform.OS === 'android' ? 'file:///android_asset/' : '') + 'Web.bundle/index.html';
+  const webViewRef = useRef<WebView>();
+  var uri =
+    (Platform.OS === 'android' ? 'file:///android_asset/' : '') +
+    'Web.bundle/index.html';
 
-  const uri = 'https://robosats.onion.moe'
-  const onion = 'http://robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion'
+  // const uri = 'https://robosats.onion.moe';
+  const onion =
+    'http://robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion';
 
   const runFirst = `
       // document.body.style.backgroundColor = 'red';
@@ -34,18 +40,33 @@ const App = () => {
       // true; // note: this is required, or you'll sometimes get silent failures
     `;
 
+  const onMessage = async (event: WebViewMessageEvent) => {
+    console.log(event);
+    webViewRef.current?.injectJavaScript(
+      `
+        (function() { 
+          window.nativeMessage({"detail": "TEST TO WEB"}); 
+        })();
+      `,
+    );
+  };
+
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <SafeAreaView style={{flex: 1}}>
       <WebView
-        source={{ uri: uri }}
-        // source={{ baseUrl: 'file:///android_asset/Web.bundle/' }}
+        source={{
+          uri: uri,
+        }}
+        onMessage={onMessage}
+        // @ts-ignore
+        ref={ref => (webViewRef.current = ref)}
         javaScriptEnabled={true}
         domStorageEnabled={true}
         sharedCookiesEnabled={true}
-        originWhitelist={['*']} //originWhitelist={[uri,uri2]}
+        originWhitelist={[uri, onion]}
         scalesPageToFit={true}
         startInLoadingState={true}
-        mixedContentMode={"always"}
+        mixedContentMode={'always'}
         allowsInlineMediaPlayback={true}
         allowsFullscreenVideo={false}
         setBuiltInZoomControls={false}
@@ -56,7 +77,7 @@ const App = () => {
         allowsLinkPreview={false}
         injectedJavaScript={runFirst}
         renderLoading={() => <Text>Loading RoboSats</Text>}
-        onError={(syntheticEvent) => <Text>{syntheticEvent}</Text>}
+        onError={syntheticEvent => <Text>{syntheticEvent}</Text>}
       />
     </SafeAreaView>
   );

mobile/android/app/build.gradle

@@ -132,11 +132,11 @@ android {
     ndkVersion rootProject.ext.ndkVersion
 
     compileSdkVersion rootProject.ext.compileSdkVersion
-    
-    sourceSets { 
-        main { assets.srcDirs = ['src/main/assets', '../../html'] } 
+
+    sourceSets {
+        main { assets.srcDirs = ['src/main/assets', '../../html'] }
     }
-    
+
     defaultConfig {
         applicationId "com.robosats"
         minSdkVersion rootProject.ext.minSdkVersion
@@ -267,6 +267,8 @@ dependencies {
 
     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
 
+    implementation files("../../node_modules/react-native-tor/android/libs/sifir_android.aar")
+
     if (enableHermes) {
         //noinspection GradleDynamicVersion
         implementation("com.facebook.react:hermes-engine:+") { // From node_modules

mobile/android/app/src/main/AndroidManifest.xml

@@ -9,6 +9,7 @@
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
+      android:usesCleartextTraffic="true"
       android:theme="@style/AppTheme">
       <activity
         android:name=".MainActivity"

mobile/android/build.gradle

@@ -5,7 +5,7 @@ import org.apache.tools.ant.taskdefs.condition.Os
 buildscript {
     ext {
         buildToolsVersion = "31.0.0"
-        minSdkVersion = 21
+        minSdkVersion = 26
         compileSdkVersion = 31
         targetSdkVersion = 31