Example library and blog that explain how JSI modules are built from scratch in React Native

Overview

react-native-simple-jsi

This is an example library that explains how anyone can build jsi modules from scratch in React Native. This code is written as a support project for my blog.

Installation

npm install react-native-simple-jsi

Usage

See example app.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Comments
  • The following variables are used in this project, but they are set to NOTFOUND

    The following variables are used in this project, but they are set to NOTFOUND

    C/C++ debug|x86 : CMake Error: The following variables are used in this project, but they are set to NOTFOUND. Please set them or make sure they are set and tested correctly in the CMake files: REACT_NATIVE_JNI_LIB linked by target "cpp" in directory /android REACT_NATIVE_UTILS_LIB

    opened by RichardLindhout 8
  • How to link against Boost

    How to link against Boost

    Hello. I'm building a JSI module, I opted to use @mrousavy's template as a base, but I'm also using code from this repo to export Java methods. I need to use Boost libraries in my module, but I can't figure out how to link against it. I figured out how to include Boost headers based on react-native-vision-camera's CMakeLists.txt, but I can't figure out where Boost binaries are stored and it breaks at the linking step.

    Could you help me out here? Boost libraries are very useful for C++ development, so I think this could be useful for a lot of people going forward.

    opened by OzymandiasTheGreat 6
  • More than one file was found with OS independent path 'lib/x86/libreactnativeutilsjni.so'

    More than one file was found with OS independent path 'lib/x86/libreactnativeutilsjni.so'

    Trying to build the example app for android, I get the above build failure. A link is mentioned https://developer.android.com/studio/preview/features#automatic_packaging_of_prebuilt_dependencies_used_by_cmake but actually see here https://developer.android.com/studio/releases/gradle-plugin#cmake-imported-targets - none of this appears to be relevant tho.

    opened by blowback 4
  • Symlink template in example

    Symlink template in example

    Note that there is a weird quirk I have not been able to figure out. While building the example on Android I kept running into issues with REACT_NATIVE_JNI_LIB in android/CMakeLists.txt not being found. Simply logging the LIBRN_DIR variable with message() seems to fix the issue. Also, this happens only during the first build. So even if the message() is removed after the first successful build, it will keep working. For now, I just left it there.

    Closes #11

    opened by JiriHoffmann 3
  • Question: Package linking in example

    Question: Package linking in example

    Hi,

    I was just wondering if there was a specific reason why you chose to import the package in the example like this:

    https://github.com/ammarahm-ed/react-native-jsi-template/blob/1a923388bcbf0e9672c2f97dc133904dd1fda861/example/package.json#L15

    Instead of keeping it how it's originally set up by npx create-react-native-library. Meaning it's imported in the Podfile for iOS and in settings.gradle, build.gradle, and MainApplication.java on Android.

    From my understanding, imports via package.json (the way you have it now) will create a copy of the template inside node_modules which means that changes made to the template will not be reflected unless it is reinstalled with npm or yarn.

    I understand that the import in package.json looks much cleaner, but it significantly slows down the workflow so for development purposes wouldn't it make sense to keep the setup by npx create-react-native-library? Unless there is some obvious reason that I am missing.

    opened by JiriHoffmann 3
  • How to create a scoped method?

    How to create a scoped method?

    This code:

    jsiRuntime.global().setProperty(jsiRuntime, "helloWorld", move(helloWorld));
    

    Gives us:

    global.helloWorld();
    

    What if I want to have it scoped to not fill the global?

    Eg.

    global.MyModule.helloWorld();
    

    Or I should just do:

    global.MyModule = { helloWorld: global.helloWorld };
    

    Which I think defeats the purpose since it is still defined in global.

    Something like:

    global.ExpoModules.ExpoRandom.getRandomBase64String
    

    from Expo.

    https://github.com/LinusU/react-native-get-random-values/blob/master/index.js#L34

    I'm not sure how they did it, the repo is not yet updated or I am looking at the wrong code.

    https://github.com/expo/expo/tree/sdk-45/packages/expo-random

    Any ideas?

    opened by dcangulo 1
  • Error JNI on android.

    Error JNI on android.

    I am getting this error when calling function 'simpleJsiModule.getDeviceName()'

    JNI DETECTED ERROR IN APPLICATION: JNI CallObjectMethodV called with pending exception java.lang.NoSuchMethodError: no non-static method "Ljava/lang/Class;.getModel()Ljava/lang/String;"

    react-native-info System: OS: macOS 12.1 CPU: (8) x64 Apple M1 Memory: 26.81 MB / 8.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node Yarn: 1.22.17 - /opt/homebrew/bin/yarn npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm Watchman: 2022.01.31.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.2 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3 Android SDK: API Levels: 28, 29, 30, 31 Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 31.0.0 System Images: android-29 | Google Play ARM 64 v8a, android-31 | Google APIs ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: 2020.3 AI-203.7717.56.2031.7678000 Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild Languages: Java: 11.0.11 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.67.2 => 0.67.2 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

    opened by GiFarina 1
  • Several issues trying to setup

    Several issues trying to setup

    (Disclaimer: this is my first time trying to use c++ with react-native) Hi, i'm trying to setup my environment, so far i managed to make a successful ./gradlew bundleRelease. I'm using clion and I'm trying to load the CMakeLists so that i can get some intellisense / code completion. But I'm getting several errors. The first one i get without touching anything is:

    CMake Error: The following variables are used in this project, but they are set to NOTFOUND.
    Please set them or make sure they are set and tested correctly in the CMake files:
    LOG_LIB
        linked by target "cpp" in directory /home/dominick/Projects/testing/android
    REACT_NATIVE_JNI_LIB
        linked by target "cpp" in directory /home/dominick/Projects/testing/android
    
    CMake Error at CMakeLists.txt:37 (add_library):
      Cannot find source file:
    
        ../../react-native/ReactCommon/jsi/jsi/jsi.cpp
    
      Tried extensions .c .C .c++ .cc .cpp .cxx .cu .mpp .m .M .mm .ixx .cppm .h
      .hh .h++ .hm .hpp .hxx .in .txx .f .F .for .f77 .f90 .f95 .f03 .hip .ispc
    [Finished]
    

    if i change the path to jsi to ../node-modules/react-native[...] i get:

    CMake Error: The following variables are used in this project, but they are set to NOTFOUND.
    Please set them or make sure they are set and tested correctly in the CMake files:
    LOG_LIB
        linked by target "cpp" in directory /home/dominick/Projects/testing/android
    REACT_NATIVE_JNI_LIB
        linked by target "cpp" in directory /home/dominick/Projects/testing/android
    

    Any help would be greatly appreciated.

    opened by DominickVale 1
  • In Debug with Chrome,global.helloWorld is not a function

    In Debug with Chrome,global.helloWorld is not a function

    I create a new react-native procject

    npx react-native init jsiDemo
    

    and drag SimpleJsi.h SimpleJsi.mm example.h example.cpp into ios project. and modify app.js

    React.useEffect(() => {
        setResult(global.helloWorld());
      }, []);
    

    everything feels good. image

    but when I Debug with Chrome there is a error like this: image

    can you help me?

    opened by coder-log666 1
  • Fix install in SimpleJsiModule

    Fix install in SimpleJsiModule

    I fixed 2 errors that block building the android

    Operator '!=' cannot be applied to 'com.facebook.react.bridge.JavaScriptContextHolder', 'int'
    Cannot return a value from a method with void result type
    
    opened by OskarJuszczyk 0
  • Fix install in SimpleJsiModule

    Fix install in SimpleJsiModule

    I fixed 2 errors that block building the android

    Operator '!=' cannot be applied to 'com.facebook.react.bridge.JavaScriptContextHolder', 'int'
    Cannot return a value from a method with void result type
    
    opened by OskarJuszczyk 0
  • State not updating inside async callback

    State not updating inside async callback

    sometimes state does not update inside the callback any idea why it happens ?

       multiplyWithCallback(5,5,(z) =>{
         console.log(z) // callback works
          setAvg(z); // state 
       })
    

    Thanks in advance.

    opened by nilavanraj 0
  • Exception in HostObject::get(propName:DemoJsiModule): java.lang.RuntimeException: Got unknown argument class: JavaScriptContextHolder

    Exception in HostObject::get(propName:DemoJsiModule): java.lang.RuntimeException: Got unknown argument class: JavaScriptContextHolder

    Can you please help me with this one

    after trying a days i finally came into this issue and cant go further

    Exception in HostObject::get(propName:DemoJsiModule): java.lang.RuntimeException: Got unknown argument class: JavaScriptContextHolder

    opened by chetangodiya-simformsolutions 1
  • please help me out with reactnative 0.67.1

    please help me out with reactnative 0.67.1

    I created an jsi example from scratch followed your blog . But it failed at compile stage (android ) , I cannot figure out what's the missing step cause I followed the steps from blog strictly. Maybe something changed from rn0.67.1 to rn0.63.4 of this template project. I'd be graceful if you are able to provide an newer version example . thanks a lot 🙏.

    opened by yaaliuzhipeng 3
  • Feature: Include promise example

    Feature: Include promise example

    For my use case I would like the JSI function call to be asynchronous. I would still like to use the JSI for returning data since there will be a lot of data returned and I don't want to pay serialization costs, however I don't want to block the JS thread. It would be great if there was an example included in this repo which explained how to return a JSI promise.

    opened by mfbx9da4 6
  • Solution to library not automatically being included in iOS Podfile

    Solution to library not automatically being included in iOS Podfile

    Hi Ammar!

    Thanks for the great work you have done here!

    While following your directions on your blog, I had an issue where the library pod was not automatically discovered when I created the new example project within the library directory. I figured out it was because this line was missing in example/ios/podfile:

    pod 'react-native-jsi-template', :path => '../..'

    I inserted it, ran pod install and everything is now discovered as it should. I don't know why it did not automatically add it, as it says in the blog it should. But you could maybe add this as a heads up for people that do not see their library show up in Xcode when they open their project. Just a suggestion, as it took a little bit of time for me to troubleshoot what was wrong :)

    Greetings!

    opened by nohns 6
  • global.helloWorld is undefined (iOS)

    global.helloWorld is undefined (iOS)

    I'm using RN 0.63.4 (last version) I followed the getting started here https://blog.notesnook.com/getting-started-react-native-jsi/ and pretty new to the iOS world.

    There's no build issue (from xcode 12.5 and from the command line react-native run-ios) when building the example app. But I get an execution error on the first call of the JSI setResult(global.helloWorld()) - global.helloWorld is undefinded I have add a log in the installLibrary method in the SimpleJsi.mm file but never see it.

    Did I miss something in XCode, to make the react-native-simple-jsi library used in the example App (i see it in the library in development Pods) ?

    After few retry at the begining of the tutorial, i'm still stuck with this error.

    Any help would be appreciate ^^

    Thanks in advance.

    opened by hemgui 1
Owner
Ammar Ahmed
A simple guy who loves to write, code and take photos.
Ammar Ahmed
a compile-time, header-only, dimensional analysis and unit conversion library built on c++14 with no dependencies.

UNITS A compile-time, header-only, dimensional analysis library built on c++14 with no dependencies. Get in touch If you are using units.h in producti

Nic Holthaus 803 Dec 1, 2022
A Cobalt Strike Beacon Object File (BOF) project which uses direct system calls to enumerate processes for specific loaded modules or process handles.

FindObjects-BOF A Cobalt Strike Beacon Object File (BOF) project which uses direct system calls to enumerate processes for specific modules or process

Outflank B.V. 246 Nov 25, 2022
A tool for generating build scripts for C++20 projects that use modules.

cpp_module_parser [cmop] A tool for generating build scripts for C++20 projects that use modules. The intent is to provide a backend for premake, for

Alexander Christensen 2 Nov 23, 2021
The C++ REST SDK is a Microsoft project for cloud-based client-server communication in native code using a modern asynchronous C++ API design. This project aims to help C++ developers connect to and interact with services.

The C++ REST SDK is a Microsoft project for cloud-based client-server communication in native code using a modern asynchronous C++ API design. This project aims to help C++ developers connect to and interact with services.

Microsoft 7.1k Dec 1, 2022
Example of transferring file data over BLE using an Arduino Nano Sense and WebBLE

