Custom JSI Module crashes app at runtime when newArchitecture or Hermes are switched on

[billp72]

When I turn on either Hermes and/or newArchitecture, the app crashed upon launch. When I comment out
import simpleJsiModule, {isLoaded} from 'react-native-jsi', it launches.

Does anyone know of any issue with JSI modules/NPM Native Modules with either Hermes or the new architecture switched on? thanks

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 Intel(R) Core(TM) i5-8305G CPU @ 2.80GHz
    Memory: 1.13 GB / 7.82 GB
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK:
      AllowAllTrustedApps: Enabled
      Versions: 10.0.17763.0, 10.0.18362.0
  IDEs:
    Android Studio: Not Found
    Visual Studio: 16.8.31005.135 (Visual Studio Community 2019)
  Languages:
    Java: 11.0.12 - /c/Program Files/Android/Android Studio1/jre/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.68.2 => 0.68.2
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

NPM module

{
  "name": "react-native-jsi",
  "version": "0.3.0",
  "description": "How to build a jsi module example library",
  "main": "./src/index.ts",
  "source": "src/index",
  "files": [
    "src",
    "lib",
    "android",
    "ios",
    "cpp",
    "react-native-jsi.podspec",
    "!lib/typescript/example",
    "!android/build",
    "!ios/build",
    "!**/__tests__",
    "!**/__fixtures__",
    "!**/__mocks__"
  ],
  "scripts": {
    "test": "jest",
    "typescript": "tsc --noEmit",
    "lint": "eslint \"**/*.{js,ts,tsx}\"",
    "prepare": "bob build",
    "release": "release-it",
    "example": "yarn --cwd example",
    "pods": "cd example && pod-install --quiet",
    "bootstrap": "yarn example && yarn && yarn pods"
  },
  "keywords": [
    "react-native",
    "ios",
    "android"
  ],
  "repository": "https://github.com/billp72/react-native-jsi",
  "author": "",
  "license": "MIT",
  "publishConfig": {
    "registry": "https://registry.npmjs.org/"
  },
  "devDependencies": {
    "@commitlint/config-conventional": "^11.0.0",
    "@react-native-community/eslint-config": "^2.0.0",
    "@release-it/conventional-changelog": "^2.0.0",
    "@types/jest": "^26.0.0",
    "@types/react": "^16.9.19",
    "@types/react-native": "0.62.13",
    "commitlint": "^11.0.0",
    "eslint": "^7.2.0",
    "eslint-config-prettier": "^7.0.0",
    "eslint-plugin-prettier": "^3.1.3",
    "husky": "^4.2.5",
    "jest": "^26.0.1",
    "pod-install": "^0.1.0",
    "prettier": "^2.0.5",
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-builder-bob": "^0.18.0",
    "release-it": "^14.2.2",
    "typescript": "^4.1.3"
  },
  "peerDependencies": {
    "react": "*",
    "react-native": "*"
  },
  "jest": {
    "preset": "react-native",
    "modulePathIgnorePatterns": [
      "<rootDir>/example/node_modules",
      "<rootDir>/lib/"
    ]
  },
  "commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ]
  },
  "release-it": {
    "git": {
      "commitMessage": "chore: release ${version}",
      "tagName": "v${version}"
    },
    "npm": {
      "publish": true
    },
    "github": {
      "release": true
    },
    "plugins": {
      "@release-it/conventional-changelog": {
        "preset": "angular"
      }
    }
  },
  "eslintConfig": {
    "root": true,
    "extends": [
      "@react-native-community",
      "prettier"
    ],
    "rules": {
      "prettier/prettier": [
        "error",
        {
          "quoteProps": "consistent",
          "singleQuote": true,
          "tabWidth": 2,
          "trailingComma": "es5",
          "useTabs": false
        }
      ]
    }
  },
  "eslintIgnore": [
    "node_modules/",
    "lib/"
  ],
  "prettier": {
    "quoteProps": "consistent",
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "es5",
    "useTabs": false
  },
  "react-native-builder-bob": {
    "source": "src",
    "output": "lib",
    "targets": [
      "commonjs",
      "module",
      [
        "typescript",
        {
          "project": "tsconfig.build.json"
        }
      ]
    ]
  },
  "dependencies": {
    "react-native-jsi": "^1.0.0"
  }
}

