Installation

Run the below code to install the react native

npm install react-native-genuin-qa

Android

To install the React Native in Android perform the below steps:

Android Configuration

Step 1: In android/app/build.gradle:


android {
    defaultConfig {
        minSdk = 24
    }
}

Step 2: In android/app/src/main/AndroidManifest.xml:


<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">

<uses-permission android:name="android.permission.INTERNET" />

<!-- 1. Add tools:remove="android:taskAffinity"
     2. Add android:allowBackup="false" -->

<application
    android:name=".MainApplication"
    android:label="@string/app_name"
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:allowBackup="false"
    android:theme="@style/AppTheme"
    tools:remove="android:taskAffinity"
    android:supportsRtl="true">

    <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>
</manifest>

Step 3: Change theme in android/app/src/main/res/values/styles.xml:

Our SDK is using Material components so in order to use our sdk you need to use material theme as shown in below example


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
        <!-- Show a splash screen on the activity. Automatically removed when
             the Flutter engine draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>

</resources>

Step 4: Create android/app/proguard-rules.pro, add the following lines:


# Add project specific ProGuard rules here.
# By default, the flags in this file are appended to flags specified
# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
# You can edit the include path and order by changing the proguardFiles
# directive in build.gradle.
#
# For more details, see
#   http://developer.android.com/guide/developing/tools/proguard.html

# Add any project specific keep options here:
-dontwarn com.facebook.imagepipeline.nativecode.WebpTranscoder

-keep class com.bumptech.glide.**{*;}
-keep public class * {
    public *;
    protected *;
}

# Retrofit does reflection on generic parameters. InnerClasses is required to use Signature and
# EnclosingMethod is required to use InnerClasses.
-keepattributes Signature, InnerClasses, EnclosingMethod

# Retrofit does reflection on method and parameter annotations.
-keepattributes RuntimeVisibleAnnotations, RuntimeVisibleParameterAnnotations

# Retain service method parameters when optimizing.
-keepclassmembers,allowshrinking,allowobfuscation interface * {
    @retrofit2.http.* <methods>;
}

# Ignore annotation used for build tooling.
-dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement

# Ignore JSR 305 annotations for embedding nullability information.
-dontwarn javax.annotation.**

# Guarded by a NoClassDefFoundError try/catch and only used when on the classpath.
-dontwarn kotlin.Unit

# Top-level functions that can only be used by Kotlin.
-dontwarn retrofit2.KotlinExtensions
-dontwarn java.lang.reflect.AnnotatedType
-dontwarn com.google.api.client.http.GenericUrl
-dontwarn com.google.api.client.http.HttpHeaders
-dontwarn com.google.api.client.http.HttpRequest
-dontwarn com.google.api.client.http.HttpRequestFactory
-dontwarn com.google.api.client.http.HttpResponse
-dontwarn com.google.api.client.http.HttpTransport
-dontwarn com.google.api.client.http.javanet.NetHttpTransport$Builder
-dontwarn com.google.api.client.http.javanet.NetHttpTransport
-dontwarn com.squareup.picasso.Picasso
-dontwarn com.squareup.picasso.RequestCreator
-dontwarn java.awt.image.BufferedImage
-dontwarn javax.imageio.ImageIO
-dontwarn org.joda.time.Instant
-dontwarn org.junit.Assert
-dontwarn org.slf4j.impl.StaticLoggerBinder
-dontwarn org.slf4j.impl.StaticMDCBinder
-dontwarn org.slf4j.impl.StaticMarkerBinder

# With R8 full mode, it sees no subtypes of Retrofit interfaces since they are created with a Proxy
# and replaces all potential values with null. Explicitly keeping the interfaces prevents this.
-if interface * { @retrofit2.http.* <methods>; }
-keep,allowobfuscation interface <1>


##---------------Begin: proguard configuration for Gson  ----------
# Gson uses generic type information stored in a class file when working with fields. Proguard
# removes such information by default, so configure it to keep all of it.
-keepattributes Signature

# For using GSON @Expose annotation
-keepattributes *Annotation*

# Gson specific classes
-dontwarn sun.misc.**
#-keep class com.google.gson.stream.** { *; }

