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,18 @@ - (void)setBridge:(RCTBridge *)bridge {
                     JSGlobalContextRef ctx_;
                 };
                 return static_cast<RealmJSCRuntime*>(bridge.runtime)->ctx_;
+            }, ^{
+                // This calls into JSIExecutor::flush() inside React Native to flush any pending UI
+                // updates after we have called into JS from C++
+                //
+                // TODO add a bit more info
+                if (!waitingForFlush) {
+                    waitingForFlush = true;
+                    [bridge jsCallInvoker]->invokeAsync([&](){
+                        printf("flush\n");
+                        waitingForFlush = false;
+                    });
+                }
             });
         } queue:RCTJSThread];
     } else { // React Native 0.44 and older
@@ -341,6 +357,8 @@ - (void)setBridge:(RCTBridge *)bridge {
 
             _initializeOnJSThread(^ {
                 return RealmReactGetJSGlobalContextForExecutor(executor, true);
+            }, [&]() {
+                // jsCallInvoker does not exist on older RN
             });
         }];
     }