Why is this call for an adaptive native module that blocks the user interface?

Question

As said in the docs, I moved some long data-collection code to my own module to free up the JS thread, but I noticed that this still blocks the user interface. Why is this and what can I do to avoid this?

The native module is called from JS as follows:

MyNativeModule.fetch(path).then( data => dispatchData(data) ) 

The native method looks like this (it uses the Android Firebase SDK):

 @ReactMethod public void fetch(final String path, final Promise promise) { root.child(path).addListenerForSingleValueEvent(new ValueEventListener() { @Override public void onDataChange(DataSnapshot snapshot) { if (snapshot.exists()) { promise.resolve(castSnapshot(snapshot)); } else { promise.resolve(null); } } @Override public void onCancelled(FirebaseError firebaseError) { promise.reject(firebaseError.getMessage()); } } } 

The castSnapshot method converts the Firebase DataSnapshot object to WriteableMap . I can share the implementation if it is useful.

I noticed that even if I replace promise.resolve(castSnapshot(snapshot)); on castSnapshot(snapshot); promise.resolve(null); castSnapshot(snapshot); promise.resolve(null); , the call blocks the user interface: therefore, it does not send data over the bridge, which is the culprit. If the amount of data is large, castSnapshot may take some time, and this is clearly what blocks.

Even if this code works for a long time, shouldn't it be moved to its own module, a free user interface? What I won’t get about it?

Many thanks.

Answer 1

Try wrapping the root.child string in a new Thread instance, for example:

 @ReactMethod public void fetch(final String path, final Promise promise) { new Thread(new Runnable() { public void run() { root.child(path)... } }).start(); }