# Application classes that will be serialized/deserialized over Gson
-keep class com.begenuin.begenuin.data.model.** { <fields>; }
-keep class com.begenuin.begenuin.vo.** { <fields>; }


# RenderScript
-keepclasseswithmembernames class * {
native <methods>;
}
-keep class androidx.renderscript.** { *; }

-keepattributes *Annotation*

-keep class com.giphy.sdk.core.models.** { *; }
-keep class com.giphy.sdk.ui.views.** { *; }

-keep public class * implements java.lang.reflect.Type

-keep class com.google.mediapipe.solutioncore.** {*;}
-keep class com.google.protobuf.** {*;}

-dontwarn com.begenuin.sdk.BR
-dontwarn com.google.android.play.core.splitcompat.SplitCompatApplication
-dontwarn com.google.android.play.core.splitinstall.SplitInstallManager
-dontwarn com.google.android.play.core.splitinstall.SplitInstallManagerFactory
-dontwarn com.google.android.play.core.splitinstall.SplitInstallRequest$Builder
-dontwarn com.google.android.play.core.splitinstall.SplitInstallRequest
-dontwarn com.google.android.play.core.splitinstall.SplitInstallStateUpdatedListener
-dontwarn com.google.android.play.core.tasks.OnFailureListener
-dontwarn com.google.android.play.core.tasks.OnSuccessListener
-dontwarn com.google.android.play.core.tasks.Task
-dontwarn com.google.mediapipe.proto.CalculatorProfileProto$CalculatorProfile
-dontwarn com.google.mediapipe.proto.GraphTemplateProto$CalculatorGraphTemplate
-dontwarn javax.lang.model.AnnotatedConstruct
-dontwarn javax.lang.model.SourceVersion
-dontwarn javax.lang.model.element.AnnotationMirror
-dontwarn javax.lang.model.element.AnnotationValue
-dontwarn javax.lang.model.element.AnnotationValueVisitor
-dontwarn javax.lang.model.element.Element
-dontwarn javax.lang.model.element.ElementKind
-dontwarn javax.lang.model.element.ElementVisitor
-dontwarn javax.lang.model.element.ExecutableElement
-dontwarn javax.lang.model.element.Name
-dontwarn javax.lang.model.element.NestingKind
-dontwarn javax.lang.model.element.PackageElement
-dontwarn javax.lang.model.element.QualifiedNameable
-dontwarn javax.lang.model.element.TypeElement
-dontwarn javax.lang.model.element.TypeParameterElement
-dontwarn javax.lang.model.element.VariableElement
-dontwarn javax.lang.model.type.ArrayType
-dontwarn javax.lang.model.type.DeclaredType
-dontwarn javax.lang.model.type.ErrorType
-dontwarn javax.lang.model.type.ExecutableType
-dontwarn javax.lang.model.type.IntersectionType
-dontwarn javax.lang.model.type.NoType
-dontwarn javax.lang.model.type.NullType
-dontwarn javax.lang.model.type.PrimitiveType
-dontwarn javax.lang.model.type.TypeKind
-dontwarn javax.lang.model.type.TypeMirror
-dontwarn javax.lang.model.type.TypeVariable
-dontwarn javax.lang.model.type.TypeVisitor
-dontwarn javax.lang.model.type.WildcardType
-dontwarn javax.lang.model.util.AbstractElementVisitor8
-dontwarn javax.lang.model.util.ElementFilter
-dontwarn javax.lang.model.util.Elements
-dontwarn javax.lang.model.util.SimpleAnnotationValueVisitor8
-dontwarn javax.lang.model.util.SimpleElementVisitor8
-dontwarn javax.lang.model.util.SimpleTypeVisitor8
-dontwarn javax.lang.model.util.Types
-dontwarn javax.tools.Diagnostic$Kind
-dontwarn javax.tools.JavaFileObject$Kind
-dontwarn javax.tools.JavaFileObject
-dontwarn javax.tools.SimpleJavaFileObject

Want to override our default loader?

We are using lottie animation for our loader. You can put your custom lottie animation loader with the name loader_mix.json in the android/app/src/main/res/raw folder. Make sure you use the same name as provided.

Quick Start

1. Initialize SDK


