React-native-ble-plx: TypeError: undefined is not an object (evaluating '_BleModule.BleModule.createClient')

Created on 16 Feb 2019  路  7Comments  路  Source: Polidea/react-native-ble-plx

Hi, I'm new to react-native,
I've seen couple of simmilar issues here, but all of them were closed due to incorrect confugration, although i believe i did all the steps.
So, I'm trying to run simple app using react-native-ble-plx and im getting following error:

TypeError: undefined is not an object (evaluating '_BleModule.BleModule.createClient')

This error is located at:
    in App (at withExpoRoot.js:22)
    in RootErrorBoundary (at withExpoRoot.js:21)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)

Stack trace:
  node_modules\react-native-ble-plx\src\BleManager.js:91:14 in BleManager
  App.js:8:19 in App
  node_modules\react-proxy\modules\createClassProxy.js:98:23 in <unknown>
  node_modules\react-proxy\modules\createClassProxy.js:96:6 in instantiate
  node_modules\react-proxy\modules\createClassProxy.js:96:6 in instantiate
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:8039:26 in constructClassInstance
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:10474:8 in updateClassComponent
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:14091:21 in performUnitOfWork
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:14129:41 in workLoop
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:14226:15 in renderRoot
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:15193:17 in performWorkOnRoot
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:15090:24 in performWork
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:15047:14 in performSyncWork
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:14925:19 in requestWork
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:14711:16 in scheduleWork
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:15429:15 in scheduleRootUpdate
  node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:16142:20 in render
  node_modules\react-native\Libraries\ReactNative\renderApplication.js:59:52 in renderApplication
  node_modules\react-native\Libraries\ReactNative\AppRegistry.js:101:10 in run
  node_modules\react-native\Libraries\ReactNative\AppRegistry.js:195:26 in runApplication
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:349:47 in __callFunction
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:106:26 in <unknown>
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:297:10 in __guard
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:105:17 in callFunctionReturnFlushedQueue

