Referencing Simple JS/WASM files inside React Native?

Question

I’m trying to get the Stockfish chess engine that uses a .wasm file to work on mobile devices offline in React Native (Expo). So far I have gotten Stockfish working as a simple html/js file that references the .wasm file and works offline doing that.Code Example: https://gist.github.com/zserge/6617cdbf328aac76913ff9ae85350c10

I’ve tried using the react-native-react-bridge library which is supposed to process .wasm files in React Native but haven’t had any luck in referencing the code example above correctly in the Expo folder setup to just show the results of the console.logs on a screen in RN. You can see my code below of my attempt to process the js/wasm files from a react page inside React Native.

Is this the correct library to achieve this or would you suggest another like react-native-webassembly which also processes .wasm files in RN? What’s the best way to reference the files so it can just print the console.logs on a RN screen.

Code snippet of the react page (where we are referencing the .js library which refers the wasm) being passed through the react-native-react-bridge

React.useEffect(()=>{
    const loadScript = (url) => {
        const script = document.createElement("script");
        script.src = url;
        script.async = true;
        console.log(script)
        document.body.appendChild(script);
     }
      loadScript("/stockfish/stockfish.js");
      loadScript("/stockfish/chess.min.js");
       setTimeout(()=>{
        setIsReady(true);
     }, 500);
 },[])

General Problem: I am trying to run react code in expo react native project using the react-native-react-bridge library. And that react code is refering a thrid party .js library which contains .js, .min.js, .wasm files. But the thrid party library is not working how can we do that.

Referencing Simple JS/WASM files inside React Native?

0 Answers0