import android.content.Intent
import android.os.Bundle
import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
import com.facebook.react.defaults.DefaultReactActivityDelegate
import com.genuinsdk.GenuinSDKPluginModule


class MainActivity : ReactActivity() {

    /**
     * Returns the name of the main component registered from JavaScript. This is used to schedule
     * rendering of the component.
     */
    override fun getMainComponentName(): String = "YourApp"

    /**
     * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
     * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
     */
    override fun createReactActivityDelegate(): ReactActivityDelegate =
        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        GenuinSDKPluginModule.initSDK(application, "YOUR_API_KEY")
    }
}

2. Handling Deeplink

To handle deep link place the below code in android/app/src/main/AndroidManifest.xml file:


<activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
    android:launchMode="singleTask"
    android:windowSoftInputMode="adjustResize"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
    <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW" />

        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />

        <data android:host="YOUR_WHITE-LABELLED_DOMAIN" android:scheme="https" />
    </intent-filter>
</activity>


import android.content.Intent
import android.os.Bundle
import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
import com.facebook.react.defaults.DefaultReactActivityDelegate
import com.genuinsdk.GenuinSDKPluginModule

class MainActivity : ReactActivity() {

    /**
     * Returns the name of the main component registered from JavaScript. This is used to schedule
     * rendering of the component.
     */
    override fun getMainComponentName(): String = "YourApp"

    /**
     * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
     * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
     */
    override fun createReactActivityDelegate(): ReactActivityDelegate =
        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        GenuinSDKPluginModule.initSDK(application, "YOUR_API_KEY")
        if (intent != null && intent.data != null) {
            handleDeepLink(intent)
        }
    }

    override fun onNewIntent(intent: Intent) {
        super.onNewIntent(intent)
        handleDeepLink(intent)
    }

    private fun handleDeepLink(intent: Intent?) {
        intent?.data?.let {
            GenuinSDKPluginModule.handleDeepLink(this@MainActivity, intent)
        }
    }
}

3. Handling Push Notifications

To handle the push notification place the below code In android/app/build.gradle file:


buildscript {
    dependencies {
        classpath("com.google.gms:google-services:4.4.2") 
    }
}

iOS

iOS Configuration

1. In ios/Podfile


ENV['USE_FRAMEWORKS'] = 'dynamic'

# Resolve react_native_pods.rb with node to allow for hoisting
require Pod::Executable.execute_command('node', ['-p',
  'require.resolve(
    "react-native/scripts/react_native_pods.rb",
    {paths: [process.argv[1]]},
  )', __dir__]).strip

platform :ios, min_ios_version_supported
prepare_react_native_project!

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

target 'YourApp' do
  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  pre_install do |installer|
      installer.pod_targets.each do |pod|
        if pod.name.eql?('RNReanimated')
          def pod.build_type
          Pod::BuildType.static_library
        end
      end
    end
  end

  post_install do |installer|
    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false,
      # :ccache_enabled => true
    )

    installer.pods_project.targets.each do |target|
      if target.name == 'Giphy'
        `xcrun -sdk iphoneos bitcode_strip -r Pods/Giphy/GiphySDK/GiphyUISDK.xcframework/ios-arm64_armv7/GiphyUISDK.framework/GiphyUISDK -o Pods/Giphy/GiphySDK/GiphyUISDK.xcframework/ios-arm64_armv7/GiphyUISDK.framework/GiphyUISDK`
      end
      target.build_configurations.each do |config|
        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '15.1'
        config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
      end
    end

  end
end

Quick Start

1. Initialize SDK


import UIKit
import React
import React_RCTAppDelegate
import ReactAppDependencyProvider
import Firebase

@main
class AppDelegate: RCTAppDelegate, UNUserNotificationCenterDelegate {

  override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
    self.moduleName = "YourApp"
    self.dependencyProvider = RCTAppDependencyProvider()

    if FirebaseApp.app() == nil {
      FirebaseApp.configure()
    }

    UNUserNotificationCenter.current().delegate = self

    UIApplication.shared.registerForRemoteNotifications()

