How to play with iBeacons in a React Native application
iBeacons are little Bluetooth Low Energy (BTLE) devices that enables new kind of interactions between a mobile application (iOS or Android) and a local area (place, a room…). To some extend you can consider it can do the job of a GPS but in a smaller area (where GPS can’t be accurate).
Most common use-case is a shop where iBeacons (placed in strategic locations) can inform, guide or give spontanous special offers to customers through a mobile notification while he is moving nearer such or such iBeacon (= area in the shop).
Before starting
As prerequisite, ensure yourself you already have :
- “NodeJS” > 6.x
- “React Native environment” (better you follow amazing nice and helpful official React Native website if you don’t already know React Native)
- xcode (up to date — release versions — as much as possible. Minimum required verison is related to the requirement to support at least iOS 8.0)
- iOS device must have iOS version 8.0+
- Android device must have android version 5.0+
IMPORTANT:
In iOS or Android you won’t be able to use Bluetooth in simulator or emulator. You will need real devices (iOS 8.0+ and android 5.0+).
To test iBeacon communication you will need… at least one beacon.
In case you don’t have and can’t wait to have a real beacon:
I will be honest with you, I didn’t have (I still don’t have) any real beacon (if you want to buy some, you may find some for few dollars or euros. I’m not affiliate so ask our friend google search and you will easily find).
That being said, I have a “nice alternative not to wait for a real beacon”: use an iOS device as a beacon (friendly advice to get an alternate iOS device: negociate with your wife).
I found an open source project in github to turn an iOS device into a beacon. Install gemtot open source (iOS swift) project in your “alternate iOS 8.0+ device” so that you will be able to test your React Native application:
NOTE: If you just have android devices you can use this free application beacon simulator to simulate any kind of beacons.
Create a new React Native project
We will create a project named “RNbeaconArticle”.
If you feel yourself enough comfortable with React Native you can change this name but you will have to take care to adapt code later if you want to copy-paste examples.
From now when you see “$” it will mean “in terminal”.
$ react-native init RNbeaconArticle
It will initialize your “RNbeaconArticle” project.
When done (should take few minutes depending already cached dependencies), enter in “RNbeaconArticle” directory:
$ cd RNbeaconArticle
Install Beacon needed dependencies
$ npm install — save react-native-beacons-manager
Or — absolutely equivalent — with yarn:
$ yarn add react-native-beacons-manager
Register projects dependencies (both iOS and Android)
$ react-native link
From now I will focus on iOS version. Android is nearly the same except you won’t even need some kind “background enable mode” equivalent configuration.
Note: rnpm command (previsously used with older version of react native) is integrated into react-native core.
Check iOS project authorisation
Open xcode:
$ open iOS/RNbeaconArticle.xcodeproj
As React Native init command already add the minimum authorisation required: Location When In Use (for beacon ranging), you should not have to do more than personalising the corresponding value (it is not even mandatory).
This value will be the message displayed in the alert the first time application launches. It will ask for authorisation to location (because we will have to request for this authorisation in the code).
It is good practise to personalise this kind of messages.
It will reinsure user that the application justifies the need for this autorisation.
Run once on your iPhone to ensure all is ok
You should be able to see:
Yes… it is nothing more than React Native “Hello Word”. We did not code at all until now, let’s go on.
Beacon specific code
Principle is simple:
- you request authorization for Beacons
- start ranging beacons (specifying its own uuid or a region uuid = multiple beacons).
Then, your application will have to
- listen to event “beaconsDidRange” and update state in a convenient way:
As you can see, code is so simple and readbable.
Full index.ios.js code
Assuming you have a beacon at your disposal (real one or by using an alternate iOS device), you can now copy and paste the code below (from my gist) to replace your default “index.ios.js” file content (remember the React Native “Hello World” we saw previsoulsy).
Note:
- I added “react-native-bluetooth-state” to be able to show when Bluetooth is “on” or “off”.
- don’t forget to activate Bluetooth and localization (you will be asked to activate them by iOS when launching app).
As a result when you launch application you can see something like:
Conclusion
As you could see dealing with iBeacons is simple task thanks to “react-native-beacons-manager” (successor of both: “react-native-beacon” —for iOS — and “react-native-beacons-android” — for Android—).
For those who would like to run this code on Android I created a full open source project for both iOS (with all iOS configuration step already done for you) and Android.
So just:
$ git clone https://github.com/MacKentoch/reactNativeBeaconExample.git
$ npm i
$ react-native link
And you can test android or iOS on devices.
Thank you for taking time reading this article. I hope I succeeded in convicing how easy and affordable it is to play with iBeacon with React Native.
Have great time and create amazing apps!
Special credits (thank you) to:
