react-native-flic v1.0.0

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 Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-flic and add RNFlic.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNFlic.a to your project's Build Phases ➜ Link 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

2. 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')

3. 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.

Flic Methods in React-Native

There are some methods available in RN, you can easily add your own.

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;