React Native with Unity

Question

Does anyone have any experience combining React Native and Unity? I'm looking to start a Unity project that's very UI Heavy and I'm thinking about using React Native to take advantage of its UI capabilities on mobile and web.

I'm curious what the workflow for such an approach would be.

Good question! Have you (or anybody else) ever tried https://www.npmjs.com/package/react-native-unity-view? — mister.elastic, May 08 '20 at 08:50

score 18 · Answer 1 · answered Aug 23 '17 at 17:03

Finally after a lot of trials managed to do this. These are the steps.

1) Using this link, export android project for Gradle. Select Gradle in the Build Settings window and check the Export Project checkbox. Click Export and select the destination folder.
2) Import the generated folder in Android studio. Select ok whenever prompted. In this process, you will encounter following issues
2a) Gradle Sync Failed due to org.gradle.api.internal.tasks issues. Resolve using this link
3) Create React Native App using this link
4) Start Integrating Android exported folder inside created react native app using this link. Don't upgrade Gradle as Android studio will ask you again and again. You will encounter following issues. Don't go through "Test Integration" until you are finished with #5 here.
4a) While configuring maven, use this url for maven url "$rootDir/../node_modules/react-native/android" .
4b) While configuring maven, if you encounter problem related to javax.inject:javax.inject". Use this link.
4c) You may also encounter this error "Conflict with dependency 'com.google.code.findbugs:jsr305'". You can solve this link.
4d) During Code integration section of this link, focus on the following section: If you are using a starter kit for React Native, replace the "HelloWorld" string with the one in your index.android.js file (it’s the first argument to the AppRegistry.registerComponent() method). Here you have to replace with project name.
5) Before going through "Test your Integration" section, you have to add code to call MyReactActivity from UnityActivity. This link will help.
6) Go through "Test your Integration" section of link provided in #4. You may encounter following problems.
6a) unable to load script from assets index.android.bundle. Use this link.
6b) could not connect to development server on android. Use this link.

hello , I am working on it now do you have any idea how to add two games — Anuj Sharma, Feb 27 '21 at 12:12

score 7 · Answer 2 · answered Apr 22 '18 at 05:08

7

Check my article on Medium

I've shown with an example on How to integrate react native with Unity 3D step by step. My aim was to use the react native within the Unity3D like a module which is quite convenient if you're gonna heavily work on Unity 3D. Hope this helps for someone who comes here later.

answered Apr 22 '18 at 05:08

Akbarsha

2,422
23
34

Do you have any idea that how can we add two or more games in react native app – Anuj Sharma Feb 27 '21 at 12:13
Ideally, Unity runs one game in its container. In that case, I'd suggest you try adding Unity games inside an android fragment and use that in react native if it supports rendering fragments. Otherwise rely on Android activity with Unity game fragments @AnujSharma – Akbarsha Mar 30 '21 at 06:51

score 4 · Answer 3 · answered Nov 16 '15 at 19:02

4

I'm unsure as how a Unity game is built for iOS, if it uses Cocoa Touch for rendering its core classes.

If it does, and you have access or ability to render a UIViewController then you can render your React Native application. The only thing you would have to facilitate is setting up communication between the two applications.

Here is an example of rendering a native UI Component inside a React Native app that may help. http://moduscreate.com/leverage-existing-ios-views-react-native-app/

answered Nov 16 '15 at 19:02

stan229

2,592
19
23

Hello Stan, do you have any idea that how can we add two or more games in react native app. – Anuj Sharma Feb 27 '21 at 12:15
@Anuj if you can add one it shouldn't be a problem, add everything inside one game and conditionally change scene from react native side communication – Steve Moretz Feb 06 '22 at 09:05
By the way your link is 404 now... – Steve Moretz Feb 06 '22 at 09:10

score 1 · Answer 4 · answered Jan 13 '18 at 21:16

I was curious as well, and created an example project of how to do this for Android: https://github.com/marijnz/unity-react.

If this is a viable option, at least depends on:

How long the project will be running, both React and Unity have to be updated and this gets probably tougher over time.
The amount of sdk's/dependencies the project has.
If you want to do iOS as well.

In general, I'd probably avoid going this way. Even though the example seems pretty simple now, it was a pain to get to that (as Shaunak's answer already hints at ;))

React Native with Unity

4 Answers4