Flush the React Native UI task queue whenever we call from C++ to JS …

…by calling jsCallInvoker->invokeAsync.

React Native has its own JS "microtask" queue, implemented in https://github.com/facebook/react-native/blob/main/Libraries/Core/Timers/JSTimers.js. Any asynchronous work, e.g. `setTimeout` or `setImmediate`, is added to this queue, and the queue is flushed whenever a message is sent from React Native's native core to JS: https://github.com/facebook/react-native/blob/main/Libraries/BatchedBridge/MessageQueue.js#L108.

However, our native to JS messages are not being passed via this abstraction - instead, we hook directly into the JS engine. This means that React Native is not aware that when Realm has done some async work, we might need to update the UI (and therefore flush the task queue), and this can result in Realm-related UI updates not showing until some action is taken which causes React Native to send a message from the core to JS (e.g. touching the screen), which flushes this task queue, resolving pending promises and updating the UI.

This commit calls the React Native jsCallInvoker->invokeAsync method, which internally flushes the task queue. As this method is async, we wait for any current pending invocation to complete before triggering another one (using a flag, so the call is "debounced")

react-native/ios/RealmReact/RealmReact.mm

@@ -22,6 +22,7 @@
 
 #import <React/RCTBridge+Private.h>
 #import <React/RCTJavaScriptExecutor.h>
+#include <ReactCommon/CallInvoker.h>
 
 #import <objc/runtime.h>
 #import <arpa/inet.h>
@@ -51,6 +52,7 @@ - (JSContext *)context;
 @interface RCTBridge (Realm_RCTCxxBridge)
 - (JSGlobalContextRef)jsContextRef;
 - (void *)runtime;
