Skip to content
This repository has been archived by the owner on May 12, 2021. It is now read-only.

R&D Notes

Jump to bottom
Ridhô Jeftha edited this page May 29, 2020 · 25 revisions

React Native App

I followed the instruction on React Native website for the basic setup

  • Select the React Native CLI Quickstart instructions, choose the correct OS and target.

Android Setup (on Windows)

These instructions can be found by selecting the Android setup for Windows OS.

  1. Installed Node, Python2, JDK8

  2. Installed Android Studio (latest version)

  3. Installed the following components in Android Studio:

    • Android SDK
    • Android SDK Platform
    • Performance (Intel ® HAXM) (See here for AMD)
    • Android Virtual Device

  4. Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner.

    • Install Android SDK Platform 28
    • Install Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

  5. Important to make sure the correct SDKs are set up and pointed to. Select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that 28.0.3 is selected.

  6. Create a new ANDROID_HOME user variable (in Environment Variables) that points to the path to your Android SDK.

  7. Add platform-tools (found inside the Android SDK folder) to Path (in Environment Variables)

iOS Setup (on Mac)

These instructions can be found by selecting the iOS setup for macOS.

Creating a new application

  1. React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using npx, which ships with Node.js

    • (to create a new project) npx react-native init [ProjectName]

  2. At this point I plugged my phone in and checked that Android Studio is detecting it. Ran the React Native app to see if it was working.

    • (to start the server) npx react-native start

    • (to run on android device) npx react-native run-android

Found more details for running React Native on a test device

Installing react-native-unity-view

Followed instructions on the github readme to get unity view working in React Native

  1. Installed yarn (different installation process depending on OS)

Once that was installed, I got the react-native-unity-view project by running: yarn add @asmadsen/react-native-unity-view

  1. Created a new unity folder to house the UnityProject
├── android
├── ios
├── unity
│   └── <Your Unity Project>    // Example: UnityProject
├── node_modules
├── package.json
└── README.md

  1. Copied Build.cs and XCodePostBuild.cs from react-native-unity-view and placed them in unity//Assets/Scripts/Editor/

  2. Player Settings setup in Unity:

  • Android

    • Scripting Backend: IL2CPP
    • Api Compatibility .Net 4.x
    • Target Architectures: ARMv7 / ARM64
    • Auto Graphics API: false
    • Graphics APIs: OpenGLES3, OpenGLES2

  • iOS

    • Auto Graphics API: true

  1. In C:\Projects\React\react-native-unity-view-test\ReactNativeTest\android\build.gradle Had to set the minimum SDK to 19 to match that of Unity (will this have consequences down the line?)

  2. Export the Unity Project

  • using ReactNative => Export Android
  • or ReactNative => Export iOS
  1. Replaced the App.js script with the following to get UnityView to run
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';
import {UnityView} from '@asmadsen/react-native-unity-view';


export default class App extends React.Component<Props, State>{
  render() {
    return (
      <View>      
        <Text style={styles.sectionTitle}>
          Welcome to React Native!
        </Text>
        <UnityView style={styles.container}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: '100%',
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
});
  • If changes are made in Unity: the Export function sometimes fails and I had to delete the UnityExport folder and export again using ReactNative => Export Android. Other times just hitting Export again worked.
  • If changes are made in App.js, rebuild the app using npm react-native run-android

React Native - Unity Messaging

React Native UI needs to be able to send messages to Unity and vice versa. I followed the examples on the react-native-unity-view-test github.

The SMS.cs class handles the message interactions in the Unity-side and App.js includes React-Native functions to deal with the messaging to and from Unity.

Adding EasyAR

I tested the Unity EasyAR 3.1.0 version to get it working with the react-native-unity-view. EasyAR has it's own custom .jar file that needs to be included as a dependency in the build.gradle file that can be found in the UnityExport folder. This file is generated by unity so the dependency will have to be re-added or the comment to allow overwriting should be removed. This can be automated in future.

Add the following line under dependencies.

    implementation ':EasyAR'

Note: UnityExport/build.gradle gets regenerated when unity is re-exported for react-native-unity-view.

Adding Lottie to React Native

Following instructions here and here

Ran

npm i --save lottie-react-native
npm i --save [email protected]

Firstly tried to native-link automagically by using: react-native link lottie-react-native

App was crashing so had to do the following:

  1. in android/app/src/main/java/com/reactnativetest/MainApplication.java

    • add import com.airbnb.android.react.lottie.LottiePackage; on the imports section
    • add packages.add(new LottiePackage()); in List<ReactPackage> getPackages();

  2. in android/app/build.gradle

    • add implementation project(':lottie-react-native') in the dependencies block

  3. in android/settings.gradle

    • add:
include ':lottie-react-native'
project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')

Finally, went to android/build.gradle and make sure it has :

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        // Add the following 3 lines
        maven {
            url 'https://maven.google.com'
        }
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}
Clone this wiki locally