I'm using react-native-ble-manager for scan and show all devices. It's working fine, but it's not showing the name of devices (just the MAC id). Here's my code:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
NativeAppEventEmitter,
NativeEventEmitter,
NativeModules,
Platform,
PermissionsAndroid,
ScrollView,
AppState,
FlatList,
Dimensions,
} from 'react-native';
import BleManager from 'react-native-ble-manager';
import { stringToBytes } from 'convert-string';
const window = Dimensions.get('window');
const BleManagerModule = NativeModules.BleManager;
const bleManagerEmitter = new NativeEventEmitter(BleManagerModule);
export default class App extends Component {
constructor() {
super();
this.state = {
scanning:false,
peripherals: new Map(),
appState: ''
};
this.handleDiscoverPeripheral = this.handleDiscoverPeripheral.bind(this);
this.handleStopScan = this.handleStopScan.bind(this);
this.handleUpdateValueForCharacteristic = this.handleUpdateValueForCharacteristic.bind(this);
this.handleDisconnectedPeripheral = this.handleDisconnectedPeripheral.bind(this);
this.handleAppStateChange = this.handleAppStateChange.bind(this);
}
componentDidMount() {
AppState.addEventListener('change', this.handleAppStateChange);
BleManager.start({showAlert: false});
this.handlerDiscover = bleManagerEmitter.addListener('BleManagerDiscoverPeripheral', this.handleDiscoverPeripheral );
this.handlerStop = bleManagerEmitter.addListener('BleManagerStopScan', this.handleStopScan );
this.handlerDisconnect = bleManagerEmitter.addListener('BleManagerDisconnectPeripheral', this.handleDisconnectedPeripheral );
this.handlerUpdate = bleManagerEmitter.addListener('BleManagerDidUpdateValueForCharacteristic', this.handleUpdateValueForCharacteristic );
if (Platform.OS === 'android'&& Platform.Version >= 23) {
PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION).then((result) => {
if (result) {
console.log("Permission is OK");
} else {
PermissionsAndroid.requestPermission(PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION).then((result) => {
if (result) {
console.log("User accept");
} else {
console.log("User refuse");
}
});
}
});
}
}
handleAppStateChange(nextAppState) {
if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
console.log('App has come to the foreground!');
BleManager.getConnectedPeripherals([]).then((peripheralsArray) => {
console.log('Connected peripherals: ' + peripheralsArray.length);
});
}
this.setState({appState: nextAppState});
}
componentWillUnmount() {
this.handlerDiscover.remove();
this.handlerStop.remove();
this.handlerDisconnect.remove();
this.handlerUpdate.remove();
}
handleDisconnectedPeripheral(data) {
let peripherals = this.state.peripherals;
let peripheral = peripherals.get(data.peripheral);
if (peripheral) {
peripheral.connected = false;
peripherals.set(peripheral.id, peripheral);
this.setState({peripherals});
}
console.log('Disconnected from ' + data.peripheral);
}
handleUpdateValueForCharacteristic(data) {
console.log('Received data from ' + data.peripheral + ' characteristic ' + data.characteristic, data.value);
}
handleStopScan() {
console.log('Scan is stopped');
this.setState({ scanning: false });
}
startScan() {
if (!this.state.scanning) {
//this.setState({peripherals: new Map()});
BleManager.scan([], 3, true).then((results) => {
console.log(JSON.stringify(results));
console.log('Scanning...');
this.setState({scanning:true});
});
}
}
retrieveConnected(){
BleManager.getConnectedPeripherals([]).then((results) => {
if (results.length === 0) {
console.log('No connected peripherals')
}
console.log(results);
var peripherals = this.state.peripherals;
for (var i = 0; i < results.length; i++) {
var peripheral = results[i];
peripheral.connected = true;
peripherals.set(peripheral.id, peripheral);
this.setState({ peripherals });
}
});
}
handleDiscoverPeripheral(peripheral){
var peripherals = this.state.peripherals;
console.log('Got ble peripheral', JSON.stringify(peripheral));
console.log('NAME: ' + peripheral.name);
if (peripheral.name === null) {
peripheral.name = 'NO NAME';
}
peripherals.set(peripheral.id, peripheral);
this.setState({ peripherals });
}
renderItem(item) {
const color = item.connected ? 'green' : '#fff';
return (
<TouchableHighlight onPress={() => this.sendData(item.id, 'ola') }>
<View style={[styles.row, {backgroundColor: color}]}>
<Text style={{fontSize: 12, textAlign: 'center', color: '#333333', padding: 10}}>{item.name}</Text>
<Text style={{fontSize: 10, textAlign: 'center', color: '#333333', padding: 2}}>RSSI: {item.rssi}</Text>
<Text style={{fontSize: 8, textAlign: 'center', color: '#333333', padding: 2, paddingBottom: 20}}>{item.id}</Text>
</View>
</TouchableHighlight>
);
}
render() {
const list = Array.from(this.state.peripherals.values());
return (
<View style={styles.container}>
<TouchableHighlight style={{marginTop: 40,margin: 20, padding:20, backgroundColor:'#ccc'}} onPress={() => this.startScan() }>
<Text>Scan Bluetooth ({this.state.scanning ? 'on' : 'off'})</Text>
</TouchableHighlight>
<TouchableHighlight style={{marginTop: 0,margin: 20, padding:20, backgroundColor:'#ccc'}} onPress={() => this.retrieveConnected() }>
<Text>Retrieve connected peripherals</Text>
</TouchableHighlight>
<ScrollView style={styles.scroll}>
{(list.length === 0) &&
<View style={{flex:1, margin: 20}}>
<Text style={{textAlign: 'center'}}>No peripherals</Text>
</View>
}
<FlatList
data={list}
renderItem={({ item }) => this.renderItem(item) }
keyExtractor={item => item.id}
/>
</ScrollView>
</View>
);
}
}
