React Native Quick Start

This guide is related to Android on React Native

Before you start

You need to have the following software installed on your system:

  • npm or yarn installed

  • React Native version > 0.56.0 (recommended)

  • Basic understanding of Buddy Concepts

Step 0: Setup

First off, open your React Native app in your favorite IDE and terminal , cd <path-to-your-project> to your project folder. For the remainder of this guide, we'll assume that the app is called MyAwesomeApplication.

Step 1: Add Slang library dependency

Depending on your package management system, you can follow the steps under the appropriate tab below to add a dependency to Slang's React Native SDK.

$ npm install react-native-slang --save

If your React Native version is < 0.60.0 you would need to link react-native-slang with the command below.

$ react-native link react-native-slang

Next in your react native project open the file in this location:

`path/to/MyAwesomeApplication/android/build.gradle `

and add the code below under allprojects { repositories { ...

allprojects {
    repositories {
      
      ...

maven {
            url "http://maven.slanglabs.in:8080/artifactory/gradle-release"
        }
      
      ...

This adds the required maven repository to your android part of the project

Step 2: Gather credentials from Slang Console

If you haven't already configured your app's use cases in the Slang Console, please head to console.slanglabs.in and follow the steps in the Building Your First Buddy guide.

Once you've built a buddy corresponding to your app's use-cases, gather the API key and Buddy ID and have them handy for integration. For details on how to obtain these credentials from the Console, see here.

Step 3: Initialize Slang

Once you have Slang installed in your application, by following either of the above two methods, you have to initialize Slang. This will add a Slang mic (trigger) as an overlay on your react native app.

For most use cases you can initialise Slang in the App.js ( or equivalent component ).

/**
*
* Example App.js file
*
**/

import React  from 'react';
import { View, Text } from 'react-native';
import Slang from 'react-native-slang';

export default App = () => {

// Initialise Slang
 Slang.initialize(
      <your-buddy-ID>,
      <your-API-Key>,
      // Slang config 
      {
         "locale": "LOCALE_ENGLISH_IN", // LOCALE_HINDI_IN, LOCALE_ENGLISH_US
         "position": "CENTER_BOTTOM", // values: LEFT_TOP, CENTER_TOP, RIGHT_TOP, CENTER, LEFT_BOTTOM, RIGHT_BOTTOM etc.
},
// callback function when Slang initialises successfully
() => {
  console.log("Slang initialized successfully");
   // Do something ...
});

return (
    <View>
     <Text> Hello React Native Slang </Text>
   </View>
);
}

With these code changes, when the app is run, Slang will be initialized Trigger will be automatically inserted. Users of the app will now be able to click on this trigger to initiate the voice experience and start talking. But, by default, no action will occur after the user finishes speaking. In order for actions to occur, we need to write action handlers.

Step 4: Write action handlers

As users talk, Slang attempts to understand what they're saying and take appropriate action. Every utterance of each user that is understood by Slang will result in an "Intent" being recognized and the appropriate action for the Intent being called.

To understand the details behind Intents, please see the section on Intents in Buddy Building Tips.

In your app, you can write action handlers that specify what actions need to be performed when intents are recognized by Slang.

const intentHandler = (intent) => {
    switch (intent.name) {
        case "show_cars":
            showCars()
            return true
        case "show_bikes":
            showBikes()
            return true    
        default:
            return false
    }
};

In the above code the intentHandler function calls the appropriate UI action depending on the intent.name . The functions showCars() and showBikes() are existing functions on your app.

Slang.setIntentActionHandler(intentHandler);

Slang.setIntentActionHandler can be called inside the lifecycle method ComponentDidMount for your stateful component.

The "action" method of your intent handler will be called every time an "Intent" is detected by Slang. This is where you can trigger functionality that exists in your app that corresponds to the detected intent/use-case. The logic can be as simple as updating a UI component in the app.


// ...
import Slang from 'react-native-slang';
import { ImageBackground } from 'react-native';
//...

class MyComponent extends Component {


//...

this.state = {
      imageSrc: "./assets/trains.jpg", 
// ...
      

showCars = () => {
    this.setState({
        imageSrc: './assets/cars.jpg'
    })
    // do other stuff
}

showBikes = () => {
    this.setState({
        imageSrc: './assets/bikes.jpg'
    })
    // do other stuff
}


intentHandler = (intent) => {
    switch (intent.name) {
        case "show_cars":
            this.showCars()
            return true
        case "show_bikes":
            this.showBikes()
            return true    
        default:
            return false
    }
};

componentDidMount() {
   Slang.setIntentActionHandler(this.intentHandler);
  }

// ...

render() {
 
 return(
        <ImageBackground
        //...            
        source={require(this.state.imageSrc)}
        >
            <Text>My Awesome App</Text>
      </ImageBackground>
        
    )
}

In the above code the component updates the background image in this app with cars or bikes depending on the intent.name passed by Slang. The setIntentActionHandler is called when the component mounts with the intentHandler . The intentHandler with a switch statement, calls the appropriate function to update the state and display the image.

Step 5: Run the app

Congratulations! That's all there is to integrating Slang with your React Native app. Now, when you run your app, the trigger should appear automatically. Clicking on it and speaking an utterance configured for an app's use-case should perform the appropriate action.

PreviousWeb Quick StartNextBuilding Your First Buddy

Last updated