I need to create a native module just for my app, But I'm not able to do it

[ArmandoVillalobos]

Hey ! I need to create a native module for my app ( I'm not looking for distributing the module ), but I'm not able to understand the documentation. I have read it too many times and I'm just not enable to do it. The reason could be that i have never used React Native before. But if someone can please explain how to do a native module that just return a constant like 1 for example it would be of really help.

The documentation that I have followed untill now are this one, I'm just following this three steps for Referencing Windows APIs within a React Native for Windows app project. It shoulf be different if i don't want to use WinRT API's ?

[Victor0814gui]

This process is a bit more robust, as it involves creating a distributable library to add your native module. You can learn more at https://github.com/microsoft/react-native-windows-samples/tree/main/samples/NativeModuleSample. If you want to create just a native module for your app, you can simply follow this documentation: https://microsoft.github.io/react-native-windows/docs/native-modules. You can find more information about the available types here: https://microsoft.github.io/react-native-windows/docs/native-modules-jsvalue.

Example

• Note: For this example, I will use native modules 1.0, which you can learn more about here as they are simpler.

• Create a file within the directory windows/projectname/, for example, MyModule.h.

• Then, include #include "MyModule.h" within your ReactPackageProvider.cpp file.

• In your MyModule.h file, you can declare the following:

#pragma once
#include "pch.h"

using namespace winrt;

REACT_MODULE(MyNativeModule);
  struct MyNativeModule
  {

    REACT_METHOD(Add, L"add");
    double Add(double a, double b) noexcept
    {
      double result = a + b;
      return result;
    }
  };

• In any .js or .tsx file, you can use your native module like this:

import { NativeModules } from "react-native"

const { MyNativeModule } = NativeModules;

const result = await MyNativeModule.add(20, 40);
console.log(result) // 60

And Voilà, it works perfectly😄.

[ArmandoVillalobos]

Hello @Victor0814gui , thanks for answering ! I Followed your steps, but I'm getting this error : debuggerWorker.js:69 Invariant Violation: No callback found with cbID 10 and callID 5 for module <unknown>. Args: '[20]'. I tried turning of the web debugger changing InstanceSettings().UseWebDebugger(true); in app.cpp to InstanceSettings().UseWebDebugger(false); but now I'm getting this error :
Possible Unhandled Promise Rejection (id: 0): TypeError: Unable to get property 'add' of undefined or null reference.
The only thing that I'm doing different is that I have made the code in App.jsx file like this :

import React from "react";

import {SafeAreaView} from "react-native";

import {Button} from "react-native-windows";

import {NativeModules} from "react-native";

const {MyNativeModule} = NativeModules;

function App() {
  const handlePress = async () => {
    const result = await MyNativeModule.add(20, 10);
    console.log(result);
  };


  return (
    <SafeAreaView>
      <Button title="Hola" onPress={handlePress} />
    </SafeAreaView>
  );
}

export default App;

Should I follow the steps of How to migrate to TurboModules ? Are there any steps that I'm missing ?

Also, shoul i follow the 5 steps in the documentation that you mentioned (: https://microsoft.github.io/react-native-windows/docs/native-modules)? or just the overview ?

[Victor0814gui]

I'm sorry, I was mistaken indeed. I was confusing it with methods that call the UI layer. Let me correct that.

import { NativeModules } from "react-native"

const { MyNativeModule } = NativeModules;

MyNativeModule.add(20, 40, (result) => {
  console.log(result) // 60
});

[ArmandoVillalobos]

thanks @Victor0814gui , but I'm still getting that const { MyNativeModule } = NativeModules; is null, The complete error is TypeError: Unable to get property 'add' of undefined or null reference Should i follow steps over than these ?

-Create a file within the directory windows/projectname/, for example, MyModule.h.

-Then, include #include "MyModule.h" within your ReactPackageProvider.cpp file.

-In your MyModule.h file, you can declare the following:

Please, i need to get out of these today

[AlmTalal]

Hey @ArmandoVillalobos I'm having the same issue, @Victor0814gui I just followed the same steps. this is my package.json:

{
  "name": "NativeModuleTry",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest",
    "windows": "react-native run-windows"
  },
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.72.4",
    "react-native-windows": "0.72.8"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.11",
    "@tsconfig/react-native": "^3.0.0",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.8",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4",
    "metro-config": "^0.76.7"
  },
  "engines": {
    "node": ">=16"
  }
}

