How can I place Unity WebGL in my React Native app?

Question

I have written a simple React Native app using WebGL. I used https://github.com/JilvanPinheiro/reactive-native-unity-webgl

import Unity from 'react-native-unity-webgl';
...
render() {
  return (
 <Unity 
       width="500px"
       height="350px"
       onProgress={ this.onProgress }
       src="http://192.168.1.101/Build/Ultimatum.json" 
       loader="http://192.168.1.101/Build/UnityLoader.js" />`
  );
}

But I'm getting the error below:

ReferenceError:  Can't find variable: document. This error is located at:
    in Unity (at App.js:9)
    in RCTView (at View.js:60)
    in View (at App.js:8)
    in App (at registerRootComponent.js:35)
    in RootErrorBoundary (at registerRootComponent.js:34)
    in ExpoRootComponent (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)

Is there a simpler way to place Unity webGL in my React Native app?

Saw this in the docs at the site you linked: `The path within your src and loader should be relative to the html file your app is running in.` Does the `...` in your incomplete example include `export class App extends React.Component {`? — Retired Ninja, Jun 17 '18 at 20:23

score 1 · Answer 1 · answered Jun 24 '18 at 09:35

you must have to import React and document from react-native try this it will solve your problem and also Make sure you download the release matching with your Unity version.

import React, {Component} from 'react';
import {View,document} from 'react-native';

score 1 · Answer 2 · answered Jun 24 '18 at 13:35

Is it your entire codes? or a rest of them? you must add react and some other stuffs to make that to works. I write below codes for you if you don't have it add them to your project:

import React, {Component} from 'react';
import {
    View,
    documnet
} from 'react-native';

...

render () {
    return(
        <View>
             <Unity 
               width="500px"
               height="350px"
               onProgress={ this.onProgress }
               src="http://192.168.1.101/Build/Ultimatum.json" 
               loader="http://192.168.1.101/Build/UnityLoader.js"
             />
        </View>
    );
}

Mixael Contreras · Answer 3 · 2020-07-01T20:23:37.330

Simplest way:

Go to the index.html file for your react project.
Add Script tag for the Unity WebGL loader: <script src="Your File Path Here"></script>
Script for instantiating Unity(you can also use one of your components in react for this): <script> var unityInstance = UnityLoader.instantiate("unityContainer", "%UNITY_WEBGL_BUILD_URL%");</script>
A <div> tag, which has an id that is used in the instantiation function.
Do not display it until you have reached the component path that you desired with react. When you are in the path Mywebsite/myUnityProject use the ID of the <div> to select and change the display mode to visible.

I hope that helped !

How can I place Unity WebGL in my React Native app?

3 Answers3