React Native (iOS and Android) library for Kontakt.io beacons (and all other beacons)
Cross-platform React Native module for detecting beacons with Android and iOS devices.
Kontakt.io SDK Versions of newest release:
OS | SDK Version |
---|---|
Android | 7.0.6 |
iOS | 3.0.25 |
A minimal example (created with React Native v0.69.5 and TypeScript) with the default configuration and no specifically set regions. Thus, the default region everywhere
(i.e. all beacons) is automatically used.
iOS
and Android
to install react-native-kontaktio
for both platforms.npx react-native init BeaconTest --template react-native-template-typescript
) and replace App.tsx
with the example code below.iOS
or Android
- not a simulator)import React, { useEffect } from 'react';
import {
Alert,
DeviceEventEmitter,
NativeEventEmitter,
PermissionsAndroid,
Platform,
SafeAreaView,
StatusBar,
StyleSheet,
Text,
View,
} from 'react-native';
import Kontakt, { KontaktModule } from 'react-native-kontaktio';
const {
connect,
init,
startDiscovery,
startRangingBeaconsInRegion,
startScanning,
} = Kontakt;
const kontaktEmitter = new NativeEventEmitter(KontaktModule);
const isAndroid = Platform.OS === 'android';
/**
* Android Marshmallow (6.0) and above need to ask the user to grant certain permissions.
* This function does just that.
*/
const requestLocationPermission = async () => {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
{
title: 'Location Permission',
message:
'This example app needs to access your location in order to use bluetooth beacons.',
buttonNeutral: 'Ask Me Later',
buttonNegative: 'Cancel',
buttonPositive: 'OK',
}
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
return true;
} else {
// permission denied
return false;
}
} catch (err) {
console.warn(err);
return false;
}
};
const beaconSetup = async () => {
if (isAndroid) {
// Android
const granted = await requestLocationPermission();
if (granted) {
await connect();
await startScanning();
} else {
Alert.alert(
'Permission error',
'Location permission not granted. Cannot scan for beacons',
[{ text: 'OK', onPress: () => console.log('OK Pressed') }],
{ cancelable: false }
);
}
} else {
// iOS
await init();
/**
* Will discover Kontakt.io beacons only
*/
await startDiscovery();
/**
* Works with any beacon(also virtual beacon, e.g. https://github.com/timd/MactsAsBeacon)
* Requires user to allow GPS Location (at least while in use)
*
* change to match your beacon values
*/
await startRangingBeaconsInRegion({
identifier: '',
uuid: 'A4826DE4-1EA9-4E47-8321-CB7A61E4667E',
major: 1,
minor: 34,
});
}
// Add beacon listener
if (isAndroid) {
/* works with any beacon */
DeviceEventEmitter.addListener(
'beaconsDidUpdate',
({ beacons, region }) => {
console.log('beaconsDidUpdate', { beacons, region });
},
);
} else {
/* works with Kontakt.io beacons only */
kontaktEmitter.addListener('didDiscoverDevices', ({ beacons }) => {
console.log('didDiscoverDevices', { beacons });
});
/* works with any beacon */
kontaktEmitter.addListener('didRangeBeacons', ({ beacons, region }) => {
console.log('didRangeBeacons', { beacons, region });
});
}
};
const App: React.FC = () => {
useEffect(() => {
Promise.resolve().then(beaconSetup);
return () => {
// remove event listeners
if (isAndroid) {
kontaktEmitter.removeAllListeners('beaconsDidUpdate');
} else {
kontaktEmitter.removeAllListeners('didDiscoverDevices');
kontaktEmitter.removeAllListeners('didRangeBeacons');
}
};
}, []);
return (
<SafeAreaView>
<StatusBar barStyle="dark-content" />
<View style={styles.wrapper}>
<Text style={styles.title}>react-native-kontaktio Example</Text>
<Text>Check console.log statements</Text>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
wrapper: {
height: '100%',
justifyContent: 'center',
alignItems: 'center',
},
title: {
paddingVertical: 10,
fontSize: 30,
},
});
export default App;
Note (March 2020): The example in the Example/
folder is a bit outdated. If you want to try to run the example app anyway, here are some instructions to do so:
Clone this repository, connect an Android and/or Apple device to your computer and have some (Kontakt.io) beacons nearby.
Open a terminal window, bash to the Example/
folder, run npm install
and start the react-native server
$ cd react-native-kontaktio/Example
$ npm install
$ npm start
Build the example and run it on your device. The app will appear under the name KontaktIoSimpleTest
:
Android:
$ react-native run-android
iOS
$ react-native run-ios
<uses-permission android:name="android.permission.BLUETOOTH_SCAN" tools:remove="android:usesPermissionFlags" />
With the neverForLocation android:usesPermissionFlags, some BLE beacons are filtered from the scan results. |More information about this on issue #121.Update Android Eddystone feature:
setEddystoneNamespaces
Fork and clone this repository
Run yarn
to install the dependencies
Make code changes
Delete lib
folder if it exists and run yarn tsc
to compile the TypeScript files in the the lib
folder.
In the package.json
file of an example app point to the this directory, e.g.
"dependencies": {
...
"react-native-kontaktio": "../react-native-kontaktio"
},
Build and run on a real device
In build.gradle
file change the version in the following line
implementation "io.kontakt.mvn:sdk:7.0.6"
ios/KontaktSDK.framework
folder of this library with the Cocoapods/KontaktSDK/iOS/KontaktSDK.xcframework/ios-arm64_armv7/KontaktSDK.framework
folder which you find in the unzipped folder structure.