I'm building my first npm package for personal use. Because I need to use a third SDK from a company to implement advertisement stuff, I'm using expo react native managed workflow. I don't want to eject, so I need to create this native module myself, so I can install it then use it. The problem is that I'm getting this error and can't find how to solve it.
import com.appsploration.imadsdk.core.sdk.IMAdSdk;
import com.appsploration.imadsdk.core.sdk.IMAdSdkBuilder;
import com.appsploration.imadsdk.engage.IMAdEngage;
import com.reactnativeinnity.ImSDK;
@ReactModule(name = InnityModule.NAME)
public class InnityModule extends ReactContextBaseJavaModule {
public static final String NAME = "Innity";
public ImSDK imsdk;
public InnityModule(ReactApplicationContext reactContext) {
super(reactContext);
this.imsdk = new ImSDK(reactContext);
}
@Override
public String getName() {
return NAME;
}
// Example method
// See https://reactnative.dev/docs/native-modules-android
@ReactMethod
public void createSDK() {
this.imsdk.onCreate();
}
@ReactMethod
public void getSDK(Promise promise) {
promise.resolve(this.imsdk.getImAdSdk());
}
@ReactMethod
public void showName(Promise promise) {
promise.resolve(NAME);
}
@ReactMethod
public void multiply(double a, double b, Promise promise) {
promise.resolve(20);
}
}
Here is the main file where I declare a instance of ImSDK class and define so functions that will be called from React Native. Here is the ImSDK class:
package com.reactnativeinnity;
import android.app.Application;
import android.util.Log;
import com.appsploration.imadsdk.core.sdk.IMAdSdk;
import com.appsploration.imadsdk.core.sdk.IMAdSdkBuilder;
import com.facebook.react.bridge.ReactApplicationContext;
/**
* Created by jaspherelee on 09/03/2017.
*/
public class ImSDK extends Application {
private IMAdSdk imAdSdk;
private ReactApplicationContext context;
public ImSDK(ReactApplicationContext reactContext) {
this.context = reactContext;
}
@Override
public void onCreate()
{
super.onCreate();
imAdSdk = new IMAdSdkBuilder(this.context).build();
imAdSdk.trackInstalledApps(this.context);
}
public IMAdSdk getImAdSdk()
{
return imAdSdk;
}
}
As you can see, there is a method onCreated, there I'm creating another instance that is from the SDK I need to use, creating the object imAdSdk from import com.appsploration.imadsdk.core.sdk.IMAdSdkBuilder;, but every time I run that function in React Native, I get the error:
Toggling of web contents debugging must be done on the UI thread
Here I will show the JavaScript code where I'm importing the native module:
import { NativeModules, Platform } from 'react-native';
const LINKING_ERROR =
`The package 'react-native-innity' doesn't seem to be linked. Make sure: \n\n` +
Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
'- You rebuilt the app after installing the package\n' +
'- You are not using Expo managed workflow\n';
const Innity = NativeModules.Innity ? NativeModules.Innity : new Proxy(
{},
{
get() {
throw new Error(LINKING_ERROR);
},
}
);
function multiply(a: number, b: number): Promise<number> {
return Innity.multiply(a, b);
}
function showName():Promise<String> {
return Innity.showName();
}
function createSDK() {
Innity.createSDK();
}
function getSDK() {
return Innity.getSDK();
}
export { multiply, showName, createSDK, getSDK }
And the App.js where I use the functions from the native module:
import * as React from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
import { multiply, showName, createSDK, getSDK } from 'react-native-innity';
export default function App() {
const [result, setResult] = React.useState(0);
React.useEffect(() => {
// InnityModule.multiply(3,7);
// multiply(3, 7).then(setResult);
}, []);
const create = () => {
createSDK();
}
const showInfo =() => {
getSDK().then(result => console.log(result));
}
return (
<View style={styles.container}>
<Text>Result: hoalholaohlaohla {result}</Text>
<Button onPress = {create} title = "Craete"></Button>
<Button onPress = {showInfo} title = "Show SDK"></Button>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
box: {
width: 60,
height: 60,
marginVertical: 20,
},
});
Just when running the function createSDK, it's giving me this error.
