-
|
I've been studying from ExecuteJsiTests.cpp to try to work out how to build a JSI-based native module. Unfortunately, although this file shows how to call I've also tried creating a JSI-based module using a manually-written Spec (as I don't understand any of the Codegen instructions), based on NativeBlobModuleSpec.g.h and BlobModule.h. However, On iOS and macOS, it's quite simple to write a JSI-based native module without Codegen and without Fabric. How would I do that in React Native Windows? |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 4 replies
-
|
I came up with one possible approach. We declare the native class for our HostObject ( ReactNativeModule.hHere's the native module code: banana.tsHere's how to call it in JavaScript-land: Is there a more idiomatic approach than this, though? It seems a bit strange to do this all inline inside an And is it necessary to declare the classes inside the EDIT: Indeed, I've found that you can declare them in separate files just fine. |
Beta Was this translation helpful? Give feedback.
-
|
If you have a module written as a #include <TurboModuleProvider.h>
struct MySimpleTurboModule : facebook::react::TurboModule {
....
};
struct MySimpleTurboModulePackageProvider
: winrt::implements<MySimpleTurboModulePackageProvider, IReactPackageProvider> {
void CreatePackage(IReactPackageBuilder const &packageBuilder) noexcept {
AddTurboModuleProvider<MySimpleTurboModule>(packageBuilder, L"MySimpleTurboModule");
}
}; |
Beta Was this translation helpful? Give feedback.
-
|
Thanks! Extending TurboModule looks a lot simpler than setting up codegen and extending a Spec 👍 I'll try adopting this pattern today and report back if I run into any problems. |
Beta Was this translation helpful? Give feedback.
-
|
@acoates-ms I'm unable to compile that, unfortunately. Not sure what I'm doing wrong. This is a React Native Windows v0.73 app with Fabric disabled. ReactPackageProvider.cpp#include "pch.h"
#include "ReactPackageProvider.h"
#if __has_include("ReactPackageProvider.g.cpp")
#include "ReactPackageProvider.g.cpp"
#endif
#include <TurboModuleProvider.h>
#include "Banana.h"
using namespace winrt::Microsoft::ReactNative;
namespace winrt::Banana::implementation {
void ReactPackageProvider::CreatePackage(
IReactPackageBuilder const &packageBuilder) noexcept {
AddTurboModuleProvider<BananaHostObject>(packageBuilder, L"BananaHostObject");
}
} // namespace winrt::Banana::implementation
Banana.h#include <TurboModuleProvider.h>
using namespace facebook;
struct BananaHostObject : facebook::react::TurboModule {
jsi::Value get(jsi::Runtime& rt, const jsi::PropNameID& propName) override {
return jsi::Value::undefined();
}
};Build errorShow build error |
Beta Was this translation helpful? Give feedback.
-
|
@vmoroz was able to solve the build error: I needed to implement a constructor that handled the Here's the working Banana.h#pragma once
// I'm sure several of these headers can be removed, just not sure which ones
#include <JSI/JsiApiContext.h>
#include <ReactCommon/TurboModule.h>
#include <ReactCommon/TurboModuleUtils.h>
#include <jsi/jsi.h>
#include "JSValue.h"
#include "NativeModules.h"
using namespace facebook;
struct BananaHostObject : facebook::react::TurboModule {
jsi::Value get(jsi::Runtime& rt, const jsi::PropNameID& propName) override {
return jsi::Value::undefined();
}
};
class BananaHostObject : public jsi::HostObject
{
public:
BananaHostObject(std::shared_ptr<react::CallInvoker> jsInvoker) : jsi::HostObject()
{
m_jsInvoker = jsInvoker;
}
private:
std::shared_ptr<react::CallInvoker> m_jsInvoker{nullptr};
public:
jsi::Value get(jsi::Runtime& rt, const jsi::PropNameID& propName) override {
return jsi::Value::undefined();
} |
Beta Was this translation helpful? Give feedback.
-
|
Please check this test instead: https://github.com/microsoft/react-native-windows/blob/main/vnext/Microsoft.ReactNative.IntegrationTests/JsiTurboModuleTests.cpp The code in https://github.com/microsoft/react-native-windows/blob/main/vnext/Microsoft.ReactNative.IntegrationTests/ExecuteJsiTests.cpp shows how to use JSI in context of attributed Turbo Modules (they are designed after the Java and Objective-C Turbo Modules), not how to use the JSI Turbo Modules. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you! We discussed further on Discord, so just to keep everyone else in the loop: I'd studied I also studied RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(createMyHostObject) {
RCTCxxBridge *cxxBridge = (RCTCxxBridge *)self.bridge;
// You might need to cast the pointer
jsi::Runtime* jsiRuntime = cxxBridge.runtime;
// I may have passed the jsiRuntime pointer incorrectly, but something like this:
return jsi::Object::createFromHostObject(jsiRuntime, std::make_shared<MyHostObject>());
}Though in the first place, I was only looking into returning JSI Values from an attributed TurboModule just to avoid rewriting the whole thing into a JSI TurboModule the moment I needed to work with JSI for anything. At this point, I'm happy to rewrite the whole thing into a JSI TurboModule, and this question has become more of an academic interest. |
Beta Was this translation helpful? Give feedback.
Please check this test instead: https://github.com/microsoft/react-native-windows/blob/main/vnext/Microsoft.ReactNative.IntegrationTests/JsiTurboModuleTests.cpp
It is an example how to apply @acoates-ms suggestion.
The code in https://github.com/microsoft/react-native-windows/blob/main/vnext/Microsoft.ReactNative.IntegrationTests/ExecuteJsiTests.cpp shows how to use JSI in context of attributed Turbo Modules (they are designed after the Java and Objective-C Turbo Modules), not how to use the JSI Turbo Modules.