React Native Tone Framework

Introduction:

Tonelisten is an React Native framework that can be used to integrate with React Native based Android and iOS applications. It was primarily written in Javascript, Kotlin for Android and Javascript and swift for iOS. The main concept behind Tonelisten is to display information to the user when it detects specific frequencies of tones being played around the user's device microphone.

Pre-requisites:

• Client key: Obtain the client key from Tone Framework official Site.
• Tonelisten Framework: The Tonelisten Framework’s npm package can be obtained from npm package site.
• Android: Android API level 22 or above required.
• iOS: iOS version 12 or above required.

The following shows how to integrate the SDK using NPM:

• To begin, open the terminal with your project directory.
• Execute:

 npm install react-native-tone-framework

• This will add Tonelisten react native framework to your project.

For iOS:

Install Pod:

• On the project source path, open the terminal.
• Use the below command,

  pod deintegrate

the above comment will remove the existing pod references from the project.

• Use the below command,

  pod install

this will install the dependencies.

Permission:

• You need to add “Background modes” capabilities to your project to allow using microphone and location service in the background.

• Ensure you have the following entries in your ‘Info.plist’ file,

• ‘NSMicrophoneUsageDescription’: A string describing the usage of requesting access to the microphone.

• ‘NSLocationWhenInUseUsageDescription’: A string describing the usage of requesting location access.

• Add the above permissions on your ‘Info.plist’ file like the following below,

  <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
  <string>We use the location to provide accurate and relative information for users</string>
  <key>NSLocationAlwaysUsageDescription</key>
  <string>We use the location to provide accurate and relative information for users</string>
  <key>NSLocationWhenInUseUsageDescription</key>
  <string>We use the location to provide accurate and relative information for users</string>
  <key>NSMicrophoneUsageDescription</key>
  <string>This app requires microphone access to enable voice commands.</string>

For Android:

Import SDK:

• Add the following permission to your Android Manifest:

<manifest>
  <uses-permission android:name="android.permission.INTERNET"/>
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
  <uses-permission android:name="android.permission.VIBRATE"/>
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
  <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
</manifest>

• Add the following Dependency in Android Build.gradle:

Groovy Gradle:

implementation 'com.google.code.gson:gson:2.10.1'

Kotlin Gradle:

implementation(“com.google.code.gson:gson:2.10.1”)

Now Import the methods you need to call from the framework.

For Example:

import { multiply, setClientID, initFramework, onToneDetected, start, stop } from 'react-native-tone-framework';

• Navigate to your Android Directory, app/src/main/java/com/sample/package/
• Here, In your MainActivity, extend ToneReceiver, and Implement onReceiveTone() method.
• In onCreate() method of your MainActivity, initialize ToneBroadcastReceiver() class to a variable.

override fun onCreate(savedInstanceState: Bundle?) {
  setTheme(R.style.AppTheme)
  super.onCreate(null)
  br = ToneBroadcastReceiver(this)
}

• Then, in onStart() method, create a intent filter with string value of com.strutbebetter.tonelisten.broadcast.TONERESPONSE and register a receiver passing context, broadastReceiver and receiver flag.

override fun onStart() {
   super.onStart()
   val filter: IntentFilter = IntentFilter("com.strutbebetter.tonelisten.broadcast.TONERESPONSE")
   ContextCompat.registerReceiver(this, br!!, filter, ContextCompat.RECEIVER_EXPORTED)
}

• In onDestroy() method method unregister the registered BroadcastReceiver.

override fun onDestroy() {
super.onDestroy()
this.unregisterReceiver(br!!)
}

• Now, create a new model class, with three variables, actionType, actionUrl and isBadCode.
• Create a new File named, ToneBroadcastReceiver and add the following code:

import android.content.BroadcastReceiver
import android.content.Context
import android.content.Intent
import android.os.Build
import android.os.IBinder
import android.util.Log


class ToneBroadcastReceiver(private var toneReceiver: ToneReceiver): BroadcastReceiver()  {


   private val TAG = "BroadcastReceiver"


   override fun onReceive(context: Context?, intent: Intent) {
       Log.d(TAG, "ToneBroadcastReceiver: " + intent.getStringExtra("actionType"))
       toneReceiver.onReceiveTone(intent)
   }


   override fun peekService(myContext: Context?, service: Intent?): IBinder {
       return super.peekService(myContext, service)
   }
}


interface ToneReceiver {
   fun onReceiveTone(intent: Intent?)
}

• Now, create a file for your react module, then Navigate to your Application class.
• In that Application class, link your module class to your react native application, by adding packages.add(MyReactPackage()) inside getPackages() method.
• Then create a new private class inside your Application class, and inherit ReactPackage inside createNativeModules() method add your module class, modules.add(MainModule(reactApplicationContext)).

private class MyReactPackage : ReactPackage {
 override fun createNativeModules(reactApplicationContext: ReactApplicationContext): MutableList<NativeModule> {
   val modules: MutableList<NativeModule> = ArrayList<NativeModule>()
   modules.add(MainModule(reactApplicationContext))
   return modules
 }


 override fun createViewManagers(p0: ReactApplicationContext): MutableList<ViewManager<View, ReactShadowNode<*>>> {
   return Collections.emptyList()
 }
}

• Inside your module class, create a method, with intent in its params.
• Now navigate to your MainActivity, inside the onReceiveTone() method, pass the intent to the method created in your module class.

override fun onReceiveTone(intent: Intent?) {
   if (intent != null) {
       val reactContext = reactInstanceManager.currentReactContext
       val myModule: MainModule? = reactContext?.getNativeModule(MainModule::class.java)
       myModule?.passIntentToModule(intent)
   }
}

• Now, in your Module class, get data from intent, you can get actionType, actionUrl and isBadCode from that intent.
• Then you can use isBadCode to check whether the detected ToneTag was the wrong one, and actionType contains the type of the content received from API.
• Create a model, and add actionType, actionUrl, and body to the model, for Body, you can pass the data you want.
• Then convert the model into JsonString, and then you can create an event to emit the JsonString from Native code to Javascript code.

@ReactMethod
fun passIntentToModule(intent: Intent) {
   dataIntent = intent
   if (!intent.getBooleanExtra("isBadCode", false)) {
       val toneModel = ToneModel(intent.getStringExtra("actionType"), intent.getStringExtra("actionUrl"),"ToneDemo")
       val gson = Gson()
       val dataArray: String = gson.toJson(toneModel)
       reactApplicationContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
           .emit("ToneDetected", dataArray)
   } else {
       Log.d("passIntentToModule", "passIntentToModule: Bad Code")
   }
}

• In App.js, add a DeviceEventEmitter listener to listen for data emitted from native code, so use the key value as you set in emit method, then call the onToneDetected() and pass the value the you get from the listener.
• Now in your App() method in App.js file, Utilize React.useEffect hook in a React functional component to perform several actions.
• Use that function, and call initFramework() to initialize Tone Framework.
• Call setClientID() method, and pass client ID as string in Params.
• Then call Start() method to start the Tone Framework.
• The Stop() method can be called to stop the Tone Framework.

License

MIT