Prerequisites

Before you begin setting up the React Native SDK for Android and iOS, ensure the following prerequisites are met. The files mentioned for the prerequisites are available in the react-native-hydra-lib.git repository.

1. Rename the template files:

• Rename .env.template to .env.
• Rename .npmrc.template to .npmrc.
• Rename .yarnrc.yml.template to .yarnrc.yml.

Place these renamed files in your project's root folder.

2. Configure the.env file:

The .env file requires three properties for your GitHub username and Personal Access Tokens (PATs) for Android and iOS. Ensure the key names match those in .env.template and set their respective values:

HYDRA_GITHUB_USER_NAME=<YOUR_GITHUB_USERNAME>
HYDRA_ANDROID_GITHUB_PAT=<YOUR_ANDROID_GITHUB_TOKEN>
HYDRA_IOS_GITHUB_PAT=<YOUR_IOS_GITHUB_TOKEN>

Alternatively, you can set these three variables in your shell environment (e.g., bash or zsh) using the export commands:

export HYDRA_GITHUB_USER_NAME=<YOUR_GITHUB_USERNAME>
export HYDRA_ANDROID_GITHUB_PAT=<YOUR_ANDROID_GITHUB_TOKEN>
export HYDRA_IOS_GITHUB_PAT=<YOUR_IOS_GITHUB_TOKEN>

Save these commands in your shell's configuration file as a .zshrc or equivalent extension.

3. Configure the.npmrc file:

Make the following changes to your .npmrc file:

//npm.pkg.github.com/:_authToken=<YOUR_RN_GITHUB_TOKEN>
@capillary:registry=https://npm.pkg.github.com

Replace <YOUR_RN_GITHUB_TOKEN> with your React Native GitHub PAT.

4. Configure the.yarnrc.yml file:

If you are using Yarn, the .yarnrc.yml file also requires the GitHub PAT.

📘

Note

The older Yarn versions use .npmrc, while newer versions use .yarnrc.yml.

Add the following scope to the file, if it's not already present:

npmScopes:
    {
    capillary:
        {
        npmRegistryServer: 'https://npm.pkg.github.com',
        npmAuthToken: '<YOUR_RN_GITHUB_TOKEN>',
        },
    }
//Replace <YOUR_RN_GITHUB_TOKEN> with your React Native GitHub PAT.

5. Add package dependency

Add the package dependency to your package.json file:

• For npm:
• Shell

  npm install @capillary/react-native-hydra-lib
  

• For Yarn:
  Shell

  yarn add @capillary/react-native-hydra-lib
  

Platform Specific Setup

Once you have set up the React Native SDK, you can install the platform specific SDKs (Android and iOS).

Installing iOS SDK

To install React Native for iOS, follow these steps:

1. In ios/Podfile, make the following changes:

   1. Add the following lines just below the require block for React Native:

      Ruby

      require Pod::Executable.execute_command('node', ['-p',
        'require.resolve(
          "@capillary/react-native-hydra-lib/scripts/HydraPods.rb",
          {paths: [process.argv[1]]},
        )', __dir__]).strip
      

   2. Add the following lines just below the config = use_native_modules!, in your main target:

      Ruby

      hydra_pods
      

2. Go to the terminal, navigate to the ios folder of your project, and run pod install.

3. Configure the initializer for your Content Management System (CMS) tool. In your AppDelegate.mm, you need to initialize the Hydra SDK.

   1. For Firebase Remote configuration:

      1. Add the import statement at the top of your file:

         Objective-CSwift

         #import <react-native-hydra-lib/HydraNativeInitializer.h>
         

         import react_native_hydra_lib
         

      2. Navigate to the following functions:

         Objective-CSwift

         - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
         

         func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool
         

      3. Replace the following return statements:

         Objective-CSwift

         return [super application:application didFinishLaunchingWithOptions:launchOptions];
         
         // Replace the above with:
         
         BOOL result = [super application:application didFinishLaunchingWithOptions:launchOptions];
         [[HydraNativeInitializer sharedInstance] initApplicationUsingFirebaseRemoteConfig:application 
                                                             didFinishLaunchingWithOptions:launchOptions];
         
         return result;
         

         return super.application(application, didFinishLaunchingWithOptions: launchOptions)
         
         // Replace the above with:
         
         let result = super.application(application, didFinishLaunchingWithOptions: launchOptions)
         HydraNativeInitializer.sharedInstance().initApplication(
             usingFirebaseRemoteConfig: application,
             didFinishLaunchingWithOptions: launchOptions
         )
         
         return result
         

   2. For other CMS tools:

      1. Add the import statement at the top of your file:

         Objective-CSwift

         #import <react-native-hydra-lib/HydraNativeInitializer.h>
         #import <react-native-hydra-lib/HydraNativeRemoteConfig.h>
         

         import react_native_hydra_lib
         

      2. Navigate to the following functions:

         Objective-CSwift

         - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
         

         func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool
         

      3. Replace the following return statements:

         Objective-CSwift

         return [super application:application didFinishLaunchingWithOptions:launchOptions];
         
         //Replace the above with:
         BOOL result = [super application:application didFinishLaunchingWithOptions:launchOptions];
         HydraNativeRemoteConfig *remoteConfig = [[HydraNativeRemoteConfig alloc]
                                                   initWithAccountId:@"<YOUR_ACCOUNT_ID>"
                                                   baseUrl:@"<YOUR_BASE_URL>"
                                                   sslPublicKey:@"<YOUR_SSL_PUBLIC_KEY>"
                                                   remoteLogLevel:0];
         [[HydraNativeInitializer sharedInstance] initApplication:application didFinishLaunchingWithOptions:launchOptions withHydraRemoteConfig:remoteConfig];
         return result;
         

         return super.application(application, didFinishLaunchingWithOptions: launchOptions)
         
         //Replace the above with:
         let result = super.application(application, didFinishLaunchingWithOptions: launchOptions)
         let remoteConfig = HydraNativeRemoteConfig(accountId: "<YOUR_ACCOUNT_ID>", baseUrl: "<YOUR_END_POINT>", sslPublicKey: "<YOUR_SSL_KEY>", remoteLogLevel: 0)
         HydraNativeInitializer.sharedInstance().initApplication(application, didFinishLaunchingWithOptions: launchOptions, withHydraRemoteConfig: remoteConfig)
         return result
         

📘

Note

If you use a version of Xcode earlier than 16, you might encounter import issues in iOS Objective-C classes for this package. To fix the issue you can try either of the following:

• Upgrade Xcode to the latest version (for example, 16.2).
• Change the import statements and create a patch for this package.

Installing Android SDK

To install React Native for Android, follow these steps:

1. In android/app/build.gradle, add the following lines at the bottom of the file:

   apply from: file("../../node_modules/@capillary/react-native-hydra-lib/scripts/hydra_github_setup.gradle")
   

2. In your MainApplication file, you need to initialize the Hydra SDK. Add the following import statements at the top of your file:

   KotlinJava

   import com.hydralib.nativeapis.HydraInitializer
   import com.hydralib.nativeapis.HydraRemoteConfig
   

   import com.hydralib.nativeapis.HydraInitializer;
   import com.hydralib.nativeapis.HydraRemoteConfig;
   

3. Configure the initializer for your Content Management System (CMS) tool.

   1. For Firebase Remote configuration:
      Use this following methods to get the Account ID, SSL Public Key, Base URL, and Remote Log Level from Firebase Remote Config:

      KotlinJava

      HydraInitializer.initializeUsingFirebaseRemoteConfig(this)
      

      HydraInitializer.initializeUsingFirebaseRemoteConfig(this);
      

   2. For other CMS tools:
      Use this following methods to get the Account ID, SSL Public Key, Base URL, and Remote Log Level from your CMS:

      KotlinJava

      val accountId = "your_account_id"
      val baseURL = "your_base_url"
      val sslPublicKey = "your_ssl_public_key"
      val remoteDebugLevel = 0 // For example, 0 for no logs, adjust as needed
      
      HydraRemoteConfig.Builder(
          accountId, baseURL, sslPublicKey, remoteDebugLevel
      ).build().let { remoteConfig ->
          HydraInitializer.initialize(this, remoteConfig)
      }
      

      String accountId = "your_account_id";
      String baseURL = "your_base_url";
      String sslPublicKey = "your_ssl_public_key";
      int remoteDebugLevel = 0; // For example, 0 for no logs, adjust as needed
      
      HydraRemoteConfig remoteConfig = new HydraRemoteConfig.Builder(accountId, baseURL, sslPublicKey, remoteDebugLevel)
              .build();
      
      HydraInitializer.initialize(this, remoteConfig);