Documentation
Documentation

React Native Android

Suggest Edits

This details the steps that need to be taken once you have access to our Android Cashback Keyboard SDK, in order to have a functional custom keyboard with onboarding sequence integrated into your React Native app.

Prerequisites

Before you begin, ensure your development environment meets the following requirements:

  • Android SDK with a minimum SDK version of 23 and a target SDK version of 33.
  • JAVA version must be 17+

Getting Started

Follow these steps to integrate the Cashback Keyboard SDK into your Android project:

Step 1: Configure Repositories

In the build.gradle file of your project, add the following configurations:

allprojects {  
    repositories {  
        google()  
        mavenCentral()  
        maven { url "https://jitpack.io" }  
        maven { url = uri("https://repo.mocha.global/repository/maven-releases/") }  
        maven {  
            url = uri("https://adsbynimbus-public.s3.amazonaws.com/android/sdks")  
            credentials {  
                username = "*"  
            }  
            content {  
                includeGroup("com.adsbynimbus.openrtb")  
                includeGroup("com.adsbynimbus.android")  
                includeGroup("com.iab.omid.library.adsbynimbus")  
            }  
        }  
    }  
}

Step 2: Configure Module Level build.gradle

In the build.gradle file of your app module, add the following configurations:

1. Enable data binding:

android {
    dataBinding { enabled = true }
}

2. Add dependencies for the Cashback Keyboard SDK and related libraries:

dependencies {
    def SDK_VERSION = "3.+"

    // Tappa Keyboard SDK
    implementation "com.mocha.keyboard:keyboard-sdk:$SDK_VERSION"
    implementation "com.tappa:sdk:$SDK_VERSION"
    
    // Additional Buttons
    implementation "com.mocha.keyboard:brand-logo-button:$SDK_VERSION"
    implementation "com.mocha.keyboard:clipboard-button:$SDK_VERSION"
    implementation "com.mocha.keyboard:livescore-button:$SDK_VERSION"
    implementation "com.mocha.keyboard:social-hub:$SDK_VERSION"
    implementation "com.mocha.keyboard:themes-button:$SDK_VERSION"
    implementation "com.mocha.keyboard:web-link-button:$SDK_VERSION"
    implementation "com.mocha.keyboard:speech-to-text-button:$SDK_VERSION"
    implementation "com.mocha.keyboard:fix-with-ai-button:$SDK_VERSION"
    
    // DataDog
    implementation 'com.datadoghq:dd-sdk-android:1.19.3'
}

Step 4: Add Resources and Assets

To set up the necessary resources and assets for the Cashback Keyboard SDK, you'll need to copy them from the demo application's repository. These files are essential for the proper functioning of the Cashback Keyboard SDK.

  1. Visit the Tappa Keyboards React Native Demo App repository on Bitbucket.
  2. From the repository, navigate to the following directories and copy the respective files and folders into your project's corresponding directories:

  • Assets:

    • Locate the assets folder in the demo repository.
    • In your React Native project, create an "assets" folder under android/app/src/main/ if it doesn't exist already.
    • Copy the following files from the demo repository into this folder:
      KBActivation.json
      KBThemes.json
      KBToolbar.json

  • Drawable Resources:

    • Locate the drawable folders in the demo repository.
    • Copy the following drawable folders into your project's android/app/src/main/res/ directory:
      drawable-hdpi
      drawable-mdpi
      drawable-v21
      drawable-v24
      drawable-xhdpi
      drawable-xxhdpi
      drawable-xxxhdpi

  • String Resources:

    • Find strings.xml in the demo repository.
    • Copy it into your project's android/app/src/main/res/values/.

  • Theme Styles:

    • Locate styles.xml in the demo repository, containing the Activation Theme styles.
    • Copy this file into your project's android/app/src/main/res/values/styles.xml.

By following these steps, you will replicate the configuration and resources of the demo app in your project, ensuring a smooth integration of the Tappa Keyboards SDK.

Step 5: Setup a bridge file

A native module is needed to be used as a bridge for communication between the JavaScript/TypeScript code (React Native side) and the native Kotlin/Java code (Android side). TappaModule.kt is a custom Kotlin class in our SDK that facilitates this interaction on the Android platform.

  • Implement TappaModule.kt
    Place the TappaModule.kt file in the appropriate directory within your Android project (usually android/app/src/main/java/com/yourproject).

  • package com.reactnativedemo.reactnative