I'm having the same doubts as @ArmandoVillalobos , should I follow the steps mentioned here ?

Or just the Overview ?

[Victor0814gui]

In this case, only if you want to use the Turbo Modules, as they utilize the codegen. But since the example above is much simpler, I decided not to use it, as it works without needing to set up the codegen.

[AlmTalal]

In this case, only if you want to use the Turbo Modules, as they utilize the codegen. But since the example above is much simpler, I decided not to use it, as it works without needing to set up the codegen.

And the other steps are not required too ?

[Victor0814gui]

For the example mentioned above, yes. However, since the previous steps didn't work, I decided to write a simple example using Turbo Modules. I think it will be easier to test this way. I added the module with the name Estudies.h 😅 inside the projectName/windows/reactnativewindows/Modules/Estudies.h folder. You can find it here: https://github.com/Victor0814gui/simples-native-module/tree/main.

[AlmTalal]

• Create a file within the directory windows/projectname/, for example, MyModule.h.
• Then, include #include "MyModule.h" within your ReactPackageProvider.cpp file.
• In your MyModule.h file, you can declare the following:

Hey ! I just tried again with the first solution and it worked ! Thanks @Victor0814gui , you just saved me !

[Victor0814gui]

You're welcome! I'm glad it worked, and I could help😆.

[AlmTalal]

This process is a bit more robust, as it involves creating a distributable library to add your native module. You can learn more at https://github.com/microsoft/react-native-windows-samples/tree/main/samples/NativeModuleSample. If you want to create just a native module for your app, you can simply follow this documentation: https://microsoft.github.io/react-native-windows/docs/native-modules. You can find more information about the available types here: https://microsoft.github.io/react-native-windows/docs/native-modules-jsvalue.

Example

• Note: For this example, I will use native modules 1.0, which you can learn more about here as they are simpler.
• Create a file within the directory windows/projectname/, for example, MyModule.h.
• Then, include #include "MyModule.h" within your ReactPackageProvider.cpp file.
• In your MyModule.h file, you can declare the following:

#pragma once
#include "pch.h"

using namespace winrt;

REACT_MODULE(MyNativeModule);
  struct MyNativeModule
  {

    REACT_METHOD(Add, L"add");
    double Add(double a, double b) noexcept
    {
      double result = a + b;
      return result;
    }
  };

• In any .js or .tsx file, you can use your native module like this:

import { NativeModules } from "react-native"

const { MyNativeModule } = NativeModules;

const result = await MyNativeModule.add(20, 40);
console.log(result) // 60

And Voilà, it works perfectly😄.

Hey @Victor0814gui ! Sorry for bothering so much, but for C# I can follow the same steps ? Or I will have to include it in a diferent package provider?

[Victor0814gui]

The steps are similar, what changes is only the syntax of your native module file. If you want to write the code in C++, you can find more about C++ code compatibility in C# https://microsoft.github.io/react-native-windows/docs/native-code-language-choice. However, if you want to write your module in C#, the syntax looks like this:
MyModule.cs

using System;
using Microsoft.ReactNative.Managed;

namespace NativeModuleSample
{
  [ReactModule]
  class FancyMath
  {

    [ReactMethod("add")]
    public double Add(double a, double b)
    {
        double result = a + b;
        return result;
    }
  }
}

[AlmTalal]

I'm getting this problem Build failed with message C:\Users\almta\myApp\windows\myApp\GetSerialDevices.cs(1,7): error C2187: syntax error: 'System' was unexpected here [C:\Users\almta\myApp\windows\myApp\myApp.vcxproj], I tried to put the package in the ReactPackageProvider.h and in the ReactPackageProvider.cpp, but the same occurs. Do you know what it could be ?

[Victor0814gui]

I didn't quite understand it exactly🤔, can you open another question for this issue with more details?