React Native JSI Example

JSIObject.cpp

// This sample is a Work in Progress for JSI , and specific functions may change. 

#pragma once

#include <string>
#include <unordered_map>

#include <jsi/jsi.h>

// This SameplJSIObject needs to inheric from HostObject, and this is the object that will be exposed to JS.
// From JS, we can call various methods or access properties on this object. 

// Look at https://github.com/facebook/react-native/blob/master/ReactCommon/jsi/jsi.h for more details
class JSI_EXPORT SampleJSIObject : public facebook::jsi::HostObject {

public: 
  
// STEP 1: Expose "window.__SampleJSIObject" to JavaScript. 
// This is a static function, typically called from Java or ObjC when the application is initialized. 
// In java, jsi::Runtime &runtime is basically catalystInstance.getJavaScriptContextHolder()
static void SampleJSIObject::install(jsi::Runtime &runtime) {
  runtime.global().setProperty(
      runtime,
      "__sampleJSIObject",
      jsi::Function::createFromHostFunction(
          runtime,
          jsi::PropNameID::forAscii(runtime, "__SampleJSIObject"),
          1,
          [binding](jsi::Runtime& rt, const jsi::Value& thisVal, const jsi::Value* args, size_t count) {
            // Whenever someone accesses __SampleJSIObject, this is what gets exposed. 
            return std::make_shared<SampleJSIObject>();
          }));
}
 
// This is like the getter. Any property or method access from JS goes through this method.
// For example, when we call window.__sampleJSIObject.method1(), this method is called
jsi::Value TurboModule::get(jsi::Runtime& runtime, const jsi::PropNameID& propName) {
  std::string propNameUtf8 = propName.utf8(runtime);
  // When window.__sampleJSIObject.method1() is called, propNameUtf8 == 'method1' 
  return jsi::Function::createFromHostFunction(
    runtime,
    propName, // Whats the name of the property that is called
    argCount, // How many args does this method take
    [](facebook::jsi::Runtime &rt, const facebook::jsi::Value &thisVal, const facebook::jsi::Value *args, size_t count) {
      if (propNameUtf8 == 'method1') {
        // Call a Java Method, that should be executed when window.__sampleJSIObject.method1() is called in JS. 
        // Note that we should convert jsi::Value *args to jni types
        // The return type of Java Method should also be convereted back to jsi::Value
      }
    });
}
  
std::vector<PropNameID> getPropertyNames(Runtime& rt){
  // Return a list of strings, that correspond to methods and properties
  // 
}
  
}

This Gist is very helpfull
How to create a simple emit and listener pattern like we have it normal react native module?

For those who are trying to access the link: https://github.com/facebook/react-native/blob/master/ReactCommon/jsi/jsi/jsi.h

Line 28 can be 0

Line 28 can be 0

The number there is the argument count.

Here's the Updated Link https://github.com/facebook/react-native/blob/main/packages/react-native/ReactCommon/jsi/jsi/jsi.h