Chirp + React Native

Please note: this tutorial is now outdated, for the latest updates visit https://blog.chirp.io/chirp-react-native/

Chirp Connect enables your apps to send and receive information using sound. The Connect SDK encodes an array of bytes as an audio signal, which can be transmitted by any device with a speaker and received by any device with a microphone and Chirp Connect SDK.

React Native lets you build mobile apps using only JavaScript. It allows you to use the familiar design patterns of React and still have access to the full power of both iOS and Android platforms.

With React Native, the same high performance Chirp Connect SDK’s for iOS and Android can be used and accessed with a simple JavaScript interface. The user interface can then be designed using CSS in a similar style to React web applications.

The purpose of this guide is to get a React Native project set up with a simple application demonstrating the use of Chirp Connect. If you would rather jump straight into developing then you can use the Starter Project, see details in the README, otherwise let’s get started.

Getting Started

First of all you will need an Apple computer with Xcode installed, react-native-cli and Android Studio. See Building Projects with Native Code tab at Getting Started [React Native].

Setup

1. Install React Native CLI

npm install -g react-native-cli

2. Create project with Native support

react-native init <project_name>

iOS

3. Create JS bundle.

react-native bundle --entry-file ./index.js --platform ios --bundle-output ios/main.jsbundle

4. Open Xcode project at ./ios/<project_name>.xcodeproj and check that it builds.

5. Include the ChirpConnect.framework by signing up at the Chirp Developer Hub, and downloading the iOS SDK at Chirp Downloads.

Import the SDK into your project by dragging and dropping the .framework file into the Xcode project’s sidebar. Set ‘Copy items if needed’ if the framework is not already within your project folder.

6. Ensure that ChirpConnect.framework has been added to linked frameworks.

Go to the Project Settings, under the General tab, add the ChirpConnect.framework to the Link Frameworks and Libraries.

7. Add the microphone privacy statement. This text is displayed when your app first launches and asks the user for microphone permission, and should describe why you are requesting access to the microphone.

Under the Info tab in the Project Settings, add a Custom iOS Target Property called “Privacy — Microphone Usage Description”.

8. Copy RCTChirpConnect.m and RCTChirpConnect.h from this repository to your project. This will create a wrapper around the Chirp Connect SDK so that it can be accessed in React Native.

9. Rebuild the Xcode project.

Android

10. Open the /android folder in Android Studio, and check the project builds.

You may need to update the compileSdkVersion and buildToolsVersion at ./android/app/build.gradle to your installed versions.

11. Include the Chirp Connect Android SDK by signing up at the Chirp Developer Hub, and downloading the Android SDK at Chirp Downloads.

Unzip the Android SDK and copy the .aar file to ./android/apps/libs. Create the directory if does not exist.

12. Add the following to the ‘dependencies’ block in ./android/app/build.gradle. Check the name of the aar file matches the file in apps/libs. Ensure the .aar reference has the same version number as that of the .aar file.

compile 'io.chirp.connect:chirp-connect-release@aar'
compile 'com.squareup.okhttp3:okhttp:3.9.0'

13. To instruct Gradle where to find the local .aar file, add a flatDir section to the repositories block. You’ll need to add a repositories block if one does not already exist.

repositories {
    flatDir {
        dirs 'libs'
    }
}

14. To declare that your app requires audio permissions, add the following to your ./android/app/src/main/AndroidManifest.xml, inside the bottom of the <manifest> element.

<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

15. Copy RCTChirpConnectModule.java and RCTChirpConnectPackage.java from this repository to your project at ./android/app/src/main/java/com/<project_name>. This will create a wrapper around the Chirp Connect SDK so that it can be accessed in React Native.

16. Import module into your MainApplication.java

import com.chirpconnect.rctchirpconnect.RCTChirpConnectPackage;

17. Add the RCTChirpConnectPackage to the getPackages function in MainApplication.java.

@Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new RCTChirpConnectPackage()  // <----
    );
  }

18. Rebuild the project.

Application

19. Now the setup is complete, you can use ChirpConnect in your React Native application.

Edit App.js with the following. (Get your application key and secret from the Chirp Developer Hub)

See full example.

import React, { Component } from 'react';
import { Button, Platform, StyleSheet, Text, View } from 'react-native';
import { NativeEventEmitter, NativeModules } from 'react-native';
const ChirpConnect = NativeModules.ChirpConnect;
const ChirpConnectEmitter = new NativeEventEmitter(ChirpConnect);
const key = 'YOUR_CHIRP_APPLICATION_KEY';
const secret = 'YOUR_CHIRP_APPLICATION_SECRET';
export default class App extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = {
      'data': '----------'
    }
  }
  componentDidMount() {
    this.onReceived = ChirpConnectEmitter.addListener(
      'onReceived',
      (event) => {
        if (event.data) {
          this.setState({ data: event.data });
        }
      }
    )
    this.onError = ChirpConnectEmitter.addListener(
      'onError', (event) => { console.warn(event.message) }
    )
    ChirpConnect.init(key, secret);
    await ChirpConnect.setConfigFromNetwork();
    ChirpConnect.start();
  }
  componentWillUnmount() {
    this.onReceived.remove();
    this.onError.remove();
  }
  onPress() {
    ChirpConnect.send([0,1,2,3,4]);
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to Chirp Connect!
        </Text>
        <Text style={styles.instructions}>
          {this.state.data}
        </Text>
      <Button onPress={this.onPress} title='SEND' />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 60,
  },
  instructions: {
    padding: 10,
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

20. Finally run the application in iOS Simulator and Android Emulator with

react-native run-ios
react-native run-android

Conclusion

You should now have an application running on both platforms that can send and receive Data-Over-Sound. For further documentation on using Chirp Connect with React Native and other Chirp SDK’s, see Chirp Developers.

This is an open source project so if you find any issues when using the wrapper or the starter project, then feel free to submit a Pull Request.

Have fun developing with Chirp!

Joe Todd

joe@chirp.io

Chirp is a technology company enabling a seamless transfer of digital information via soundwaves, using a device’s loudspeaker and microphone only. The transmission uses audible or inaudible ultrasound tones and takes place with no network connection. To learn more visit chirp.io