React Native

The DataSapien SDK is available for hybrid React Native apps..

---

General Installation

First, add the SDK to your React Native project via your preferred package manager. This step is common for both platforms.

# Using npm
npm install react-native-datasapien

# Using yarn
yarn add react-native-datasapien

# Using pnpm
pnpm add react-native-datasapien

---

iOS Configuration

The React Native SDK acts as a wrapper around the core Swift Package Manager (SPM) ds-ios-sdk-core module. Because Cocoapods does not automatically resolve SPM dependencies linked inside a React Native pod, you must perform two manual configurations.

1. Add SPM Dependency to your Xcode Project

1. Open your project's workspace in Xcode (your-project/ios/YourProject.xcworkspace).
2. Select your project in the Project Navigator on the left.
3. Select your project name under the Project section (not the app Target).
4. Go to the Package Dependencies tab.
5. Click the + button to add a new package dependency.
6. Enter the repository URL for the core iOS SDK: https://github.com/Data-Sapien/ds-ios-sdk-core.git
7. Choose the appropriate version rule and click Add Package.
8. Ensure the DSSDKCore product is linked to your main app target.

2. Configure Podfile

To instruct Cocoapods to find the pre-built SPM frameworks during the build process, you must update the Framework Search Paths in your Podfile.

Open your ios/Podfile and add the following script block at the end of your target's post_install hook:

target 'YourAppTarget' do
  # ... other react native pod configuration ...

  post_install do |installer|
    # Make sure to keep your existing react_native_post_install block
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false
    )
    
    # 💥 ADD THIS BLOCK: Fix framework search paths for Datasapien SPM Bridge
    installer.pods_project.targets.each do |target|
      if target.name == 'Datasapien'
        target.build_configurations.each do |config|
          config.build_settings['FRAMEWORK_SEARCH_PATHS'] ||= '$(inherited)'
          config.build_settings['FRAMEWORK_SEARCH_PATHS'] << ' "$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)/PackageFrameworks"'
          config.build_settings['FRAMEWORK_SEARCH_PATHS'] << ' "$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)"'
        end
      end
    end
  end
end

3. Install Pods

Navigate to your ios directory and install the Cocoapods:

cd ios
bundle exec pod install

---

Android Configuration

Unlike iOS, Android dependencies mapped in the React Native SDK generally leverage standard Maven artifacts. To ensure the SDK builds properly, follow these setup steps.

1. Update Gradle Build Tools & Repositories

Ensure your root android/build.gradle defines the proper repositories. Add the Data Sapien maven registry if applicable, and ensure mavenCentral() is present.

allprojects {
    repositories {
        google()
        mavenCentral()
        
        // 💥 REQUIRED for Data Sapien SDK
        maven {
            url "https://maven.pkg.github.com/Data-Sapien/*" // Replace with actual registry URL if different
            credentials {
                username = "YOUR_GITHUB_USERNAME"
                password = "YOUR_GITHUB_TOKEN" // Classic PAT with read:packages scope
            }
        }
    }
}

2. Verify Minimum SDK Version

The core Android Data Sapien SDK requires a minimum API level. Ensure your project's android/build.gradle has minSdkVersion set to at least the required level (usually 24 or higher for modern SDKs).

buildscript {
    ext {
        buildToolsVersion = "34.0.0"
        minSdkVersion = 24
        compileSdkVersion = 34
        targetSdkVersion = 34
    }
}

3. Sync and Clean

After making changes to gradle files, synchronize the project:

cd android
./gradlew clean

---

⚡ Usage & Initialization

Once platform-specific configurations are done, you can import and initialize the SDK in your React Native application (e.g., in App.tsx or index.js).

import React, { useEffect } from 'react';
import DataSapien from 'react-native-datasapien';

const App = () => {
  useEffect(() => {
    const initSDK = async () => {
      try {
        const config = {
          auth: {
            url: 'YOUR_AUTH_URL',
            clientId: 'YOUR_CLIENT_ID',
            clientSecret: 'YOUR_CLIENT_SECRET',
            scope: 'YOUR_SCOPE',
          },
          host: {
            url: 'YOUR_API_URL',
            mediaUrl: 'YOUR_MEDIA_URL',
          },
          mainColor: '#FFA500',
          debug: true, // Set to false in Production
        };

        const success = await DataSapien.initialize(config);
        if (success) {
          await DataSapien.setup();
          console.log("Data Sapien SDK initialized successfully!");
        }
      } catch (error) {
        console.error("Failed to initialize SDK:", error);
      }
    };

    initSDK();
  }, []);

  return (
    // Your App Components Layout
  );
};

export default App;