    // You can add your custom initial props in the dictionary below.
    // They will be passed down to the ViewController used by React Native.
    self.initialProps = [:]
    GenuinModuleObjCWrapper.initSDK("YOUR_API_KEY", loaderName: "YOUR_LOTTIE_LOADER_NAME", showNavigationBar: nil)
    addNavVC()
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }

  func addNavVC(){
    DispatchQueue.main.async {
      if let rootVC = self.window.rootViewController {
        self.window.rootViewController = nil
        let navVC = GenuinModuleObjCWrapper.getGenuinNavigationController(rootVC)
        navVC?.setNavigationBarHidden(true, animated: true);
        self.window.rootViewController = navVC
        self.window.makeKeyAndVisible()
      }
    }
  }

  override func sourceURL(for bridge: RCTBridge) -> URL? {
    self.bundleURL()
  }

  override func bundleURL() -> URL? {
#if DEBUG
    RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
#else
    Bundle.main.url(forResource: "main", withExtension: "jsbundle")
#endif
  }

}

If your project has AppDelegate.swift file create the following wrapper classes in Objective-C in order to communicate with genuin’s react-native module,

GenuinModuleObjCWrapper.h


#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface GenuinModuleObjCWrapper : NSObject
+ (void)initSDK:(NSString *_Nullable)apiKey loaderName:(NSString *_Nullable)loaderName showNavigationBar:(BOOL *_Nullable)showNavigationBar;
+ (BOOL)application:(UIApplication *_Nullable)application continueUserActivity:(NSUserActivity *_Nullable)userActivity restorationHandler:(void (^_Nullable)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler;
+ (BOOL)handleDeepLink:(NSURL * _Nullable)dlURL controller:(UIViewController * _Nullable)controller;
+ (void)handleForegroundNotification:(NSDictionary *)notificationData;
+ (UINavigationController*_Nullable)getGenuinNavigationController:(UIViewController*)viewController;
@end

NS_ASSUME_NONNULL_END

GenuinModuleObjCWrapper.mm


#import "GenuinModuleObjCWrapper.h"
#import "GenuinSDKPlugin.h"

@implementation GenuinModuleObjCWrapper
+ (void)initSDK:(NSString *_Nullable)apiKey loaderName:(NSString *_Nullable)loaderName showNavigationBar:(BOOL *_Nullable)showNavigationBar {
  [GenuinSDKPlugin initSDK:apiKey loaderName:loaderName showNavigationBar:showNavigationBar];
}

+ (BOOL)application:(UIApplication *_Nullable)application continueUserActivity:(NSUserActivity *_Nullable)userActivity restorationHandler:(void (^_Nullable)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler {
  return [GenuinSDKPlugin application:application continueUserActivity:userActivity restorationHandler:restorationHandler];
}

+ (BOOL)handleDeepLink:(NSURL * _Nullable)dlURL controller:(UIViewController * _Nullable)controller {
  return [GenuinSDKPlugin handleDeepLink:dlURL controller:controller];
}

+ (void)handleForegroundNotification:(NSDictionary *)notificationData {
  [GenuinSDKPlugin handleForegroundNotification:notificationData];
}

+ (UINavigationController*_Nullable)getGenuinNavigationController:(UIViewController*)viewController {
  return [GenuinSDKPlugin getGenuinNavigationController: viewController];
}

@end

YourApp-Bridging-Header.h


#import "GenuinModuleObjCWrapper.h"

2. Handling Deep Link

To handle deeplink place the below in AppDelegate.swift file:

Prerequisite step : Link

In AppDelegate.swift:


import UIKit
import React
import React_RCTAppDelegate
import ReactAppDependencyProvider
import Firebase

@main
class AppDelegate: RCTAppDelegate, UNUserNotificationCenterDelegate {

  override func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([any UIUserActivityRestoring]?) -> Void) -> Bool {
    let result = GenuinModuleObjCWrapper.application(application, continue: userActivity, restorationHandler: restorationHandler)
    if GenuinModuleObjCWrapper.handleDeepLink(userActivity.webpageURL, controller: window.rootViewController) {
        return true
    }
    return result
  }

}

3. Handling Push Notification

To handle the push notification place the below code In AppDelegate.swift file:


import UIKit
import React
import React_RCTAppDelegate
import ReactAppDependencyProvider
import Firebase

@main
class AppDelegate: RCTAppDelegate, UNUserNotificationCenterDelegate {

  override func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
    Messaging.messaging().apnsToken = deviceToken
    print("deviceToken", deviceToken)
  }

  override func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [AnyHashable : Any], fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void) {
      print("\(userInfo )")
      completionHandler(.newData)
  }

  override func application(_ application: UIApplication, didFailToRegisterForRemoteNotificationsWithError error: any Error) {
  }

  func userNotificationCenter(_ center: UNUserNotificationCenter, willPresent notification: UNNotification, withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
    completionHandler([.list, .banner, .badge, .sound])
  }

  func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse, withCompletionHandler completionHandler: @escaping () -> Void) {
    if response.notification.request.trigger == nil {
      let notificationData = ["data": response.notification.request.content.userInfo]
        GenuinModuleObjCWrapper.handleForegroundNotification(notificationData)
    }
    completionHandler()
  }

}

