react-native-beacons-manager: data.beacons is returning as an empy array. I can't get Distance and Proximity.

Version

1.0.1

Platform

Android

OS version

android 7.0…

Steps to reproduce

1. Here is my component code /**

• @flow */ import React, { Component } from ‘react’; import { DeviceEventEmitter } from ‘react-native’ import { StyleSheet, Text, ListView, View, } from ‘react-native’; import Beacons from ‘react-native-beacons-manager’;

export default class BeaconsComp extends Component { // will be set as a reference to “beaconsDidRange” event: beaconsDidRangeEvent = null;

state = { // region information. Replace UUID and UUID2 with your own beacon region information. uuid: ‘6665542b-41a1-5e00-931c-6a82db9b78c3’, identifier: ‘Stage Right Exit’, uuid2: ‘6665542b-41a1-5e00-931c-6a82db9b78c2’, identifier2: ‘Stage Left Exit’, rangingDataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows([]), rangingDataSource2: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows([]) };

async componentWillMount(){ const { identifier, uuid, identifier2, uuid2 } = this.state; const FestivalExit1 = { identifier, uuid }; const FestivalExit2 = { identifier: identifier2, uuid: uuid2 };

// start iBeacon detection await Beacons.detectIBeacons();

// Range beacons inside the different regions await Beacons .startRangingBeaconsInRegion(FestivalExit1) // or like < v1.0.7: .startRangingBeaconsInRegion(identifier, uuid) .then(() => console.log(‘FestivalExit1 ranging started succesfully’)) .catch(error => console.log(FestivalExit1 ranging not started, error: ${error}));

await Beacons .startRangingBeaconsInRegion(FestivalExit2) // or like < v1.0.7: .startRangingBeaconsInRegion(identifier, uuid) .then(() => console.log(‘FestivalExit2 ranging started succesfully’)) .catch(error => console.log(FestivalExit2 ranging not started, error: ${error})); }

async componentDidMount() { // Print a log of the detected iBeacons (1 per second)

// Print a log of the detected iBeacons (1 per second) await DeviceEventEmitter.addListener(‘beaconsDidRange’, (data) => { console.log(‘Found beacons!’, data) }) const { identifier, identifier2 } = this.state; this.beaconsDidRangeEvent = Beacons.BeaconsEventEmitter.addListener( ‘beaconsDidRange’, (data) => { if (data.beacons[0] !== null || undefined) { Object.assign(data.beacons[0], {identifier: data.identifier}); }

   switch (data.identifier) {
     case identifier:
       console.log(identifier)
       this.setState({ rangingDataSource: this.state.rangingDataSource.cloneWithRows(data.beacons) });
       break;
     case identifier2:
      console.log(identifier2);
      this.setState({ rangingDataSource2: this.state.rangingDataSource2.cloneWithRows(data.beacons) });
      break;
     default:
      console.log('error: check your identifiers!')
       break;
   }
}

); }

render() { const { rangingDataSource } = this.state; const { rangingDataSource2 } = this.state;

return ( <View style={styles.container}> <Text style={styles.headline}> ranging beacons in the area: </Text> <ListView dataSource={ rangingDataSource } enableEmptySections={ true } renderRow={this.renderRangingRow} /> <ListView dataSource={ rangingDataSource2 } enableEmptySections={ true } renderRow={this.renderRangingRow} /> </View> ); }

renderRangingRow = (rowData) => { return ( <View style={styles.container}> <View style={styles.column}> <Text> Identifier:{rowData.identifier} </Text> <Text> UUID: {rowData.uuid ? rowData.uuid : ‘NA’} </Text> </View> <View style={styles.row}> <Text style={styles.smallText}> Major: {rowData.major ? rowData.major : ‘NA’} </Text> <Text style={styles.smallText}> Minor: {rowData.minor ? rowData.minor : ‘NA’} </Text> <Text style={styles.smallText}> RSSI: {rowData.rssi ? rowData.rssi : ‘NA’} </Text> </View> <View style={styles.column}> <Text> Proximity: {rowData.proximity ? rowData.proximity : ‘NA’} </Text> <Text> Distance: {rowData.distance ? rowData.distance.toFixed(2) : ‘NA’} </Text> </View> </View> ); } }

const styles = StyleSheet.create({ container: { marginTop: 10, paddingRight: 5, paddingLeft: 5, marginBottom: 5, }, headline: { fontSize: 20, marginHorizontal: 5, }, column: { flexDirection: ‘column’, paddingLeft: 8, paddingBottom: 5, }, row: { flexDirection: ‘row’, paddingLeft: 8, paddingBottom: 5, }, iconContainer: { flexDirection: ‘column’, marginRight: 10, }, infoContainer: { flex: 1, flexDirection: ‘column’, }, majorMinorContainer: { flexDirection: ‘row’, }, smallText: { marginRight: 15, }, actionsContainer: { marginVertical: 10, marginHorizontal: 5, flexDirection: ‘row’, alignItems: ‘center’, justifyContent: ‘space-between’, }, actionButton: { width: 160, backgroundColor: ‘#A6A6A6’, paddingHorizontal: 5, paddingVertical: 10, }, actionText: { alignSelf: ‘center’, fontSize: 11, color: ‘#000000’, }, }); 2. Here is my package.json file. “dependencies”: { “axios”: “^0.18.0”, “lodash”: “^4.17.11”, “native-base”: “^2.8.0”, “react”: “16.5.0”, “react-native”: “0.57.1”, “react-native-beacons-manager”: “git+https://github.com/MacKentoch/react-native-beacons-manager.git”, “react-native-vector-icons”: “^5.0.0”, “redux”: “^4.0.1”, “react-redux”: “^5.1.0”, “redux-logger”: “^3.0.6”, “redux-thunk”: “^2.3.0” }, “devDependencies”: { “babel-jest”: “23.6.0”, “jest”: “23.6.0”, “metro-react-native-babel-preset”: “0.45.6”, “react-test-renderer”: “16.5.0”, “remote-redux-devtools”: “^0.5.13” }, “jest”: { “preset”: “react-native” } } `

Expected behavior

beacons: Array(0) <--------------------- THIS SHOULD CONTAIN A OBJECT THAT HAS DISTANCE AND PROXIMITY RSSI MINOR AND MAJOR DATA IN IT.

{beacons: Array(0), uuid: “6665542b-41a1-5e00-931c-6a82db9b78c3”, identifier: “Stage Right Exit”} beacons: Array(0) <--------------------- length: 0 proto: Array(0) identifier: “Stage Right Exit” uuid: “6665542b-41a1-5e00-931c-6a82db9b78c3” proto: Object

Actual behavior

beacons: Array(0) <--------------------- THIS RETURNS WITH AN EMPTY ARRAY.

SCREENSHOT