[React Native] Operations hang waiting for sodium.ready

[kaxline]

etebase-js/src/Crypto.ts

Line 25 in a329037

await sodium.ready;

This one is tricky and I don't have time to make a project that reproduces it, but wanted to note it here just in case anyone has some bright ideas.

When calling login or signup from the top App component of my app, everything works fine, but when I call them from components further down the tree, the ready function in Crypto.ts returns false or never returns. If I comment out all the ready checks, everything works fine.

I'm not sure of an elegant way to handle this and if there would be downstream effects to removing this call for React Native. Or possibly this is a problem with my own setup. Although I did remove all but three components in my component tree in order to find this function as the culprit. So it was as barebones as my app could get but of course there are other libraries being loaded that may be conflicting somehow.

[kaxline]

For me this seemed to be caused by calling Etebase functions like login and signup from async button press handlers in nested React Navigation navs. Not sure how to explain it, but moving the login and signup calls into a useCallback function, and then calling that useCallaback wrapped function from the button press handler, the login and signup operations finally went through.

Hope this helps someone else. Maybe some note in the docs about how to work with these functions in React hooks would be good.

[tasn]

Is this in RN or react?

Also, I know it's potentially not a useful comment, but you can try take a look at https://github.com/etesync/etesync-web/ for usage of all of these functions. Or if you prefer react-native (or tbh, react web too), you can just take a look at the (cleaner) https://github.com/etesync/etesync-notes

[kaxline]

@tasn This is in React Native. And yes, I'll take a look at the EteSync apps to get an idea how to do things properly. Thanks for the suggestion!

[tasn]

With pleasure!