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

Answer 1

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>
    );
}

Answer 2

Simplest way:

1. Go to the index.html file for your react project.

2. Add Script tag for the Unity WebGL loader: <script src="Your File Path Here"></script>

3. 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>

4. A <div> tag, which has an id that is used in the instantiation function.

5. 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 !

Answer 3

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';