Chirp enables your apps to send and receive information using sound.
The Chirp 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 using the Chirp 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 SDKs 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. 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 Xcode installed, react-
native-cli and Android Studio. See Building Projects with Native Code tab at
Getting Started.

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. Install iOS dependencies

cd ios
pod install

5. 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”.

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

7. Rebuild the Xcode project.

Android

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

9. To declare that your app requires audio permissions, add the following to
your ./android/app/src/main/AndroidManifest.xml , inside the bottom of the
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" />

10. 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 SDK so that it can be accessed in React Native.

11. Import module into your MainApplication.java

import com.chirpconnect.rctchirpconnect.RCTChirpConnectPackage;

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

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

13. Rebuild the project.

Application

14. Now the setup is complete, you can use Chirp 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,
  },
});

15. 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 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@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