-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.android.js
120 lines (109 loc) · 3.34 KB
/
index.android.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
ListView,
View,
NativeModules,
DeviceEventEmitter,
TouchableHighlight
} from 'react-native';
var Beacons = NativeModules.RNBeacon;
// Define a region which can be identifier + uuid,
// identifier + uuid + major or identifier + uuid + major + minor
// (minor and major properties are numbers)
var region = {
identifier: 'Estimotes',
uuid: 'B9407F30-F5F8-466E-AFF9-25556B57FE6D'
};
// Create our dataSource which will be displayed in the data list
var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
// The BeaconList component listens for changes and re-renders the
// rows (BeaconView components) in that case
var androidbeacon = React.createClass({
getInitialState() {
return {
dataSource: ds.cloneWithRows([]),
};
},
componentWillMount() {
// Listen for beacon changes
var subscription = DeviceEventEmitter.addListener(
'beaconsDidRange',
(data) => {
// Set the dataSource state with the whole beacon data
// We will be rendering all of it throug <BeaconView />
this.setState({
dataSource: ds.cloneWithRows(JSON.parse(data.beacons)),
});
}
);
//start monitoring for beacons in region
Beacons.startMonitoringForRegion(region);
},
renderRow(rowData) {
return (
<View style={styles.row}>
<Text style={styles.smallText}>UUID: {rowData.proximityUUID}</Text>
<Text style={styles.smallText}>Major: {rowData.major}</Text>
<Text style={styles.smallText}>Minor: {rowData.minor}</Text>
<Text style={styles.smallText}>RSSI: {rowData.rssi}</Text>
</View>
)
},
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headline}>All beacons in the area</Text>
</View>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow}
/>
<View style={styles.footer}>
<TouchableHighlight onPress={this.start.bind(null, this) }>
<Text>Search Beacons</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this.stop.bind(null, this) }>
<Text>Stop </Text>
</TouchableHighlight>
</View>
</View>
);
},
start() {
Beacons.startBeaconSearch(region);
},
stop() {
Beacons.stopMonitoringForRegion(region);
Beacons.stopRangingForRegion(region);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
header: {
paddingTop: 50
},
headline: {
fontSize: 20
},
row: {
padding: 8,
paddingBottom: 16
},
smallText: {
fontSize: 11
},
footer: {
paddingBottom: 50
}
});
AppRegistry.registerComponent('androidbeacon', () => androidbeacon);