Installation

Prerequisites: React Native uses Android and iOS native SDKs to integrate kevin. infrastructure. Before proceeding further, please import SDK dependencies as it is described in the corresponding installation sections.

In order to use kevin. SDK in your React Native application you need to initialize kevin. plugin and set up platform-specific components.

Android

Create a class in Android native project that will hold kevin. SDK integration code.

KevinModule.kt

class KevinModule internal constructor(context: ReactApplicationContext?) :
    ReactContextBaseJavaModule(context) {

    init {
        context?.addActivityEventListener(this)
        
        // Setup your custom theme which extends Theme.Kevin.Base
        Kevin.setTheme(R.style.Theme_Kevin_Base)
        // Set optional locale, default is phone locale
        Kevin.setLocale(Locale("en"))
        // Initialize required plugins with your callback urls
        KevinAccountsPlugin.configure(
            KevinAccountsConfiguration.builder()
                .setCallbackUrl("https://your.callback.url")
                .build()
        )
        KevinPaymentsPlugin.configure(
            KevinPaymentsConfiguration.builder()
                .setCallbackUrl("https://your.callback.url")
                .build()
        )
    }
}

Additionally, for React Native to be able to call Kotlin native code, you will need to create a package registration class for your native code and add it to ReactPackage list in MainApplication.java

KevinPackage.kt

class KevinPackage : ReactPackage {
    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
        return emptyList()
    }

    override fun createNativeModules(
        reactContext: ReactApplicationContext
    ): List<NativeModule> {
        val modules: MutableList<NativeModule> = java.util.ArrayList<NativeModule>()
        modules.add(KevinModule(reactContext))
        return modules
    }
}

MainApplication.kt

//...

@Override
protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    packages.add(new KevinPackage());
    return packages;
}

//...

iOS

Create a class in iOS native project that will hold kevin. SDK integration code.

KevinModule.swift

@objc(KevinModule)
class KevinModule: NSObject {
    
  override init() {
    super.init()
    
    // Setup your custom theme which extends KevinTheme
    Kevin.shared.theme = KevinTheme()
    // Set optional locale, default is English locale
    Kevin.shared.locale = Locale(identifier: "en")
    // Initialize required plugins with your callback urls
    KevinAccountsPlugin.shared.configure(
      KevinAccountsConfiguration.Builder(
        callbackUrl: URL(string: "https://your.callback.url")!
      ).build()
    )
    KevinInAppPaymentsPlugin.shared.configure(
      KevinInAppPaymentsConfiguration.Builder(
        callbackUrl: URL(string: "https://your.callback.url")!
      ).build()
    )
  }
}

Additionally, for React Native to be able to call Swift native code, you will need to create your native module bridge and project bridging header.

Module bridge:

KevinModuleBridge.m

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(KevinModule, NSObject)

- (dispatch_queue_t)methodQueue
{
  return dispatch_get_main_queue();
}

@end

Bridging header:

<Project>-Bridging-Header.h

#import <React/RCTBridgeModule.h>