Web

Web Configuration

To integrate the genuin-react-native SDK into your application, follow these steps:

Import the Feed Component: In your app.jsx file, import the Feed component from the genuin-react-native SDK.
Obtain Your API Key: Contact the Genuin team to obtain your unique API_KEY. This key is essential for authenticating your application with the Genuin service.
Implement the Feed Component: Use the Feed component within your application, passing the API_KEY as a prop. Below is an example of how to implement this:

import React from "react";
import Feed from "genuin-react-native";

export default function App() {
  return <Feed apiKey="API_KEY" />;
}

Carousel

javascript

import React from "react";
import Carousel from "genuin-react-native";

export default function App() {
  return <Carousel apiKey="API_KEY" />;
}

Example

Here’s a complete example of how your app.jsx file might look:

import React from "react";
import { SafeAreaView, StyleSheet, Text } from "react-native";
import Feed from "genuin-react-native";

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.header}>Welcome to the Genuin Feed</Text>
      <Feed apiKey="YOUR_API_KEY_HERE" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  header: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
  },
});

Additonal Information

Handling Errors Ensure you handle any potential errors gracefully. The Feed component can throw errors if the API key is invalid or if there are network issues. Implement error handling in your component as needed.

Styling the Feed You can style the Feed component using standard React Native styling techniques. Customize it to fit the design and aesthetics of your application.

Updating the API Key If you need to update your API key, simply modify the apiKey prop passed to the Feed component. Ensure your application is reloaded to apply the changes.

React Native

1. Load Carousel Embed View


import React, { useRef } from 'react';
import { Carousel, PlayPauseRef } from 'react-native-genuin-qa';

export default function App() {
  const carouselRef = useRef<PlayPauseRef>(null);
  return <Carousel ref={carouselRef} style={{height:400, width:'100%'}} embedId='YOUR_EMBED_ID' uniqueId='UNIQUE_ID' ssoToken='YOUR_SSO_TOKEN' isShowProfileEnabled={false} isDirectDeepLinkEnabled={false}  />;
}

Note: 1. You can set height and width of the Carousel as per your need. 2. You can use carouselRef.current?.pause() and carouselRef.current?.resume() for pause and resume video play in Carousel.

To configure the EmbedParams based on your need you can pass the below values.

embedId = The Embed Id that you want to load.

uniqueId = This is an optional parameter. This uniqueId is used when we need to display same embed in multiple/same screen. We need to provide uniqueId for the same embedId in multiple/same screen.

ssoToken = This is an optional parameter. To auto login in the SDK, you shall pass “YOUR_SSO_TOKEN” in order to implement Embed with SSO in your app.

interactionDeepLink = This is an optional parameter. You can pass a deeplink URL in this parameter. If a deeplink URL is given then all the interaction/clicks in the full screen view will redirect to the deeplink URL given. If not passed then the regular flow will work. It should be a correct URL else user will not be redirected.

isDirectDeepLinkEnabled = This is an optional boolean parameter. Default value is false. If this parameter is true then all the interaction/clicks in the full screen view will redirect to the specific video in white labelled app associated with video and also value of this parameter “interactionDeepLink” will be ignored. If not passed then the regular flow will work.

Note: For using isDirectDeepLinkEnabled parameter, you must have white labelled your domain first and also integrated the Handling deep link part in your main app in which you want to redirect this video to.

