Trouble Loading Local Script in Expo App with react-native-react-bridge #132
Description
We are currently facing an issue with loading a local script file in our Expo app when using the react-native-react-bridge library. The goal is to render a React component within the Expo app and enable communication between the native and web components using the emit method.
Our main challenge lies in loading a script file stored locally. We've attempted various methods, including using a Promise with document.createElement('script'), as shown below:
function new_script(src) {
return new Promise(function(resolve, reject){
var script = document.createElement('script');
script.src = src;
script.type = 'text/javascript';
script.addEventListener('load', function () {
console.log('resolved');
resolve();
});
script.addEventListener('error', function (e) {
console.log(e);
reject(e);
});
document.body.appendChild(script);
})
};
var myScript = new_script("packages/app/features/stockfishScript/myAlert.js");
myScript.then(res => {
console.log(res);
}).catch(e => {
console.log(e)
})
Additionally, we've explored using libraries like "react-script-tag" and "react-helmet" but have not been successful in loading the script. Interestingly, the same script loads as expected when used in a React web app without "react-native-react-bridge."
Here's a simplified example of our React code that utilizes "react-native-react-bridge":
// WebApp.js
import React, { useState, useEffect } from "react";
import {
webViewRender,
emit,
useNativeMessage,
} from "react-native-react-bridge/lib/web";
const SampleReact = () => {
alert("ON REACT CODE")
const [data, setData] = useState("ON REACT CODE");
// useNativeMessage hook receives message from React Native
useNativeMessage((message) => {
if (message.type === "success") {
setData(message.data);
}
});
useEffect(() => {
function new_script(src) {
return new Promise(function(resolve, reject){
var script = document.createElement('script');
script.src = src;
script.type = 'text/javascript';
script.addEventListener('load', function () {
console.log('resolved');
resolve();
});
script.addEventListener('error', function (e) {
console.log(e);
reject(e);
});
document.body.appendChild(script);
})
};
var myScript = new_script("packages/app/features/stockfishScript/myAlert.js");
myScript.then(res => {
console.log(res);
}).catch(e => {
console.log(e)
})
}, []);
return (
<div>
<p>React App new</p>
</div>
);
};
export default webViewRender
(<SampleReact />);
On the native side, we have a component like this:
import {
Paragraph,
} from '@my/ui'
import { ScrollView, YStack, ListItem } from 'tamagui'
import HelloWorld from 'app/features/canvas/screen'
import { Stack } from 'expo-router'
import WebView from "react-native-webview";
import { useWebViewMessage } from "react-native-react-bridge";
import webApp from "app/features/MyAlert/SampleReact";
import { useRef } from 'react';
import { StatusBar } from 'react-native';
export default function Screen() {
const webviewRef = useRef<any>();
// alert('CANVAS')
const myRef = useRef(null);
const { ref, onMessage, emit } = useWebViewMessage((message) => {
console.log(message.type, 'MESSAGE');
alert(message);
// if (message.type === "hello" && message.data === 123) {
// emit({ type: "success", data: "succeeded!" });
// }
});
return (
<>
<Stack.Screen
options={{
title: 'Chessingly - Canvas',
}}
/>
<WebView
ref={ref}
source={{ html: webApp }}
onMessage={event => onMessage(event)}
/>
</>
)
}
We'd greatly appreciate any insights or suggestions to resolve this issue and successfully load the local script in our Expo app when using "react-native-react-bridge." Thank you!