+- (std::shared_ptr<facebook::react::CallInvoker>)jsCallInvoker;
 @end
 
 extern "C" JSGlobalContextRef RealmReactGetJSGlobalContextForExecutor(id executor, bool create) {
@@ -83,6 +85,7 @@ @interface RealmReact () <RCTBridgeModule>
 
 @implementation RealmReact {
     NSMutableDictionary *_eventHandlers;
+    bool waitingForFlush;
 
 #if DEBUG
     GCDWebServer *_webServer;
@@ -108,6 +111,7 @@ - (instancetype)init {
     self = [super init];
     if (self) {
         _eventHandlers = [[NSMutableDictionary alloc] init];
+        waitingForFlush = false;
     }
     return self;
 }
@@ -274,15 +278,15 @@ - (void)dealloc {
 
 typedef JSGlobalContextRef (^JSContextRefExtractor)();
 
-void _initializeOnJSThread(JSContextRefExtractor jsContextExtractor) {
+void _initializeOnJSThread(JSContextRefExtractor jsContextExtractor, std::function<void()> flushUiQueue) {
     // Make sure the previous JS thread is completely finished before continuing.
     static __weak NSThread *s_currentJSThread;
     while (s_currentJSThread && !s_currentJSThread.finished) {
         [NSThread sleepForTimeInterval:0.1];
     }
     s_currentJSThread = [NSThread currentThread];
 
-    RJSInitializeInContext(jsContextExtractor());
+    RJSInitializeInContext(jsContextExtractor(), flushUiQueue);
 }
 
 - (void)setBridge:(RCTBridge *)bridge {
@@ -310,7 +314,7 @@ - (void)setBridge:(RCTBridge *)bridge {
             if (!self || !bridge) {
                 return;
             }
-
+            
             _initializeOnJSThread(^{
                 // RN < 0.58 has a private method that returns the js context
                 if ([bridge respondsToSelector:@selector(jsContextRef)]) {
@@ -325,6 +329,17 @@ - (void)setBridge:(RCTBridge *)bridge {
                     JSGlobalContextRef ctx_;
                 };
                 return static_cast<RealmJSCRuntime*>(bridge.runtime)->ctx_;
+            }, ^{
+                if (!waitingForFlush) {
+                    waitingForFlush = true;
+                    // Calling jsCallInvokver->invokeAsync restuls in React Native flushing any pending UI
+                    // updates after we have called into JS from C++
+                    //
+                    // TODO add a bit more info
+                    [bridge jsCallInvoker]->invokeAsync([&](){
+                        waitingForFlush = false;
+                    });
+                }
             });
         } queue:RCTJSThread];
     } else { // React Native 0.44 and older
@@ -341,6 +356,8 @@ - (void)setBridge:(RCTBridge *)bridge {
 
             _initializeOnJSThread(^ {
                 return RealmReactGetJSGlobalContextForExecutor(executor, true);
+            }, [&]() {
+                // jsCallInvoker does not exist on older RN
             });
         }];
     }

src/jsc/jsc_class.hpp

@@ -19,6 +19,7 @@
 #pragma once
 
 #include "jsc_types.hpp"
+#include "jsc_function.hpp"
 
 #include "js_class.hpp"
 #include "js_util.hpp"
@@ -41,7 +42,7 @@ extern js::Protected<JSObjectRef> FunctionPrototype;
 extern js::Protected<JSObjectRef> RealmObjectClassConstructor;
 extern js::Protected<JSObjectRef> RealmObjectClassConstructorPrototype;
 
-static inline void jsc_class_init(JSContextRef ctx, JSObjectRef globalObject)
+static inline void jsc_class_init(JSContextRef ctx, JSObjectRef globalObject, std::function<void()> flushUiQueue)
 {
     // handle ReactNative app refresh by reseting the cached constructor values
     if (RealmObjectClassConstructor) {
@@ -63,6 +64,8 @@ static inline void jsc_class_init(JSContextRef ctx, JSObjectRef globalObject)
     JSObjectRef globalFunction = jsc::Value::to_object(ctx, value);
     value = jsc::Object::get_property(ctx, globalFunction, "prototype");
     FunctionPrototype = js::Protected<JSObjectRef>(ctx, Value::to_object(ctx, value));
+
+    js::flush_ui_queue = flushUiQueue;
 }
 
 template <typename T>

src/jsc/jsc_function.hpp

@@ -23,12 +23,18 @@
 namespace realm {
 namespace js {
 
+// TODO
+extern std::function<void()> flush_ui_queue;
+
 template <>
 inline JSValueRef jsc::Function::call(JSContextRef ctx, const JSObjectRef& function, const JSObjectRef& this_object,
                                       size_t argc, const JSValueRef arguments[])
 {
     JSValueRef exception = nullptr;
     JSValueRef result = JSObjectCallAsFunction(ctx, function, this_object, argc, arguments, &exception);
+
+    flush_ui_queue();
+
     if (exception) {
         throw jsc::Exception(ctx, exception);
     }
@@ -48,6 +54,9 @@ inline JSObjectRef jsc::Function::construct(JSContextRef ctx, const JSObjectRef&
 {
     JSValueRef exception = nullptr;
     JSObjectRef result = JSObjectCallAsConstructor(ctx, function, argc, arguments, &exception);
+
+    flush_ui_queue();
+
     if (exception) {
         throw jsc::Exception(ctx, exception);
     }

src/jsc/jsc_init.cpp

@@ -31,6 +31,10 @@ js::Protected<JSObjectRef> FunctionPrototype;
 js::Protected<JSObjectRef> RealmObjectClassConstructor;
 js::Protected<JSObjectRef> RealmObjectClassConstructorPrototype;
 } // namespace jsc
+
+namespace js {
+std::function<void()> flush_ui_queue;
+} // namespace js
 } // namespace realm
 
 extern "C" {
@@ -43,13 +47,13 @@ JSObjectRef RJSConstructorCreate(JSContextRef ctx)
     return js::RealmClass<Types>::create_constructor(ctx);
 }
 
-void RJSInitializeInContext(JSContextRef ctx)
+void RJSInitializeInContext(JSContextRef ctx, std::function<void()> flush_ui_queue)
 {
     static const jsc::String realm_string = "Realm";
 
     JSObjectRef global_object = JSContextGetGlobalObject(ctx);
 
-    jsc_class_init(ctx, global_object);
+    jsc_class_init(ctx, global_object, flush_ui_queue);
 
     JSObjectRef realm_constructor = RJSConstructorCreate(ctx);
 

src/jsc/jsc_init.h

@@ -19,13 +19,14 @@
 #pragma once
 
 #include <JavaScriptCore/JSBase.h>
+#include <functional>
 
 #ifdef __cplusplus
 extern "C" {
 #endif
 
 JSObjectRef RJSConstructorCreate(JSContextRef ctx);
-void RJSInitializeInContext(JSContextRef ctx);
+void RJSInitializeInContext(JSContextRef ctx, std::function<void()> send_dummy_event);
 void RJSInvalidateCaches();
 
 #ifdef __cplusplus

src/jsc/rpc.cpp

@@ -387,7 +387,7 @@ RPCServerImpl::RPCServerImpl()
     }
 
     m_requests["/create_session"] = [this](const json dict) {
-        RJSInitializeInContext(m_context);
+        RJSInitializeInContext(m_context, []() {});
 
         jsc::String realm_string = "Realm";
         JSObjectRef realm_constructor =