Update to latest Babylon JS/Native and fix iOS flushedQueue issue (#92)

Directly calling flushedQueue on iOS has some side effects that I didn't notice in my first test. With some UI transitions, the internal UI state becomes broken. I'm not sure what is going on, but see the comments in the code for more details. We have an active thread on Discord with some Facebook React Native folks, so we'll wait and see if they have a better solution.

I also removed the call to reinitialize graphics right after initialization on Android as this no longer seems to be an issue.

Finally, I'm updating both Babylon.js and Babylon Native to the latest. This brings in Babylon.js changes that expose the XR tracking state, and also bring in the Babylon Native XR render loop fix.

Author: ryantrem

Apps/PackageTest/package-lock.json

@@ -10,7 +10,7 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@babylonjs/core": "^4.2.0-beta.6",
+    "@babylonjs/core": "^4.2.0-beta.10",
     "@babylonjs/react-native": "file:../../Package/Assembled/babylonjs-react-native-0.0.1.tgz",
     "react": "16.13.1",
     "react-native": "0.63.1",

Apps/PackageTest/package.json

@@ -10,8 +10,8 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@babylonjs/core": "^4.2.0-beta.6",
-    "@babylonjs/loaders": "^4.2.0-beta.6",
+    "@babylonjs/core": "^4.2.0-beta.10",
+    "@babylonjs/loaders": "^4.2.0-beta.10",
     "@babylonjs/react-native": "file:../../Modules/@babylonjs/react-native",
     "@react-native-community/slider": "^2.0.9",
     "logkitty": "^0.7.1",

Apps/Playground/package-lock.json

@@ -80,9 +80,6 @@ namespace Babylon
             Polyfills::Window::Initialize(m_env);
 
             m_nativeInput = &Babylon::Plugins::NativeInput::CreateForJavaScript(m_env);
-
-            // TODO: This shouldn't be necessary, but for some reason results in a significant increase in frame rate. Need to figure this out.
-            m_graphics->ReinitializeFromWindow<void*>(windowPtr, width, height);
         }
 
         ~Native()

Apps/Playground/package.json

@@ -48,22 +48,22 @@ namespace Babylon
         struct DispatchData
         {
             arcana::run_loop_scheduler scheduler;
-            Napi::FunctionReference flushedQueue;
+            std::shared_ptr<facebook::jsi::Function> setTimeout;
 
-            DispatchData(Napi::Env env)
+            DispatchData(facebook::jsi::Runtime& rt)
                 : scheduler{ arcana::run_loop_scheduler::get_for_current_thread() }
-                , flushedQueue{ GetFlushedQueue(env) }
+                , setTimeout{ GetSetTimeout(rt) }
             {
             }
         };
 
         JsRuntime::DispatchFunctionT dispatchFunction =
-            [env = m_impl->env, data = std::make_shared<DispatchData>(m_impl->env)](std::function<void(Napi::Env)> func)
+            [env = m_impl->env, data = std::make_shared<DispatchData>(*jsiRuntime)](std::function<void(Napi::Env)> func)
             {
                 (data->scheduler)([env, func = std::move(func), &data]()
                 {
                     func(env);
-                    data->flushedQueue.Call({});
+                    data->setTimeout->call((static_cast<napi_env>(env))->rt, {});
                 });
             };
 

Modules/@babylonjs/react-native/android/src/main/cpp/BabylonNativeInterop.cpp

@@ -27,7 +27,7 @@
     "base-64": "^0.1.0"
   },
   "peerDependencies": {
-    "@babylonjs/core": "^4.2.0-beta.6",
+    "@babylonjs/core": "^4.2.0-beta.10",
     "react": "^16.13.1",
     "react-native": "^0.63.1",
     "react-native-permissions": "^2.1.4"

Modules/@babylonjs/react-native/ios/BabylonNative.cpp

@@ -1,6 +1,7 @@
 #pragma once
 
 #include <napi/napi.h>
+#include <jsi/jsi.h>
 
 // See https://github.com/BabylonJS/BabylonReactNative/issues/60 for original issue.
 // This is a work around to poke the React Native message queue to run setImmediate callbacks.
@@ -16,3 +17,14 @@ inline Napi::FunctionReference GetFlushedQueue(Napi::Env env)
     auto flushedQueue{ batchedBridge.Get("flushedQueue").As<Napi::Function>() };
     return Napi::Persistent(flushedQueue);
 }
+
+// On iOS, directly calling flushedQueue breaks some kind of internal UI state and we start getting errors like:
+// *** Assertion failure in -[RCTNativeAnimatedNodesManager disconnectAnimatedNodes:childTag:](), node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.m:138
+// [native] Exception thrown while executing UI block: 'parentNode' is a required parameter
+// However, calling setTimeout eventually also calls flushedQueue, but doesn't result in the above error,
+// so we'll go this route until we (hopefully) get a better resolution from the React Native team at Facebook.
+inline std::shared_ptr<facebook::jsi::Function> GetSetTimeout(facebook::jsi::Runtime& rt)
+{
+    auto code{std::make_shared<const facebook::jsi::StringBuffer>("() => setTimeout(() => {})")};
+    return std::make_shared<facebook::jsi::Function>(rt.evaluateJavaScript(std::move(code), "").asObject(rt).asFunction(rt));
+}