Is there any way to loadUrl() async?

[ty01314]

thank you for your plugin.

I have a problem during call loadUrl() in componentDidMount(). React native start render() until loadUrl() finish.

Hence, May I ask is There any way to loadUrl() async?

[johnsonsu]

All native call that goes through React Native bridge are async:

React Native bridge is asynchronous, so the only way to pass a result to JavaScript is by using callbacks or emitting events

as you can find in the official documentation here.

However the code could be using up some CPU power causing the render to delay. Does removing the loadUrl() completely removes the delay? Also which platform are you on?

[ty01314]

tried with async/await function but no different.

Does removing the loadUrl() completely removes the delay? yes.

I am on Android platform.

Thank you so much~~

[johnsonsu]

This is very strange as componentDidMount() should run after the first render() as discussed here.

In that case, the only hack that I can think of is try using a setTimeout(), like:

...
componentDidMount() {
  setTimeout(() => {
    loadUrl()
  }, 500)
}
...

[AdamStone]

I think the problem is is not with React, but this prepare call on the native side. Per the docs this "prepares the player for playback, synchronously". For a remote url the app basically becomes unresponsive during the time it takes to download the file.

This call to create would have the same problem because create automatically calls prepare.

There is a prepareAsync method that would probably be better to use here. I don't see any create overload that uses prepareAsync though. Might need to use the constructor instead and configure it manually, like in this example.