Home

React Native iBeacon

react-native-beacons-manager

https://github.com/MacKentoch/react-native-beacons-manager

Any things we don’t understand about their docs?

  • Documentation seems okay

Any technical concerns?

  • Either library being outdated

Why should we use this technology?

  • Based off the ports of the original beacon packages
  • Easy to test with what we have
  • Easier to setup push notification logic

Why shouldn’t we use this technology?

  • Small, open-source project

Are there alternatives?

  • See above

Install

react-native init yarn add react-native-beacons-manager yarn add react-native-bluetooth-state react-native link # potential error on RCBridge requires you to comment it out

Setup

import React, { Component } from 'react'; import { AppRegistry, StyleSheet, View, Text, ListView, DeviceEventEmitter } from 'react-native'; import Beacons from 'react-native-beacons-manager'; import BluetoothState from 'react-native-bluetooth-state'; export default class ibeacon extends Component { constructor(props) { super(props); // Create our dataSource which will be displayed in the ListView var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); this.state = { bluetoothState: '', // region information identifier: 'Test', uuid: '5A4BCFCE-174E-4BAC-A814-092E77F6B7E5', // React Native ListView datasource initialization dataSource: ds.cloneWithRows([]) }; } componentWillMount() { // // ONLY non component state aware here in componentWillMount // // Request for authorization while the app is open Beacons.requestWhenInUseAuthorization(); // Define a region which can be identifier + uuid, // identifier + uuid + major or identifier + uuid + major + minor // (minor and major properties are numbers) const region = { identifier: this.state.identifier, uuid: this.state.uuid }; // Range for beacons inside the region Beacons.startRangingBeaconsInRegion(region); // Beacons.startUpdatingLocation(); } componentDidMount() { // // component state aware here - attach events // // Ranging: Listen for beacon changes this.beaconsDidRange = DeviceEventEmitter.addListener( 'beaconsDidRange', (data) => { this.setState({ dataSource: this.state.dataSource.cloneWithRows( data.beacons ) }); } ); // listen bluetooth state change event BluetoothState.subscribe((bluetoothState) => { this.setState({ bluetoothState: bluetoothState }); }); BluetoothState.initialize(); } componentWillUnMount() { this.beaconsDidRange = null; } render() { const { bluetoothState, dataSource } = this.state; return ( <View style={styles.container}> <Text style={styles.btleConnectionStatus}> Bluetooth connection status:{' '} {bluetoothState ? bluetoothState : 'NA'} </Text> <Text style={styles.headline}>All beacons in the area</Text> <ListView dataSource={dataSource} enableEmptySections={true} renderRow={this.renderRow} /> </View> ); } renderRow = (rowData) => { return ( <View style={styles.row}> <Text style={styles.smallText}> UUID: {rowData.uuid ? rowData.uuid : 'NA'} </Text> <Text style={styles.smallText}> Major: {rowData.major ? rowData.major : 'NA'} </Text> <Text style={styles.smallText}> Minor: {rowData.minor ? rowData.minor : 'NA'} </Text> <Text>RSSI: {rowData.rssi ? rowData.rssi : 'NA'}</Text> <Text> Proximity: {rowData.proximity ? rowData.proximity : 'NA'} </Text> <Text> Distance:{' '} {rowData.accuracy ? rowData.accuracy.toFixed(2) : 'NA'}m </Text> </View> ); }; } const styles = StyleSheet.create({ container: { flex: 1, paddingTop: 60, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF' }, btleConnectionStatus: { fontSize: 20, paddingTop: 20 }, headline: { fontSize: 20, paddingTop: 20 }, row: { padding: 8, paddingBottom: 16 }, smallText: { fontSize: 11 } }); AppRegistry.registerComponent('ibeacon', () => ibeacon);

Repository

https://github.com/okeeffed/developer-notes-nextjs/content/react-native/react-native-ibeacon

Sections


Related