I started from creating new app using expo-cli
expo init myapp
then ejected it
expo eject
to this point it was working.
Then I did steps 1. - 4. from android set up(i'm using windows, and developing on android),
this is part of my build.gradle

...
android {
  compileSdkVersion 27

  defaultConfig {
    applicationId 'basektball.assistant'
    minSdkVersion 18
    targetSdkVersion 26
    versionCode 1
    versionName '1.0.0'
    ndk {
      abiFilters 'armeabi-v7a', 'x86'
    }
    multiDexEnabled true
    testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    // Deprecated. Used by net.openid:appauth
    manifestPlaceholders = [
        'appAuthRedirectScheme': 'host.exp.exponent'
    ]
  }
...

and part of my AndroidManifest.xml

...
  <uses-permission android:name="android.permission.BLUETOOTH"/>
  <uses-permission android:name="android.permission.BLUETOOTH_ADMIN"/>
  <uses-permission-sdk-23 android:name="android.permission.ACCESS_COARSE_LOCATION"/>
  <uses-feature android:name="android.hardware.bluetooth_le" android:required="true"/>
  <uses-sdk
                  android:minSdkVersion="18"
                  android:targetSdkVersion="23"/>
...

My App.js is simple, I copied example code from Polidea

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { BleManager } from 'react-native-ble-plx';

export default class App extends React.Component {
  constructor() {
    super();
    this.manager = new BleManager();
  }
  componentWillMount() {
    console.log('componentWillMount');
    const subscription = this.manager.onStateChange((state) => {
      if (state === 'PoweredOn') {
        console.log('poweron');
        this.scanAndConnect();
        subscription.remove();
      }
    }, true);
  }
  scanAndConnect() {
    console.log('scanAndConnect');
    this.manager.startDeviceScan(null, null, (error, device) => {
      if (error) {
        console.log(error);
        // Handle error (scanning will be stopped automatically)
        return
      }
      console.log('device.name: ' + device.name);
      // Check if it is a device you are looking for based on advertisement data
      // or other criteria.
      if (device.name === 'TI BLE Sensor Tag' ||
        device.name === 'SensorTag') {

        // Stop scanning as it's not necessary if you are scanning for one device.
        this.manager.stopDeviceScan();

        // Proceed with connection.
      }
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>It works BLE</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Can anyone help me?

stale
Source
picture GitJacek
👀1

Most helpful comment

@GitJacek Adding new BlePackage() in public List<ReactPackage> getPackages() should be sufficient to allow functions to be registered and be visible from JS side. You can take a look at this project as well to see if it works for you on Android.

picture Cierpliwy on 22 Feb 2019
👍2 ❤1 🎉1

All 7 comments

Hello @GitJacek this error message means the library is not configured correctly!
the command react-native link react-native-ble-plx is not sufficient, please check this
If is possible share you code of android setup

leo-tavares picture leo-tavares on 17 Feb 2019

Hello @leo-tavares , thank you for your response.
On react-native link react-native-ble-plx i get:
rnpm-install info Platform 'android' module react-native-ble-plx is already linked.
This is mine MainApplication.java in android\app\src\main\java\host\exp\exponent\MainApplication.java

package host.exp.exponent;


import com.facebook.react.ReactPackage;

import java.util.Arrays;
import java.util.List;

import expo.core.interfaces.Package;
import expo.loaders.provider.interfaces.AppLoaderPackagesProviderInterface;
import expo.modules.ads.admob.AdMobPackage;
import expo.modules.analytics.segment.SegmentPackage;
import expo.modules.appauth.AppAuthPackage;
import expo.modules.backgroundfetch.BackgroundFetchPackage;
import expo.modules.barcodescanner.BarCodeScannerPackage;
import expo.modules.camera.CameraPackage;
import expo.modules.constants.ConstantsPackage;
import expo.modules.contacts.ContactsPackage;
import expo.modules.facedetector.FaceDetectorPackage;
import expo.modules.filesystem.FileSystemPackage;
import expo.modules.font.FontLoaderPackage;
import expo.modules.gl.GLPackage;
import expo.modules.google.signin.GoogleSignInPackage;
import expo.modules.localauthentication.LocalAuthenticationPackage;
import expo.modules.localization.LocalizationPackage;
import expo.modules.location.LocationPackage;
import expo.modules.medialibrary.MediaLibraryPackage;
import expo.modules.permissions.PermissionsPackage;
import expo.modules.print.PrintPackage;
import expo.modules.sensors.SensorsPackage;
import expo.modules.sms.SMSPackage;
import expo.modules.taskManager.TaskManagerPackage;
import expolib_v1.okhttp3.OkHttpClient;

// Needed for `react-native link`
import com.polidea.reactnativeble.BlePackage;
import com.facebook.react.shell.MainReactPackage;


public class MainApplication extends ExpoApplication implements AppLoaderPackagesProviderInterface<ReactPackage> {

  @Override
  public boolean isDebug() {
    return BuildConfig.DEBUG;
  }

  // Needed for `react-native link`
  public List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        // Add your own packages here!
        // TODO: add native modules!

        // Needed for `react-native link`
        new MainReactPackage(),
            new BlePackage()
    );
  }

  public List<Package> getExpoPackages() {
    return Arrays.<Package>asList(
        new CameraPackage(),
        new ConstantsPackage(),
        new SensorsPackage(),
        new FileSystemPackage(),
        new FaceDetectorPackage(),
        new GLPackage(),
        new GoogleSignInPackage(),
        new PermissionsPackage(),
        new SMSPackage(),
        new PrintPackage(),
        new ConstantsPackage(),
        new MediaLibraryPackage(),
        new SegmentPackage(),
        new FontLoaderPackage(),
        new LocationPackage(),
        new ContactsPackage(),
        new BarCodeScannerPackage(),
        new AdMobPackage(),
        new LocalAuthenticationPackage(),
        new LocalizationPackage(),
        new AppAuthPackage(),
        new TaskManagerPackage(),
        new BackgroundFetchPackage()
    );
  }

  @Override
  public String gcmSenderId() {
    return getString(R.string.gcm_defaultSenderId);
  }

  @Override
  public boolean shouldUseInternetKernel() {
    return BuildVariantConstants.USE_INTERNET_KERNEL;
  }

  public static OkHttpClient.Builder okHttpClientBuilder(OkHttpClient.Builder builder) {
    // Customize/override OkHttp client here
    return builder;
  }
}

I believe i have needed code there?

  public List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        // Add your own packages here!
        // TODO: add native modules!

        // Needed for `react-native link`
        new MainReactPackage(),
            new BlePackage()
    );
  }

What do you mean by code of android setup?

GitJacek picture GitJacek on 17 Feb 2019

@GitJacek Adding new BlePackage() in public List<ReactPackage> getPackages() should be sufficient to allow functions to be registered and be visible from JS side. You can take a look at this project as well to see if it works for you on Android.

Cierpliwy picture Cierpliwy on 22 Feb 2019
👍2 ❤1 🎉1

@GitJacek
I had same problem and I solved it.

We need

import com.facebook.soloader.SoLoader;
.
.
.
  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }

delete

    new MainReactPackage()

MainApplication.java

package host.exp.exponent;


import com.facebook.react.ReactPackage;

import java.util.Arrays;
import java.util.List;

import expo.core.interfaces.Package;
import expo.loaders.provider.interfaces.AppLoaderPackagesProviderInterface;
import expo.modules.ads.admob.AdMobPackage;
import expo.modules.analytics.segment.SegmentPackage;
import expo.modules.appauth.AppAuthPackage;
import expo.modules.backgroundfetch.BackgroundFetchPackage;
import expo.modules.barcodescanner.BarCodeScannerPackage;
import expo.modules.camera.CameraPackage;
import expo.modules.constants.ConstantsPackage;
import expo.modules.contacts.ContactsPackage;
import expo.modules.facedetector.FaceDetectorPackage;
import expo.modules.filesystem.FileSystemPackage;
import expo.modules.font.FontLoaderPackage;
import expo.modules.gl.GLPackage;
import expo.modules.google.signin.GoogleSignInPackage;
import expo.modules.localauthentication.LocalAuthenticationPackage;
import expo.modules.localization.LocalizationPackage;
import expo.modules.location.LocationPackage;
import expo.modules.medialibrary.MediaLibraryPackage;
import expo.modules.permissions.PermissionsPackage;
import expo.modules.print.PrintPackage;
import expo.modules.sensors.SensorsPackage;
import expo.modules.sms.SMSPackage;
import expo.modules.taskManager.TaskManagerPackage;
import expolib_v1.okhttp3.OkHttpClient;

// Needed for `react-native link`
// import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import com.polidea.reactnativeble.BlePackage;

public class MainApplication extends ExpoApplication implements AppLoaderPackagesProviderInterface<ReactPackage> {

  @Override
  public boolean isDebug() {
    return BuildConfig.DEBUG;
  }

  // Needed for `react-native link`
  public List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        // Add your own packages here!
        // TODO: add native modules!

        // Needed for `react-native link`
//        new MainReactPackage(),
        new BlePackage()
    );
  }

  public List<Package> getExpoPackages() {
    return Arrays.<Package>asList(
        new CameraPackage(),
        new ConstantsPackage(),
        new SensorsPackage(),
        new FileSystemPackage(),
        new FaceDetectorPackage(),
        new GLPackage(),
        new GoogleSignInPackage(),
        new PermissionsPackage(),
        new SMSPackage(),
        new PrintPackage(),
        new ConstantsPackage(),
        new MediaLibraryPackage(),
        new SegmentPackage(),
        new FontLoaderPackage(),
        new LocationPackage(),
        new ContactsPackage(),
        new BarCodeScannerPackage(),
        new AdMobPackage(),
        new LocalAuthenticationPackage(),
        new LocalizationPackage(),
        new AppAuthPackage(),
        new TaskManagerPackage(),
        new BackgroundFetchPackage()
    );
  }

  @Override
  public String gcmSenderId() {
    return getString(R.string.gcm_defaultSenderId);
  }

  @Override
  public boolean shouldUseInternetKernel() {
    return BuildVariantConstants.USE_INTERNET_KERNEL;
  }

  public static OkHttpClient.Builder okHttpClientBuilder(OkHttpClient.Builder builder) {
    // Customize/override OkHttp client here
    return builder;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }

}
hisayan picture hisayan on 13 Mar 2019

@GitJacek Any news on that?

Cierpliwy picture Cierpliwy on 5 Apr 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] picture stale[bot] on 19 Jul 2019

I've done all the above and still have this issue. I've opened a new issue on it here

dschinkel picture dschinkel on 4 Oct 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

KarthickCSK picture KarthickCSK  路  3Comments
lenninlc picture lenninlc  路  3Comments
devgeno picture devgeno  路  4Comments
nriccar picture nriccar  路  3Comments
BlackCod3 picture BlackCod3  路  3Comments