Toggling of web contents debugging must be done on the UI thread

Viewed 18

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

enter image description here

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.

0 Answers
Related