import com.facebook.react.bridge.Promise
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod
import com.mocha.keyboard.framework.activation.ActivationExtensions

class TappaModule internal constructor(context: ReactApplicationContext?) :
    ReactContextBaseJavaModule(context) {
    override fun getName(): String {
        return "TappaModule"
    }

    @ReactMethod
    fun launchActivationIfNeeded() {
        ActivationExtensions.launchActivationIfNeeded()
    }

    @ReactMethod
    fun isKeyboardInstalled(promise: Promise) {
        try {
            val isInstalled = ActivationExtensions.state.current
            promise.resolve(isInstalled)
        } catch (e: Exception) {
            promise.reject("Error checking installation status", e.message)
        }
    }


    @ReactMethod
    fun isKeyboardAdded(promise: Promise) {
        try {
            val isInstalled = ActivationExtensions.state.enabled
            promise.resolve(isInstalled)
        } catch (e: Exception) {
            promise.reject("Error checking installation status", e.message)
        }
    }
}

  • Register the Module:
    In your Android project, register TappaModule.kt as a native module. This is usually done in the MainApplication.kt file.

  • // ... Other imports and class definitions

class MainApplication : Application(), ReactApplication {

  // Define the ReactNativeHost with the necessary configurations
  override val reactNativeHost: ReactNativeHost =
      object : DefaultReactNativeHost(this) {
        // Add TappaPackage to the list of packages
        override fun getPackages(): List<ReactPackage> {
          val packages = PackageList(this).packages
          packages.add(TappaPackage())
          return packages
        }

        // Other overridden methods...

      }

  // ... onCreate method and other configurations

}

// Define the TappaPackage class
class TappaPackage : ReactPackage {
  // Implement createViewManagers and createNativeModules
  // ...
}

  • Use the Module in JavaScript:
    In your JavaScript/TypeScript code, import and use the native module methods as needed:

  • import { NativeModules } from 'react-native';
const { TappaModule } = NativeModules;

  • Handle Events and Callbacks

Methods Exposed by TappaModule SDK

TappaModule provides several methods to interact with the native Android keyboard functionalities. Here's a breakdown of these methods and their usage:

  1. isKeyboardInstalled(): Promise
    Description: Checks if the keyboard is installed on the device.
    Returns: A Promise that resolves to a boolean value. true if the keyboard is installed, false otherwise.
    Usage Example:

  2. const installed = await TappaModule.isKeyboardInstalled();

  3. isKeyboardAdded(): Promise
    Description: Verifies whether the keyboard has been added to the input methods of the device.
    Returns: A Promise that resolves to a boolean value. true if the keyboard has been added, false otherwise.
    Usage Example:

  4. const added = await TappaModule.isKeyboardAdded();

  5. launchActivationIfNeeded(): void
    Description: Triggers the activation process for the keyboard if it is not already activated. This method should be called when the app detects that the keyboard is installed but not activated.
    Usage Example:

  6. TappaModule.launchActivationIfNeeded();

Integration in React Native Application

In your React Native application, these methods are used to manage the keyboard installation and activation states. The app checks the installation and activation status when it becomes active, and triggers the activation process if necessary.

  • Checking Installation Status: This is done using the checkInstallationStatus function, which calls isKeyboardInstalled and isKeyboardAdded to determine the current state of the keyboard installation and activation.
  • Handling State Changes: The app listens for state changes in the AppState and checks the installation status whenever the app returns to the active state. This ensures that the app always has the latest status.
  • Triggering Activation: If the keyboard is installed but not activated, launchActivationIfNeeded is called to start the activation process.
  • UI Response: Based on the installation and activation status, the app renders different screens - InstalledScreen if the keyboard is fully installed and activated, and NotInstalledScreen with an option to start the installation process otherwise.

Example Usage in App Component

useEffect(() => {
  const subscription = AppState.addEventListener(
    'change',
    async nextAppState => {
      if (nextAppState === 'active') {
        const {installed, added} = await checkInstallationStatus();

        if (added && !installed) {
          TappaModule.launchActivationIfNeeded();
        }
      }
    },
  );

  return () => {
    subscription.remove();
  };
}, []);

// ...rest of the component

Updated 3 months ago