src/index.js

import { NativeModules } from 'react-native';
// Installing JSI Bindings
const simpleJsiModule: {
  helloWorld(): string;
  multiplyWithCallback(
    x: number,
    y: number,
    callback: (z: number) => void
  ): void;
  multiply(x: number, y: number): number;
  getDeviceName(): string;
  setItem(key: string, value: string): boolean;
  getItem(key: string): string;
  foo(callback:(error:string | undefined,value:string | undefined) => void):void
  //@ts-ignore
} = global;

export function isLoaded() {
  return typeof simpleJsiModule.getItem === 'function';
}
if (!isLoaded()) {
  const result = NativeModules.SimpleJsi?.install();
  if (!result && !isLoaded())
    throw new Error('JSI bindings were not installed for: SimpleJsi Module');

  if (!isLoaded()) {
    throw new Error('JSI bindings were not installed for: SimpleJsi Module');
  }
}
export default simpleJsiModule;

// App.js

 import React from 'react';
 import type {Node} from 'react';
 import simpleJsiModule, {isLoaded} from 'react-native-jsi';
 import {
   SafeAreaView,
   ScrollView,
   StatusBar,
   StyleSheet,
   Text,
   useColorScheme,
   View,
   TouchableOpacity,
   NativeModules,
 } from 'react-native';
 
 import {
   Colors,
   DebugInstructions,
   Header,
   LearnMoreLinks,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';

JSI async example
Is the below thread-safe? Is there anything else I might need to do?

auto foo = Function::createFromHostFunction(
            jsiRuntime,
            PropNameID::forAscii(jsiRuntime, "foo"),
            1,
            [](Runtime &runtime, const Value &thisValue, const Value *arguments, size_t count) -> Value
            {
                auto userCallbackRef = std::make_shared<Object>(arguments[0].getObject(runtime));

                auto f = [&runtime](shared_ptr<Object> userCallbackRef)
                {
                    auto val = String::createFromUtf8(runtime, "hello world");
                    auto error = Value::undefined();
                    userCallbackRef->asFunction(runtime).call(runtime, error, val);
                };

                std::thread thread_object(f, userCallbackRef);
                thread_object.detach();

                return Value::undefined();
            });
        jsiRuntime.global().setProperty(jsiRuntime, "foo", std::move(foo));

[andrestone]

Hello @billp72.

"JSI Modules" and "NPM Native modules" are not the way to build on RN's new architecture.

I'd suggest you check the official docs:

• https://reactnative.dev/architecture/overview
• https://reactnative.dev/docs/new-architecture-intro

[billp72]

Ok. Thanks. I'll look more deeply into it. It seems creating custom turbo modules requires a different approach.

…

On Mon, May 30, 2022, 3:20 AM André Fontenele ***@***.***> wrote: Hello @billp72 <https://github.com/billp72>. "JSI Modules" and "NPM Native modules" are not the way to build on RN's new architecture. I'd suggest you check the official docs <https://reactnative.dev/architecture/overview>. — Reply to this email directly, view it on GitHub <#41 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACQHNB2SFECE5IETFJCOEZ3VMRT5TANCNFSM5XFXIRHA> . You are receiving this because you were mentioned.Message ID: <reactwg/react-native-new-architecture/repo-discussions/41/comments/2846847 @github.com>

[yotamishak]

@billp72

Check out https://github.com/talknagish/react-native-turbo-starter

It's an example for creating turbo module.
It's not using direct jsi bindings but there is an example of calling c++ from the native side.

[billp72]

Thanks. Exactly what I was looking for. I seem to be getting this error in Windows 11 [image: image.png] Any thoughts? Bill

…

On Mon, May 30, 2022, 5:28 PM Yotam Ishak ***@***.***> wrote: @billp72 <https://github.com/billp72> Check out https://github.com/talknagish/react-native-turbo-starter — Reply to this email directly, view it on GitHub <#41 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACQHNBZPD7SAYKJIGFHFJD3VMUXHBANCNFSM5XFXIRHA> . You are receiving this because you were mentioned.Message ID: <reactwg/react-native-new-architecture/repo-discussions/41/comments/2851522 @github.com>