isShowProfileEnabled = This is an optional boolean parameter. Default value is false. If this parameter is true and also if user is logged in than Profile picture will be visible in full screen view (right side top corner). On clicking the profile picture user will see the account settings and logout options.

2. Load Standard Wall Embed View


import React, { useRef } from 'react';
import { PlayPauseRef, StandardWall } from 'react-native-genuin-qa';

export default function App() {
  const standardWallRef = useRef<PlayPauseRef>(null);
  return <StandardWall ref={standardWallRef} style={{height:'100%', width:'100%'}} embedId='YOUR_EMBED_ID' uniqueId='UNIQUE_ID' ssoToken='YOUR_SSO_TOKEN' isShowProfileEnabled={false} isDirectDeepLinkEnabled={false}  />;
}

Note: 1. You can set height and width of the StandardWall as per your need. 2. You can use standardWallRef.current?.pause() and standardWallRef.current?.resume() for pause and resume video play in StandardWall.

To configure the EmbedParams based on your need you can pass the below values.

embedId = The Embed Id that you want to load.

ssoToken = This is an optional parameter. To auto login in the SDK, you shall pass “YOUR_SSO_TOKEN” in order to implement Embed with SSO in your app.

3. Load FullScreen Embed View


import React, { useRef } from 'react';
import { Feed, PlayPauseRef } from 'react-native-genuin-qa';

export default function App() {
  const feedRef = useRef<PlayPauseRef>(null);
  return <Feed ref={feedRef} style={{height:'100%', width:'100%'}} embedId='YOUR_EMBED_ID' uniqueId='UNIQUE_ID' ssoToken='YOUR_SSO_TOKEN' isShowProfileEnabled={false} isDirectDeepLinkEnabled={false}  />;
}

Note: 1. You can set height and width of the Feed as per your need. 2. You can use feedRef.current?.pause() and feedRef.current?.resume() for pause and resume video play in Feed.

To configure the EmbedParams based on your need you can pass the below values.

embedId = The Embed Id that you want to load.

ssoToken = This is an optional parameter. To auto login in the SDK, you shall pass “YOUR_SSO_TOKEN” in order to implement Embed with SSO in your app.

4. Load HomeFeed View(Android Specific)


import React, { useRef } from 'react';
import { HomeFeed, PlayPauseRef } from 'react-native-genuin-qa';

export default function App() {
  const homeFeedRef = useRef<PlayPauseRef>(null);
  return <HomeFeed ref={homeFeedRef} style={{height:'100%', width:'100%'}}  />;
}

Note: 1. You can set height and width of the HomeFeed as per your need. 2. You can use homeFeedRef.current?.pause() and homeFeedRef.current?.resume() for pause and resume video play in HomeFeed.

5. Handling Push Notifications

Prerequisite:

Create firebase project and integrate into your app by following https://firebase.google.com/docs/flutter/setup

Step1: Create firebase_options.dart in lib folder and add below details in that file.


import 'package:firebase_core/firebase_core.dart';

class DefaultFirebaseOptions {
  static FirebaseOptions get currentPlatform {
    if (Platform.isAndroid) {
      return const FirebaseOptions(
        apiKey: 'YOUR-ANDROID-API-KEY',
        appId: 'YOUR-ANDROID-APP-ID',
        messagingSenderId: 'YOUR-SENDER-ID',
        projectId: 'YOUR-PROJECT-ID',
        storageBucket: 'YOUR-STORAGE-BUCKET',
      );
    }else{
      return const FirebaseOptions(
        apiKey: 'YOUR-IOS-API-KEY',
        appId: 'YOUR-IOS-APP-ID',
        messagingSenderId: 'YOUR-SENDER-ID',
        projectId: 'YOUR-PROJECT-ID',
        storageBucket: 'YOUR-STORAGE-BUCKET',
      );
    }
  }
}

Step 2: Handling background/foreground notifications

Note: Here for Android you need to provide small notification icon as “icon” key for foreground notifications. This icon needs to be in your flutter as well as android folder.


import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:genuin_sdk/genuin_sdk.dart';
import 'firebase_options.dart';

// This method will be called when app is in background and push received
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp();
}

