@borderfreefinancial/revoconsumermobileapp-test v0.0.96

Setting up the SDK

Follow these steps > bareAndroid app ref : https://nishabe.medium.com/how-to-integrate-react-native-code-with-an-existing-android-app-45a2b7d60887

bare iOS app ref : https://nishabe.medium.com/how-to-integrate-react-native-code-with-an-existing-ios-app-655c61a65b8c

In package.json add these dependecies:

"react": "17.0.2",
"react-native": "0.67.5",
"@react-native-async-storage/async-storage": "^1.15.14",
"@react-native-community/masked-view": "0.1.10",
"@react-native-community/netinfo": "^9.3.7",
"react-native-fast-image": "^8.5.11",
"react-native-gesture-handler": "^2.8.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-reanimated": "2.13.0",
"react-native-safe-area-context": "4.3.1",
"react-native-svg": "^12.3.0",
"react-native-video": "^5.2.1",
"react-native-webview": "^11.23.1"

Create a file named babel.config.js in root level and add this :

    module.exports = {
        presets: [['module:metro-react-native-babel-preset']],
        plugins: ['react-native-reanimated/plugin'],
    };

Create a file named react-native.config.js in root level and add this :

    module.exports = {
        dependencies: {
            'react-native-video': {
            platforms: {
                android: {
                sourceDir: '../node_modules/react-native-video/android-exoplayer',
                },
            },
            },
        },
    };

In build.gradle (outer) :

    def REACT_NATIVE_VERSION = new File(['node', '--print',"JSON.parse(require('fs').readFileSync(require.resolve('react-native/package.json'), 'utf-8')).version"].execute(null, rootDir).text.trim())

    allprojects {
        configurations.all {
            resolutionStrategy {
                force "com.facebook.react:react-native:" + REACT_NATIVE_VERSION
            }
        }
        repositories {
            mavenLocal()
            maven {
                // All of React Native (JS, Android binaries) is installed from npm
                url ("$rootDir/../node_modules/react-native/android")
            }
            maven {
                // Android JSC is installed from npm
                url("$rootDir/../node_modules/jsc-android/dist")
            }
            google()
            jcenter()
            mavenCentral()
            maven { url 'https://www.jitpack.io' }

        }
    }

Our build.gradle (app) >

• Add these lines in dependencies : implementation "com.facebook.react:react-native:+" // From node_modules implementation ("androidx.appcompat:appcompat:1.3.1") { version { strictly '1.3.1' } } if (enableHermes) { def hermesPath = "../../node_modules/hermes-engine/android/"; debugImplementation files(hermesPath + "hermes-debug.aar") releaseImplementation files(hermesPath + "hermes-release.aar") } else { implementation jscFlavor }

• Enable Hermes Engine switch option , So it looks like this atleast if it's a bare native app. For react native apps, it should be auto handled >>>

    plugins {
        id 'com.android.application'
    }
  
    project.ext.react = [
            enableHermes: false,  // clean and rebuild if changing
    ]
    def jscFlavor = 'org.webkit:android-jsc:+'
  
    def enableHermes = project.ext.react.get("enableHermes", false);
  
    android {
        namespace 'com.example.myapplication'
        compileSdk 33
  
        defaultConfig {
            applicationId "com.example.myapplication"
            minSdk 21
            targetSdk 33
            versionCode 2
            versionName "2.0"
  
            testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        }
  
        buildTypes {
            release {
                minifyEnabled false
                proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
            }
        }
        compileOptions {
            sourceCompatibility JavaVersion.VERSION_1_8
            targetCompatibility JavaVersion.VERSION_1_8
        }
    }
  
    dependencies {
        implementation 'com.google.android.material:material:1.7.0'
        implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
        testImplementation 'junit:junit:4.13.2'
        androidTestImplementation 'androidx.test.ext:junit:1.1.4'
        androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.0'
        implementation "com.facebook.react:react-native:+" // From node_modules
        implementation ("androidx.appcompat:appcompat:1.3.1") {
            version {
                strictly '1.3.1'
            }
        }
        if (enableHermes) {
            def hermesPath = "../../node_modules/hermes-engine/android/";
            debugImplementation files(hermesPath + "hermes-debug.aar")
            releaseImplementation files(hermesPath + "hermes-release.aar")
        } else {
            implementation jscFlavor
        }
  
    }
    apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

