genuin-react-native

Genuin SDK comprises features such as brand feed, communities, and groups.

Installation

npm install genuin-react-native

Getting Started

Android

Android configuration

1. In android/app/build.gradle:

android {
    defaultConfig {
        minSdk = 24
    }
}

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">

  <!-- Use android:windowSoftInputMode="adjustPan" for better performance of SDK -->

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

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>

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

5. 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 Deep Link

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

<activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
    android:launchMode="singleTask"
    android:windowSoftInputMode="adjustPan"
    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

In android/app/build.gradle:

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,

1. 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

2. 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

3. YourApp-Bridging-Header.h

#import "GenuinModuleObjCWrapper.h"

2. Handling Deep Link

Prerequisite: https://resources.begenuin.com/developers/sdk-docs/ios_sdk#handling-deep-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

In AppDelegate.swift:

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()
  }

}

React Native

1. Load Carousel Embed View

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

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 'genuin-react-native';

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.

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.

3. Load FullScreen Embed View

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

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.

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.

4. Load HomeFeed View(Android Specific)

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

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/web/setup

Steps:

1. 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 android folder.

import React, { useEffect } from 'react';
import { Alert, Platform } from 'react-native';
import messaging from '@react-native-firebase/messaging';
import { requestNotifications } from 'react-native-permissions';
import { GenuinSDKPlugin } from "genuin-react-native";
import PushNotification from 'react-native-push-notification';

const NotificationController = () => {
  useEffect(() => {
    console.log('🚀 NotificationController mounted');
    if(Platform.OS === 'ios'){

      // Request permission to receive notifications
      messaging().requestPermission({
        alert: true,
        badge: true,
        sound: true,
      })
      .then(authStatus => {
          const enabled =
              authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
              authStatus === messaging.AuthorizationStatus.PROVISIONAL;

          if (enabled) {
              console.log('Authorization status:', authStatus);
              getFCMToken();
          }
      });
    }else{
    // Request permission for notifications
    requestNotifications(['alert', 'sound'])
      .then(({ status }) => {
        console.log('📩 Notification Permission Status:', status);

        if (status === 'granted') {
          console.log('✅ Permission granted, requesting FCM token...');
          getFCMToken();
        } else {
          console.log('❌ Notification permission denied.');
          Alert.alert('Permissions Required', 'Please enable notifications in settings.');
        }
      })
      .catch(error => console.error('❌ Error requesting notification permissions:', error));
    }

    // 🔔 FOREGROUND NOTIFICATION LISTENER
    const unsubscribeOnMessage = messaging().onMessage(async remoteMessage => {
      console.log('📩 Foreground Notification:', remoteMessage);
      if(Platform.OS === 'ios'){
          // Display the notification
          PushNotification.localNotification({
              title: remoteMessage.notification.title,
              subtitle: remoteMessage.notification.subtitle,
              message: remoteMessage.notification.body,
              userInfo: remoteMessage.data,
          });
      }else{
        let notificationData = {
          'title': remoteMessage.notification?.title,
          'body': remoteMessage.notification?.body,
          'data': remoteMessage.data,
          'icon': 'mipmap/ic_notification'
          // OR 'icon':'drawable/ic_notification'[if image put under drawable folder]
        };
        var willHandleNotification = GenuinSDKPlugin.willHandleForegroundNotifications(notificationData);
        console.log("WillHandleNotification : " + willHandleNotification)
        if (willHandleNotification == true) {
          GenuinSDKPlugin.handleForegroundNotifications(notificationData);
        } else {
          // Your notification handling
        }
      }
    });

    // 🔥 BACKGROUND & QUIT NOTIFICATION HANDLER
    messaging().setBackgroundMessageHandler(async remoteMessage => {
      console.log('📩 Background Notification:', remoteMessage);
    });

    // 📬 When the app is opened from a notification (background state)
    const unsubscribeOnNotificationOpened = messaging().onNotificationOpenedApp(remoteMessage => {
      console.log('📩 Opened from Background Notification:', remoteMessage);
      var willHandleNotification =  GenuinSDKPlugin.willHandleBackgroundNotifications(remoteMessage);
      console.log("WillHandleBackgroundNotification : " + willHandleNotification)
      if (willHandleNotification == true) {
        GenuinSDKPlugin.handleBackgroundNotifications(remoteMessage);
      } else {
        // Your notification handling
      }
    });

    // 📬 When the app is opened from a notification (completely quit state)
    messaging()
      .getInitialNotification()
      .then(remoteMessage => {
        if (remoteMessage) {
          console.log('📩 Opened from Quit State Notification:', remoteMessage);
          var willHandleNotification =  GenuinSDKPlugin.willHandleBackgroundNotifications(remoteMessage);
          console.log("WillHandleBackgroundNotification : " + willHandleNotification)
          if (willHandleNotification == true) {
            GenuinSDKPlugin.handleBackgroundNotifications(remoteMessage);
          } else {
            // Your notification handling
          }
        }
      });

    // Cleanup listeners on unmount
    return () => {
      unsubscribeOnMessage();
      unsubscribeOnNotificationOpened();
    };
  }, []);

  const getFCMToken = () => {
    messaging()
      .registerDeviceForRemoteMessages()
      .then(() => messaging().getToken())
      .then(token => {
        console.log('📩 FCM Token:', token);
        GenuinSDKPlugin.registerFCMToken(token);
      }
      )
      .catch(error => console.error('❌ Error getting FCM token:', error));
  };

  return null;
};

export default NotificationController;

**2. Use RemotePushController.js in your App.tsx **

import { NavigationContainer } from '@react-navigation/native';
import NotificationController from "./RemotePushController";
import React from 'react';

function App(): React.JSX.Element {
    return (
    <NavigationContainer>
        <NotificationController></NotificationController>
    </NavigationContainer>
    );
}

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 React from 'react';
import { View } from 'react-native';
import { ssoLogin } from "genuin-react-native";

function App(): React.JSX.Element {
    ssoLogin("YOUR_SSO_TOKEN");
    return (
    <View>
    </View>
    );
}

6. Handle SSO Logout in SDK

Whenever user logs out from your application call the below method.

import React from 'react';
import { View } from 'react-native';
import { ssoLogout } from "genuin-react-native";

function App(): React.JSX.Element {
    ssoLogout();
    return (
    <View>
    </View>
    );
}