react-native-flic

1.0.0 • Public • Published

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

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-flic and add RNFlic.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNFlic.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)<

Android

  1. 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 the getPackages() method
  1. 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')
    
  2. 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 in react-native-flic/android/src/main/java/com/opencii/rn/flic/RNFlicModule.java
  • APP_SECRET in react-native-flic/android/src/main/java/com/opencii/rn/flic/RNFlicModule.java

iOS

  • appID in react-native-flic/ios/RNFlic.m
  • appSecret in react-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.

import React, { Component } from 'react';
import { View, NativeEventEmitter } from 'react-native';
import { Button, Text, Badge } from 'native-base';
import Flic from 'react-native-flic';
 
class FlicExample extends Component {
  constructor(props) {
    super(props);
    this.eventListener = false;
  }
 
  state = {
    status: '',
    pressCount: 0,
    buttonConnected: false,
  }
 
  componentDidMount() {
    if (!this.eventListener) {
      const FlicEvents = new NativeEventEmitter(Flic);
      FlicEvents.addListener('FLIC', event => this.receivedEvent(event));
    }
 
    // Pair known buttons
    Flic.getKnownButtons('FLIC');
  }
 
  receivedEvent(response) {
    const { pressCount } = this.state;
 
    console.log('Response received:', response);
 
    if (response.event) {
      this.setState({ status: response.event });
 
      switch (response.event) {
        case 'BUTTON_PRESSED':
          // Do whatever you want.
          this.setState({ pressCount: pressCount + 1 });
          break;
        case 'BUTTON_CONNECTED':
          this.setState({ buttonConnected: true });
          break;
 
        default:
      }
    }
  }
 
  render() {  
    const { buttonConnected, status, pressCount } = this.state;
 
    return (
      <View style={{ flex: 1 }}>
        <Button
          block
          key="search-flic-buttons"
          style={{ marginBottom: 10 }}
          onPress={() => Flic.searchButtons('FLIC')}
        >
          <Text>Search for Flic buttons</Text>
        </Button>
 
        <Button
          block
          key="get-flic-buttons"
          style={{ marginBottom: 10 }}
          onPress={() => Flic.getKnownButtons('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} time(s) pressed</Text>
        }
      </View>
    );
  }
}
 
export default FlicExample;

Package Sidebar

Install

npm i react-native-flic

Weekly Downloads

68

Version

1.0.0

License

MIT

Unpacked Size

25.2 MB

Total Files

1167

Last publish

Collaborators

  • mda