AndroidManifest.xml

• Write android:exported="true" in the actvity eg:

For Bare Native Android Apps, setup requires to link dependencies manually >

• In MyReactActivity/Custom Activity File import React Native Video Package ->

    package com.example.myapplication;
    import android.app.Activity;
    import android.os.Bundle;
    import com.facebook.react.PackageList;
    import com.facebook.react.ReactInstanceManager;
    import com.facebook.react.ReactPackage;
    import com.facebook.react.ReactRootView;
    import com.facebook.react.common.LifecycleState;
    import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
    import com.facebook.soloader.SoLoader;
    import com.brentvatne.react.ReactVideoPackage;
    import java.util.List;

    public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
        private ReactRootView mReactRootView;
        private static ReactInstanceManager mReactInstanceManager;


        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            SoLoader.init(this, false);

            mReactRootView = new ReactRootView(this);
            List<ReactPackage> packages = new PackageList(getApplication()).getPackages();
            // Packages that cannot be autolinked yet can be added manually here, for example:
            packages.add(new ReactVideoPackage());
            // packages.add(new MyReactNativePackage());
            // Remember to include them in `settings.gradle` and `app/build.gradle` too.

            mReactInstanceManager = ReactInstanceManager.builder()
                    .setApplication(getApplication())
                    .setCurrentActivity(this)
                    .setBundleAssetName("index.android.bundle")
                    .setJSMainModulePath("index")
                    .addPackages(packages)
                    .setUseDeveloperSupport(BuildConfig.DEBUG)
                    .setInitialLifecycleState(LifecycleState.RESUMED)
                    .build();
            // The string here (e.g. "MyReactNativeApp") has to match
            // the string in AppRegistry.registerComponent() in index.js
            mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);

            setContentView(mReactRootView);
        }

        @Override
        public void invokeDefaultOnBackPressed() {
            super.onBackPressed();
        }

    }

• Note : All other packages get linked from node modules directly, apart from react-native-reanimated. reanimated was not working if we add it as a package in a CustomActivity. We made it work by making the Application a ReactApplication but if you find a workaround skip the MainApplicatio changes and add reanimated directly in your Activities.

  ref : https://github.com/software-mansion/react-native-reanimated/issues/2719

• MainApplication File >

    package com.example.myapplication;
    import android.app.Application;
    import com.facebook.react.PackageList;
    import com.facebook.react.ReactApplication;
    import com.facebook.react.ReactNativeHost;
    import com.facebook.react.ReactPackage;
    import com.facebook.soloader.SoLoader;
    import java.util.List;
    import com.facebook.react.bridge.JSIModulePackage; // <- add
    import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add
    public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost =
        new ReactNativeHost(this) {
            @Override
            public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
            }
            @Override
            protected List<ReactPackage> getPackages() {
            @SuppressWarnings("UnnecessaryLocalVariable")
            List<ReactPackage> packages = new PackageList(this).getPackages();
            // Packages that cannot be autolinked yet can be added manually here, for example:
            // packages.add(new MyReactNativePackage());
            return packages;
            }
            @Override
            protected String getJSMainModuleName() {
            return "index";
            }
            @Override
            protected JSIModulePackage getJSIModulePackage() {
                return new ReanimatedJSIModulePackage(); // <- add
            }
        };
    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false);
    }
  
    }

