Introduction to JavaScript Interface (JSI)

Want a faster, more efficient way for your JavaScript to execute native code? Enter JavaScript Interface (JSI) — a write once, run everywhere solution to native code.

Understanding JSI

JSI replaces the traditional bridge in React Native, offering direct communication between JavaScript and native code. Unlike React Native Bridge code in Swift or Java, JSI is a (mostly) write-once, run everywhere solution in C. The result is faster, more efficient interactions in your app with fewer code bases.

In this article we will learn how to build a simple “Hello World” React Native app using JSI.

Setting Up

1. NodeJS: Install via Homebrew with brew install node.
2. GCC Compiler: Install with brew install gcc.
3. React Native Project Setup: Initialize using npx react-native init jsiProject --template react-native-template-typescript.

Building the React Native UI

Step 1: Setting Up Your React Native Component

Create a simple React Native app with a Button and a Text components. The button triggers an

Here is the App.jsx file for our simple UI.

import React, { useState } from 'react';
import { Button, Text, View, SafeAreaView } from 'react-native';

const App = () => {
  const [message, setMessage] = useState('');

  const onPress = () => {
    // TODO: JSI call will be made here
  };

  return (
    <SafeAreaView>
      <View style={{ margin: 20 }}>
        <Button title="Call JSI Method" onPress={onPress} />
        <Text style={{ marginTop: 20 }}>
          JSI Says: "{message}"
        </Text>
      </View>
    </SafeAreaView>
  );
};

export default App;

An iPhone renders this code as follows:

It’s not pretty, but it works

Integrating JSI

Step 2: Creating the C++ File

• In your React Native project, create a cpp directory.
• Add HelloWorld.cpp with the following function:

#include "jsi/jsi.h"

using namespace facebook::jsi;
using namespace std;

void installHelloWorld(Runtime &runtime) {
    auto helloWorld = Function::createFromHostFunction(runtime,
      PropNameID::forAscii(runtime, "sayHelloWorld"), 0,
      [](Runtime &runtime, const Value &thisValue,
        the Value *arguments, size_t count) -> Value {
          return Value(runtime, String::createFromAscii(runtime, "Hello World"));
      });
      
    runtime.global().setProperty(runtime, "getHelloWorld", move(helloWorld));
}

Step 3: Compiling the C++ Code

• For Web (using Emscripten): Compile with emcc HelloWorld.cpp -o hello_world.js.
• For iOS/Android: Compile to a shared library (.so for Android, .a for iOS) using respective compilers.

Step 4: Integrating with Your Project

• For iOS/Android, link the compiled library in your Xcode/Android project settings.
• For web, include hello_world.js in your project and load it using a script tag.

Calling the JSI function from React Native

Update the React Native code to call the JSI sayHelloWorld() function:

const onPress = () => {
  const result = global.sayHelloWorld();
  setMessage(result);
};

Now when we run the program, clicking the “Call JSI Method” updates the Text to say “Hello World”

It’s not pretty, but it works

Conclusion

With these steps, you’ve created a React Native app enhanced with JSI, showing how effortlessly JavaScript can interact with native code. This integration not only boosts performance but also opens up new possibilities for complex functionalities in your apps. Experiment and explore the power of JSI in your projects!