DEPRECATED

This project is no longer actively maintained.

See Getting Started with React Native

Under the Building Projects with Native Code tab.

See our blog post for how to get started with Chirp and React Native in your own projects.

Getting Started

To get started right with Chirp and React Native you can use our example project.

You will need to sign up to the Chirp Developer Hub, and copy your Chirp app key and secret into App.js.

  1. Clone the project

    git clone https://github.com/chirp/chirp-react-native

  2. Install node_modules

    cd chirp-react-native

    yarn install

  3. [iOS only] install dependencies

    cd ios

    pod install

  4. Enter your application key and secret into App.js.

    const key = 'YOUR_CHIRP_APPLICATION_KEY';

    const secret = 'YOUR_CHIRP_APPLICATION_SECRET';

    const config = 'YOUR_CHIRP_APPLICATION_CONFIG';

  5. Check that each project builds by opening in the .xcworkspace in Xcode, and the android folder in Android Studio. This can solve some common set up issues.

  6. Run the demo.

    react-native run-ios

    react-native run-android

Usage

Follow the instructions below to get started with Chirp in your own project.

You will need to sign up to the Chirp Developer Hub, and copy your Chirp app key and secret into App.js.

iOS

Open the xcode project in the /ios folder, and build first of all. See Troubleshooting section.

Then follow Install the SDK steps at Getting Started [iOS] to include the Chirp SDK into your project.

Copy RCTChirpSDK.m and RCTChirpSDK.h to your project.

Android

Open the /android folder in Android Studio, and check the project builds. See Troubleshooting section.

Then follow the Install the SDK steps at Getting Started [Android] to include the Chirp SDK into your project.

Copy RCTChirpSDKModule.java and RCTChirpSDKPackage.java to the project.

Import into your MainApplication.java

import com.chirpsdk.rctchirpsdk.RCTChirpSDKPackage;

Add the ChirpSDK to the createNativeModules function

@Override
  public List<NativeModule> createNativeModules(
        ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();

    modules.add(new RCTChirpSDKModule(reactContext));  // <---

    return modules;
}

Application

Now the setup is complete, you can add the Chirp SDK to your React Native application. You can use the react-native-permissions package to ensure that microphone permissions have been granted.

yarn add react-native-permissions

In App.js

import { NativeEventEmitter, NativeModules } from 'react-native';
import Permissions from 'react-native-permissions';

const ChirpSDK = NativeModules.ChirpSDK;
const ChirpSDKEmitter = new NativeEventEmitter(ChirpSDK);

export default class App extends Component<{}> {

  async componentDidMount() {
    const response = await Permissions.check('microphone')
    if (response !== 'authorized') {
      await Permissions.request('microphone')
    }

    this.onReceived = ChirpSDKEmitter.addListener(
      'onReceived',
      (event) => {
        if (event.data) {
          this.setState({ data: event.data });
        }
      }
    )
    this.onError = ChirpSDKEmitter.addListener(
      'onError', (event) => { console.warn(event.message) }
    )

    ChirpSDK.init(key, secret);
    ChirpSDK.setConfig(config);
    ChirpSDK.start();
    ChirpSDK.sendRandom();
  }

  componentWillUnmount() {
    this.onReceived.remove();
    this.onError.remove();
  }
}

Reference

// Initialise the SDK.
ChirpSDK.init(String key, String secret)

// Explicitly set the config string
ChirpSDK.setConfig(String config)

// Start the SDK
ChirpSDK.start()

// Stop the SDK
ChirpSDK.stop()

// Send an array of bytes to the speaker
ChirpSDK.send(Array data)

// Send a random array of bytes to the speaker
ChirpSDK.sendRandom()

// This event is called when the state of the SDK changes.
// The event contains the following body, where the state constants are accessible from the ChirpSDK interface.
// { "status": ChirpSDK.CHIRP_SDK_STATE_RUNNING }
ChirpSDKEmitter.addListener('onStateChanged', (event) => {})

// This event is called when the SDK begins sending data.
// The event contains the following body.
// { "data": [0, 1, 2, 3, 4] }
ChirpSDKEmitter.addListener('onSending', (event) => {})

// This event is called when the SDK has finished sending data.
// The event contains the following body.
// { "data": [0, 1, 2, 3, 4] }
ChirpSDKEmitter.addListener('onSent', (event) => {})

// This event is called when the SDK has started to receive data.
ChirpSDKEmitter.addListener('onReceiving', () => {})

// This event is called when the SDK has finished receiving data.
// The event contains the following body.
// { "data": [0, 1, 2, 3, 4] }
ChirpSDKEmitter.addListener('onReceived', (event) => {})

// This event is called if the SDK encounters an error.
// The event contains the following body.
// { "message": "An error has occurred" }
ChirpSDKEmitter.addListener('onError', (event) => {})

TroubleShooting

React Native with native support doesn't work so well out of the box, so here are some things that can go wrong.

iOS

Android