Link the component to your index.js file in this way >

    import React from "react";
    import { SafeAreaView } from "react-native";
    import RevoConsumerUI from "@borderfreefinancial/revoconsumermobileapp-test";
    import { SafeAreaProvider } from "react-native-safe-area-context";
    import { AppRegistry, LogBox } from "react-native";
    import { gestureHandlerRootHOC } from "react-native-gesture-handler";
    LogBox.ignoreAllLogs();
    AppRegistry.registerComponent("MyReactNativeApp", () =>
    gestureHandlerRootHOC(() => {
        return (
        <SafeAreaProvider>
            <SafeAreaView style={{flex: 1}}>
                <RevoConsumerUI
                    groupID={"test-borderfree"}
                    eventID={"73335974189649"}
                />
            </SafeAreaView>
        </SafeAreaProvider>
        );
    })
    );

Add these fonts in Info.plist && also update it in BuildPhases/CopyBundleResources

    	<string>Inter-Black.ttf</string>
        <string>Inter-Bold.otf</string>
        <string>Inter-ExtraBold.ttf</string>
        <string>Inter-Medium.otf</string>
        <string>Inter-Regular.otf</string>
        <string>Inter-SemiBold.otf</string>

also add this

        <key>UIViewControllerBasedStatusBarAppearance</key>
        <false/>

For Bare Native iOS Apps

• Link the react native dependencies manually in Podfile

    require_relative '../node_modules/react-native/scripts/react_native_pods'
    require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
    target 'IOSAPP3' do
        use_frameworks! :linkage => :static
        use_react_native!(:hermes_enabled => false)
    pod 'react-native-video', :path => '../node_modules/react-native-video'
    pod 'react-native-webview', :path => '../node_modules/react-native-webview'
    pod 'RNSVG', :path => '../node_modules/react-native-svg'
    pod 'RNFastImage', :path => '../node_modules/react-native-fast-image'
    pod 'react-native-safe-area-context', :path => '../node_modules/react-native-safe-area-context'
    pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'
    pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-async-storage/async-storage'
    pod 'RNReanimated', :path => '../node_modules/react-native-reanimated'
    pod 'RNCMaskedView', :path => '../node_modules/@react-native-community/masked-view'
    pod 'react-native-netinfo', :path=> '../node_modules/@react-native-community/netinfo'
    pod 'BVLinearGradient', :path=>'../node_modules/react-native-linear-gradient'
    end

• Run pod install

• Add this in App Delegate.swift

    `var window: UIWindow? // HERE, add if it's not available. So it looks like this > `

  import UIKit

    @main
    class AppDelegate: UIResponder, UIApplicationDelegate {
  
        var window: UIWindow? // HERE, add it if it's not available.

        func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
            // Override point for customization after application launch.
            return true
        }

        // MARK: UISceneSession Lifecycle

        func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
            // Called when a new scene session is being created.
            // Use this method to select a configuration to create the new scene with.
            return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
        }

        func application(_ application: UIApplication, didDiscardSceneSessions sceneSessions: Set<UISceneSession>) {
            // Called when the user discards a scene session.
            // If any sessions were discarded while the application was not running, this will be called shortly after application:didFinishLaunchingWithOptions.
            // Use this method to release any resources that were specific to the discarded scenes, as they will not return.
        }
    }

• Our ViewController.swift file >

    import UIKit
    import React
  
    class ViewController: UIViewController, RCTBridgeDelegate {
        func sourceURL(for bridge: RCTBridge!) -> URL! {
            #if DEBUG
                return RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index", fallbackResource: nil)
            #else
                return Bundle.main.url(forResource: "main", withExtension: "jsbundle")
            #endif
        }
        override func viewDidLoad() {
            super.viewDidLoad()
            // Do any additional setup after loading the view.
        }
        override func loadView() {
            loadReactNativeView()
        }
        func loadReactNativeView() {
            let rctBridge = RCTBridge(delegate: self, launchOptions: nil)
            let rootView = RCTRootView(bridge: rctBridge!, moduleName: "MyReactNativeApp", initialProperties: nil)
            self.view = rootView
        }
    }
  
    The moduleName should be the same as the registered App component in JS file (eg : "MyReactNativeApp" here)