Integrating NewNode with React Native Android Apps

Instructions

For brevity and simplicity of this document, all code will be given in Java. An implementation in Kotlin could be produced by a direct translation of the patches below and with the help of the documentation at https://reactnative.dev/docs/native-modules-android.

Step 1: Add NewNode to Gradle

To make NewNode modules present in the filesystem, you can change the project’s android/app/ build.gradle file:

    dependencies {
      …
      implementation 'com.clostra. newnode: newnode:+' // ADDED LINE
     }

Step 2: Register NewNode package in Java/Kotlin

Find the file in your android/app /src/main/ java/… /MainApplication .java and edit it so:

     @Override
     protected List<React Package> getPackages() {
         @Suppress Warnings ("Unnecessary LocalVariable")
         List<ReactPackage> packages = new Package List(this). getPackages();
         // Packages that cannot be autolinked yet can be added manually here, for example:
         // packages.add (new MyReact NativePackage());
         // below MyApp Package is added to the list of packages returned
         packages.add (new NewNode Package()); // ADDED LINE
         return packages;
     }

After this step the Android part of the project will not compile yet, and the errors should show up demanding the existence of NewNodePackage class. Step 3 will instruct on the matter.

Step 3: Create NewNode package

Create a file in android/app /src/main /java/… /NewNode Package.java that contains the following:

     package com.newnode react;
     import com.facebook. react.React Package;
     import com.facebook. react.bridge. NativeModule;
     import com.facebook. react.bridge. ReactApplication Context;
     import com.facebook. react.uimanager. ViewManager;

     import java.util. ArrayList;
     import java.util. Collections;
     import java.util. List;

     public class NewNodePackage implements ReactPackage {
        @Override
        public List<ViewManager> createView Managers (ReactApplication Context reactContext) {
            return Collections. emptyList();
        }

        @Override
        public List<NativeModule> create NativeModules(
                ReactApplication Context reactContext) {
            List <NativeModule> modules = new ArrayList<>();
            modules.add (new NewNode Module (reactContext));
            return modules;
        }
     }

The project will not compile again, as the NewNode Module class does not exist in the filesystem, but it should recognize the existence of NewNode Package in the error messages. It is now time to create NewNode Module.

Step 4: Creating NewNode React Native module

We finalize the chain of unimplemented dependencies by creating a wrapper for a native NewNode package that ReactNative will be able to recognize, add to a package, and export it to the javascript programming interface.

Initialize a file in android/app/ src/main/ java/…/ NewNode Module.java with the following code:

     package com.newnode react;
     import android.util .Log;
     import com.facebook. react.bridge. NativeModule;
     import com.facebook. react.bridge. React Application Context;
     import com.facebook. react.bridge. ReactContext;
     import com.facebook. react.bridge. ReactContext BaseJava Module;
     import com.facebook. react.bridge. ReactMethod;
     import com.clostra. newnode. NewNode;

     public class NewNode Module extends ReactContext BaseJava Module {
        NewNode Module (ReactApplication Context context) {
            super(context);
            Log.e ("NewNode Native", "NewNode module created");
        }

        @Override
        public String getName() {
          return "NewNode";
        }

        @ReactMethod
        public void init() {
          NewNode.init();
        }

        @ReactMethod
        public void shutdown() {
          NewNode. shutdown();
        }

}

Here, @ReactMethod exports a function for use in React Native, and getName() determines the programming interface name for the class. Once this is done, the android part of the project should compile again.

Next, we need to “dock” it into our javascript code.

Step 5: Import NewNode native module

Create a file called NewNode.js and adjust it with respect to your projects’ specific set-up:

     import { NativeModules } from 'react-native';
     const { NewNode } = NativeModules;
     export default NewNode;

Finally, edit the main component by example like so:

     …
     import NewNode from './NewNode'; // ADDED LINE
     …

     const App: () => Node = () => {
         …
         NewNode.init(); // ADDED LINE
         …
         return …;
     };
     export default App;

When you re-run the app, it should ask for bluetooth and location permissions. That would be a sign that NewNode initialization is triggered.

‍