final _genuinSdkPlugin = GenuinSdk();

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    name: 'YOUR_FIREBASE_PROJECT_NAME',
    options: DefaultFirebaseOptions.currentPlatform,
  );
  final messaging = FirebaseMessaging.instance;

  // Asking push notification permission
  final settings = await messaging.requestPermission(
    alert: true,
    announcement: false,
    badge: true,
    carPlay: false,
    criticalAlert: false,
    provisional: false,
    sound: true,
  );

  // If permission is granted than get firebase token and register it with Genuin SDK
  if (settings.authorizationStatus == AuthorizationStatus.authorized) {
    String? token = await messaging.getToken();
    if (token != null) {
      await _genuinSdkPlugin.registerFCMToken(token);
    }
  }

  // Check for initial notification that opened the app
  RemoteMessage? initialMessage =
  await FirebaseMessaging.instance.getInitialMessage();
  if (initialMessage != null) {
    // Handle navigation or actions
    final notificationData = {
      'title': initialMessage.notification?.title,
      'body': initialMessage.notification?.body,
      'data': initialMessage.data,
    };
    var willHandleNotification = await _genuinSdkPlugin
        .willHandleBackgroundNotifications(notificationData);
    if (willHandleNotification == true) {
      _genuinSdkPlugin.handleBackgroundNotifications(notificationData);
    } else {
      // Your notification handling
    }
  }

  // This method will be called when app is in foreground and push received
  FirebaseMessaging.onMessage.listen((RemoteMessage message) async {
    if (kDebugMode) {
      print('Handling a foreground message: ${message.messageId}');
      print('Message data: ${message.data}');
      print('Message notification: ${message.notification?.title}');
      print('Message notification: ${message.notification?.body}');
    }

    final notificationData = {
      'title': message.notification?.title,
      'body': message.notification?.body,
      'data': message.data,
      'icon': 'mipmap/ic_notification'
      // OR 'icon':'drawable/ic_notification'[if image put under drawable folder]
    };
    var willHandleNotification = await _genuinSdkPlugin
        .willHandleForegroundNotifications(notificationData);
    if (willHandleNotification == true) {
      _genuinSdkPlugin.handleForegroundNotifications(notificationData);
    } else {
      // Your notification handling
    }
  });

  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

  //This method will be called when user clicked on notification[Push notification is received when app is in background/killed]
  FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) async {
    final notificationData = {
      'title': message.notification?.title,
      'body': message.notification?.body,
      'data': message.data,
    };
    var willHandleNotification = await _genuinSdkPlugin
        .willHandleBackgroundNotifications(notificationData);
    if (willHandleNotification == true) {
      _genuinSdkPlugin.handleBackgroundNotifications(notificationData);
    } else {
      // Your notification handling
    }
  });

  runApp(const MyApp());
}

5. Handle SSO Login Explicitly in SDK

To Auto Login in the SDK, You need to call below method, whenever user is log in to your application.

Note: You don’t need to call the below method if you have implemented the Embed With SSO already.


import 'package:genuin_sdk/genuin_sdk.dart';

final _genuinSdkPlugin = GenuinSdk();
await _genuinSdkPlugin.ssoLogin("YOUR_SSO_TOKEN");

6. Handle SSO Logout in SDK


import 'package:genuin_sdk/genuin_sdk.dart';

final _genuinSdkPlugin = GenuinSdk();
await _genuinSdkPlugin.ssoLogout();

Support

For further assistance with integrating the genuin-react-native SDK, please contact the Genuin support team or refer to the official documentation. The Genuin team is available to help you with any issues or questions you might have during the integration process.

SDK Doc

API Doc

Guides

Engage Engine

Integration

React Native SDK

Installation

Android

Android Configuration

Quick Start

iOS

iOS Configuration

Quick Start

Web

Web Configuration

React Native

Support

SDK Doc

API Doc

Guides

Engage Engine

Integration

​Installation

​Android

​Android Configuration

​Quick Start

​iOS

​iOS Configuration

​Quick Start

​Web

​Web Configuration

​React Native

​Support

Installation

Android

Android Configuration

Quick Start

iOS

iOS Configuration

Quick Start

Web

Web Configuration

React Native

Support