How to prevent React Native from stucking on es6 Promises?

Question

I'm working with Realm DB. When I work with callbacks and promises from native module (add_listener, both from results or subscriptions) my UI stuck and, even if I can see logs from js console of things getting done correctly, the UI updates only after an interaction (more specifically when I tap on the screen)

I noticed two differents behaviours:

1) When I add a listener on an object or a results object, SOMETIMES the setState in the listener callback it's fired but the problem above occurs

2) When I await promise to check if the subscription to a certain query is completed I need to tap even for see the logs go on. In this case I use this code (CODE1)

For the first problem I tryed:

1) Include the setState in the callback in a setTimeout, setImmediate - NOT WORKING

You can read about the first problem here

UI doesn't update until tap on the screen when setState is called inside a realm listener callback

https://github.com/realm/realm-js/issues/2371

Maybe related:

React Native Fetch does not render response until after clicking screen

The second problem is a new one, so I'm investigating

CODE 1

susbscribeAndSyncTo = async (object) => {


    // Aggiungo dei listeners per controllare quando la sincronizzazione sarà completata
    console.log("Recupero i dati dal server")
    var subscription = object.subscribe()

    return new Promise((resolve, reject) => {
      console.log("Imposto un listener sulla sottoscrizione")
      subscription.addListener((subscription, state) => {
        console.log("La sottoscrizione è in fase", state)
        if (this.checkSubscriptionState(state, 'user_data')) {
          console.log("La sincronizzazione è completa. rimuovo i listener dalla sottoscrizione e ritorno la promessa", state)
          subscription.removeAllListeners()
          resolve(true);
        }
      })

    });

  }

Thaks for the help

Answer 1

For the problem (2), I solved this way

susbscribeAndSyncTo = async (object) => {


// Aggiungo dei listeners per controllare quando la sincronizzazione sarà completata
console.log("Recupero i dati dal server")
var subscription = object.subscribe()

return new Promise((resolve, reject) => {
  console.log("Imposto un listener sulla sottoscrizione")
  subscription.addListener((subscription, state) => {
    console.log("La sottoscrizione è in fase", state)
    if (this.checkSubscriptionState(state, 'user_data')) {
      console.log("La sincronizzazione è completa. rimuovo i listener dalla sottoscrizione e ritorno la promessa", state)
      subscription.removeAllListeners()
      setTimeout(() => null, 0);  // THIS IS THE WORKAROUND
      resolve(true);
    }
  })

});

}

I did thanks to this post:

https://github.com/facebook/react-native/issues/6679

I'll check if this workaround solve also the (1), but I'm confident on it

UPDATE

It solves also (1)