r.ble.scan is not a function

[Theofilos-Chamalis]

Using Ionic React together with capacitor, I have installed the following dependencies: "@ionic-native/core": "^5.25.0", "@ionic-native/ble": "^5.25.0", "cordova-plugin-ble-central": "^1.2.5",

and the React code looks like this:

import React, { Component } from "react";
import {
  IonContent, IonHeader, IonPage, IonToolbar, IonSearchbar,
  IonAvatar, IonIcon, IonButton, IonButtons, isPlatform
} from "@ionic/react";
import { playCircleOutline, starOutline } from "ionicons/icons";
import { BLE } from "@ionic-native/ble/ngx";
import "./Home.css";
import TweetList from "../components/TweetList";

export default class Home extends Component<{}, { searchText: string }> {
  constructor(props: any, private ble: BLE) {
    super(props)

    this.state = {
      searchText: ""
    }
  }

  setSearchText = (textToSearch: string) => {
    this.setState({
      searchText: textToSearch
    });
  };

  startBLEScan = () => {
    if (!isPlatform('desktop')) {
      this.ble.scan([], 5).subscribe(
        device => console.log(device),
        error => console.log(error)
      );
    }
    console.log('Button pressed!!!');
  };

  render() {
    return (
      <IonPage>
        <IonHeader mode="md">
          <IonToolbar>
            <IonButtons slot="start">
              <IonButton fill="clear" color="secondary" shape="round">
                <IonAvatar slot="start">
                  <img
                    src="https://eu.ui-avatars.com/api/?name=John+Doe&background=3880ff&color=fff"
                    alt="avatar"
                  />
                </IonAvatar>
              </IonButton>
            </IonButtons>
            <IonSearchbar
              mode="ios"
              value={this.state.searchText}
              onIonChange={e => this.setSearchText(e.detail.value!)}
              placeholder="Search Twitter"
              className="ion-text-center"
              inputMode="text"
              showCancelButton="never"
            />
            <IonButtons slot="end">
              <IonButton color="secondary" onClick={this.startBLEScan}>
                <IonIcon slot="icon-only" icon={playCircleOutline} />
              </IonButton>
              <IonButton color="secondary">
                <IonIcon slot="icon-only" icon={starOutline} />
              </IonButton>
            </IonButtons>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <TweetList />
        </IonContent>
      </IonPage>
    );
  }
}

The code builds fine, however on runtime I see this message on Logcat:

2020-05-14 15:10:06.221 23963-24547/myself.ionicsocialnetworkredesign E/Capacitor: JavaScript Error: {"type":"js.error","error":{"message":"Uncaught TypeError: r.ble.scan is not a function","url":"http://localhost/static/js/12.f4f2edd9.chunk.js","line":2,"col":394219,"errorObject":"{}"}} 2020-05-14 15:10:06.221 23963-23963/myself.ionicsocialnetworkredesign E/Capacitor/Console: File: capacitor-runtime.js - Line 359 - Msg: TypeError: r.ble.scan is not a function 2020-05-14 15:10:06.224 23963-23963/myself.ionicsocialnetworkredesign E/Capacitor/Console: File: http://localhost/static/js/12.f4f2edd9.chunk.js - Line 2 - Msg: Uncaught TypeError: r.ble.scan is not a function

Am I missing something or is Ionic React not supported? Thank you

[buildog]

Change import { BLE } from "@ionic-native/ble/ngx"; to import { BLE } from "@ionic-native/ble";

[Theofilos-Chamalis]

@buildog

Thank you for this. I was able to import it with import { BLE } from '@ionic-native/ble';

However, on the native side I always get: D/BluetoothAdapter: startLeScan(): null and no devices are getting discovered (Bluetooth and GPS are turned on).

The scan method was invoked in the following ways:

1. //@ts-ignore BLE.scan([], 100, (device: any) => alert(device), (error: any) => alert(error));

2. BLE.scan([], 100).toPromise().then((device: any) => alert(device));

3. BLE.scan([], 10).subscribe((device: any) => alert(device));

But none of them seems to work. Also, the types seem to be broken and not consistent with the documentation, since the types suggest to use option 3, while the documentation option 1 .

Any help on this to make something basic to work would be appreciated. Thanks.

[buildog]

You can try

  BLE.startScan([]).subscribe(
     device => discovered(device),
     error => console.log(error)
  );

[peitschie]

Closing this due to inactivity. If the issue still remains, feel free to reopen.