react-native-flic
React-Native wrapper for the PBF Flic buttons.
The wrapper basically proxies every event received from the Flic SDK to React-Native.
Getting started
$ npm install react-native-flic --save
Mostly automatic installation
$ react-native link react-native-flic
Manual installation
iOS
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-flic
and addRNFlic.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNFlic.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)<
Android
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import com.opencii.rn.flic.RNFlicPackage;
to the imports at the top of the file - Add
new RNFlicPackage()
to the list returned by thegetPackages()
method
- Append the following lines to
android/settings.gradle
:include ':react-native-flic' project(':react-native-flic').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-flic/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:compile project(':react-native-flic')
Setup Flic Manager
Important Assuming you have the PBF Flic SDK library, you will have to add it manually in iOS (Xcode). For Android, place the library in react-native-flic/android/libs
.
You will need to configure the Flic Manager to use your App ID and App Secret.
Android
APP_ID
inreact-native-flic/android/src/main/java/com/opencii/rn/flic/RNFlicModule.java
APP_SECRET
inreact-native-flic/android/src/main/java/com/opencii/rn/flic/RNFlicModule.java
iOS
appID
inreact-native-flic/ios/RNFlic.m
appSecret
inreact-native-flic/ios/RNFlic.m
Flic Events in React-Native
I tried to keep the events the same for Android and iOS, but the events received from Flic SDK are not the same on both platforms.
Event name | Description | Properties | Platform |
---|---|---|---|
GET_KNOWN_BUTTONS |
Sent by getKnownButtons method | - | iOS, Android |
SEARCH_BUTTON_START |
Sent by searchButtons method | - | iOS, Android |
SEARCH_BUTTON_TIMEOUT |
Sent by searchButtons method | - | iOS, Android |
BUTTON_READY |
Button discoverd and connected | rssi , buttonId |
iOS, Android |
MANAGER_RESTORED |
Flic Manager instance restored | - | iOS |
BLUETOOTH_SWITCHED_STATE |
Bluetooth state changed | state |
iOS |
BUTTON_PRESSED |
Flic Button pressed | - | iOS, Android |
BUTTON_RELEASED |
Flic Button released | - | Android |
BUTTON_CONNECTED |
Flic Button connected | buttonId |
iOS, Android |
BUTTON_DISCONNECTED |
Flic Button disconnected | buttonId , error |
iOS, Android |
BUTTON_CONNECTING_FAILED |
Flic Button failed to connect | buttonId |
Android |
FOUND_PRIVATE_BUTTON |
Private Flic Button found | buttonId |
Android |
FOUND_PUBLIC_BUTTON |
Public Flic Button found | buttonId |
Android |
CONNECTION_ESTABLISHED |
Flic Button connected | buttonId |
Android |
BUTTON_ADDED_SUCCESS |
Flic Button added | buttonId |
Android |
BUTTON_ADDED_FAILED |
Flic Button add failed | - | Android |
Flic Methods in React-Native
There are some methods available in RN, you can easily add your own.
Method name | Description | Arguments | Platform |
---|---|---|---|
Flic.getKnownButtons |
Get known buttons and connect them, returns event GET_KNOWN_BUTTONS |
iOS, Android | |
Flic.makeCall(number) |
Make a phone call from RN | number |
Android |
Flic.searchButtons |
Search for new buttons, returns event FOUND_PRIVATE_BUTTON or FOUND_PUBLIC_BUTTON and connects the button |
- | iOS, Android |
Usage
This example uses Native-Base for UI components.
;;;; { superprops; thiseventListener = false; } state = status: '' pressCount: 0 buttonConnected: false { if !thiseventListener const FlicEvents = Flic; FlicEvents; // Pair known buttons Flic; } { const pressCount = thisstate; console; if responseevent this; } { const buttonConnected status pressCount = thisstate; return <View style= flex: 1 > <Button block key="search-flic-buttons" style= marginBottom: 10 onPress= Flic > <Text>Search for Flic buttons</Text> </Button> <Button block key="get-flic-buttons" style= marginBottom: 10 onPress= Flic > <Text>Pair Flic buttons</Text> </Button> buttonConnected && <Badge success style= marginBottom: 10 alignSelf: 'center' > <Text>Flic button Connected</Text> </Badge> <Text style= marginTop: 10 marginBottom: 10 >Flic event: status</Text> pressCount > 0 && <Text style= fontSize: 24 >pressCount pressed</Text> </View> ; } ;