BLE File Transfer Example of transferring file data over BLE to an Arduino Nano Sense using WebBLE. Overview This is an example of how to use Bluetoot

Pete Warden 32 Nov 4, 2022
Anime browser built with AniList APIs, showcasing clean Flutter BLoC architecture

Anime browser built with AniList APIs. The purpose of this project is to showcase clean Flutter application architecture with BLoC design pattern.

Peter A. Bizjak 23 Nov 5, 2022
Handling C++ & __try exceptions without the need of built-in handlers.

manual_exception_handling this handles exceptions inside the module its specified to manage without needing previous handlers for the exception a good

null 44 Nov 22, 2022
Instant Kubernetes-Native Application Observability

Pixie gives you instant visibility by giving access to metrics, events, traces and logs without changing code.

Pixie Labs 4k Dec 4, 2022
Example code for interfacing with a LCD with a Raspberry Pi Pico

picoLCD is a collection of functions to make interfacing with HD44780 based LCD screens easier on the Raspberry Pi Pico. Rather than reading through data sheets to figure out the correct set of instructions to send to the screen, picoLCD attempts to make it a simpler process, while still being extremely versatile.

null 25 Sep 8, 2022
This is a simple example on how to have a working printf on stm32f4

STM32F4 - Printf This is a short example commented on how to use printf during stm32f4 development through UART. How to use ? This project use a STM32

Bastien Germond 1 Nov 4, 2021
Isocline is a pure C library that can be used as an alternative to the GNU readline library

Isocline: a portable readline alternative. Isocline is a pure C library that can be used as an alternative to the GNU readline library (latest release

Daan 135 Nov 25, 2022
A linux library to get the file path of the currently running shared library. Emulates use of Win32 GetModuleHandleEx/GetModuleFilename.

whereami A linux library to get the file path of the currently running shared library. Emulates use of Win32 GetModuleHandleEx/GetModuleFilename. usag

Blackle Morisanchetto 3 Sep 24, 2022
CommonMark parsing and rendering library and program in C

cmark cmark is the C reference implementation of CommonMark, a rationalized version of Markdown syntax with a spec. (For the JavaScript reference impl

CommonMark 1.4k Dec 1, 2022
A C library for parsing/normalizing street addresses around the world. Powered by statistical NLP and open geo data.

libpostal: international street address NLP libpostal is a C library for parsing/normalizing street addresses around the world using statistical NLP a

openvenues 3.6k Nov 23, 2022
Locate the current executable and the current module/library on the file system

Where Am I? A drop-in two files library to locate the current executable and the current module on the file system. Supported platforms: Windows Linux

Gregory Pakosz 380 Nov 20, 2022
A small and portable INI file library with read/write support

minIni minIni is a portable and configurable library for reading and writing ".INI" files. At just below 900 lines of commented source code, minIni tr

Thiadmer Riemersma 287 Nov 22, 2022
The libxo library allows an application to generate text, XML, JSON, and HTML output using a common set of function calls. The application decides at run time which output style should be produced.

libxo libxo - A Library for Generating Text, XML, JSON, and HTML Output The libxo library allows an application to generate text, XML, JSON, and HTML

Juniper Networks 252 Nov 20, 2022
A simple and easy-to-use library to enjoy videogames programming

hb-raylib v3.5 Harbour bindings for raylib 3.5, a simple and easy to use library to learn videogames programming raylib v3.5. The project has an educa

MarcosLMG 1 Aug 28, 2022