Application hangs after handling the call to native module

[BartoszKlonowski]

Welcome!

I encountered a problem when implementing a native module library (with C++/WinRT):
I have a native module exposing a callback-based function, like so:

        REACT_METHOD( CheckAvailabilityCallback, L"checkAvailabilityCallback" );
        void CheckAvailabilityCallback( std::function<void( winrt::hstring )> resultCallback ) noexcept
        {
            auto&& result = provider.getAvailabilityMessage();
            resultCallback( winrt::to_hstring(result) );
        }

which is launched when a button is pressed:

    <Button title='Check the availability' onPress={() => {
      console.log("Button pressed!");
      Fingerprint.checkAvailabilityCallback((result) => {
        console.log(`Got here successfully with result: ${result}`);
        Alert.alert('SUCCESS!', `${result}`);
        console.log("Also got here, but there's no alert shown...");
      });
    }}/>

The problem is that I can see all logs in the console, but instead of Alert being shown, the application hangs - button looks to be constantly pressed and app doesn't respond anymore...
In the logs there are also couple of errors, but I could find anything useful about them on the Internet, sorry if I missed something...
Here is a screen of logs:

---

At first glance, I thought that this may be related to the UI thread, but launching the native call through:
context.UIDispatcher().Post( [&]() -> {} )
resulted in a crash, so that's not it.

---

edit:
I completely forgot: version I'm using is:
"react-native-windows": "^0.64.0-0",

---

I'm posting this issue as a question, as I believe there's something I'm not fully aware of, so perhaps you could share some knowledge I'm missing here.
I would really appreciate your help!

[acoates-ms]

If you post the NativeModule to the UIDispatcher, I think you need to post back to the JSDispatcher to call the callback.

[BartoszKlonowski]

@acoates-ms Thank you for the very fast response!
So you are saying, that I do should use the
context.UIDispatcher().Post()?
But I also should post back to JSDispatcher in the lambda passed to UIDispatcher.Post()?
Like so:

    reactContext.UIDispatcher().Post( [&]() -> void {
        auto&& result = provider.FingerprintDeviceStatus();
        reactContext.JSDispatcher().Post( [&]() -> void { resultCallback( winrt::to_hstring( result ) ); } );
    } );

Do I get this right, or maybe you could give an example if I got into wrong direction...

---

edit:

I don't think that's the way to go. Such solution ends up with an exception at check_sta_blocking_wait:

   // Note: A blocking wait on the UI thread for an asynchronous operation can cause a deadlock.
   // See https://docs.microsoft.com/windows/uwp/cpp-and-winrt-apis/concurrency#block-the-calling-thread

So I think I could use some example.

[acoates-ms]

You new code looks ok to me.

Do you have the callstack of the blocking call? (Maybe set break on exception throw in Visual studio before stepping through the code).

Maybe FingerprintDeviceStatus is trying to call some async API synchronously, which isn't always allowed on windows, since it can cause the UI thread to hang while it waits for the result.

[BartoszKlonowski]

@acoates-ms

You new code looks ok to me.

It is incorrect as it uses references in the lambda captures, and they lead to lambdas loosing their grip to a promise and this leads to a crash I mentioned.
I changed it to

            reactContext.UIDispatcher().Post( [=]() -> void {
                auto status = provider.FingerprintDeviceStatus();
                reactContext.JSDispatcher().Post( [=]() -> void { result.Resolve( React::JSValue( status ) ); } );
            } );

but the result is still the same: app hangs after successful promise resolving and no Alert is displayed.

Maybe FingerprintDeviceStatus is trying to call some async API synchronously, which isn't always allowed on windows, since it can cause the UI thread to hang while it waits for the result.

I'm using coroutines in this so I don't think that this could be the case... but here's a full code of it just to double check:

    std::string FingerprintNativeProvider::FingerprintDeviceStatus()
    {
        CheckFingerprintAvailabilityAsync();
        return fingerprintDeviceStatus;
    }

    fire_and_forget FingerprintNativeProvider::CheckFingerprintAvailabilityAsync()
    {
        try
        {
            auto ucvAvailability = co_await winrt::Windows::Security::Credentials::UI::UserConsentVerifier::CheckAvailabilityAsync();
            this->fingerprintDeviceStatus = helper->UserConsentVerifierAvailabilityToMessage( ucvAvailability );
        }
        catch( const std::exception& e )
        {
            fingerprintDeviceStatus = e.what();
        }
    }

I guess I won't move forward with this topic, I've tried to also follow the SimpleHttpModule in C++/WinRT guide, but still no success...

[BartoszKlonowski]

Okey, now that is an interesting finding:

I'm implementing native module library, where in my index.js I do:

import { NativeModules } from "react-native";

const {Fingerprint} = NativeModules;
export {Fingerprint};

and when I launch this native module in the example app it hangs, code is:

import {Fingerprint} from 'native-module-library;

        <Button title='Check the availability' onPress={() => {
          console.log("Button pressed!");
          const fingerprint = Fingerprint;
          fingerprint.checkAvailabilityPromise()
            .then((result) => {
              console.log(`Got here successfully with result: ${result}`);
              Alert.alert('SUCCESS!', `${result}`);
              console.log("Also got here, but there's no alert shown...");
            })
            .catch(error => {console.log(`${error.message}`)});
        }}/>

BUT when I launch this native module from a library, but using NativeModule without import, it works like a charm:

        <Button title='Check the availability' onPress={() => {
          console.log("Button pressed!");
          NativeModules.Fingerprint.checkAvailabilityPromise().then((result) => {
            console.log(`Got here successfully with result: ${result}`);
            Alert.alert('SUCCESS!', `${result}`);
            console.log("Also got here and Alert displayed correctly!");
          }).catch(error => {console.log(`${error.message}`)});
        }}/>

@acoates-ms
Can it be an issue with how I'm exporting the NativeModules in index.js?

Now I'm completely lost...

[BartoszKlonowski]

Is there any solution for this error?
I'm wondering why is the native code failing only when exported from the library, but not when used calling NativeModules.Fingerprint in the example app?
I would really appreciate your help on this as I'm running out of options.

[chrisglein]

Not sure at first inspection what's going wrong here. There are questions around whether there's a timing issue with the value not being available off of NativeModules in time. Not obvious that you're doing something wrong. Let's see if we can replicate and figure it out.

@BartoszKlonowski Are you unblocked in the meantime by accessing off of NativeModules.Fingerprint directly?

[BartoszKlonowski]

@chrisglein I'm able to access my implementation by using NativeModules. directly, so yes - I'm unblocked with further native side development, thanks!
Of course in the end I will still have to export NativeModules to provide user with better dev experience.