Supporting IDWise In Expo: A Comprehensive Guide

Dec 4, 2025 by Alex Johnson 49 views

Integrating third-party SDKs into Expo managed workflows can sometimes be challenging. This article provides a comprehensive guide on how to seamlessly integrate the IDWise SDK into your Expo project. We will walk you through the process of creating a custom Expo config plugin that automates the injection of required native code for both iOS and Android platforms, as outlined in the IDWise documentation. This ensures a smooth and efficient integration process, allowing you to leverage the powerful identity verification capabilities of IDWise within your Expo applications.

Understanding Expo Config Plugins

Before diving into the specifics of integrating IDWise, it’s crucial to understand what Expo config plugins are and why they are essential for managed workflows. Expo config plugins are essentially JavaScript functions that modify the Expo configuration files, such as app.json or app.config.js(ts), and the underlying native project files for iOS and Android. This allows developers to automate complex native configurations that would otherwise require manual intervention, which goes against the principles of a managed workflow.

Config plugins are particularly useful when integrating SDKs that require modifications to the native project structure, such as adding dependencies, setting permissions, or configuring build settings. By encapsulating these modifications within a plugin, you can easily apply them to your project and maintain a clean and manageable codebase. This approach is crucial for ensuring that your Expo project remains compatible with future Expo updates and that the integration process is repeatable and consistent across different environments. Furthermore, config plugins enhance collaboration among team members by providing a standardized way to handle native configurations, reducing the risk of errors and inconsistencies.

Implementing the IDWise Expo Config Plugin

To fully support the IDWise SDK in your Expo project, a custom config plugin is necessary to automate the required native code injections for both iOS and Android. This section will guide you through the implementation of such a plugin, breaking down the code and explaining each step in detail.

The provided code snippet demonstrates a well-structured config plugin named withIdwise.js that handles the necessary native setup for IDWise. This plugin leverages several utility functions from the @expo/config-plugins package, such as withProjectBuildGradle, withAppBuildGradle, withAndroidManifest, withDangerousMod, and withPlugins. These functions allow the plugin to modify various aspects of the native project, including Gradle files, AndroidManifest.xml, and Podfile, ensuring that the IDWise SDK is properly integrated.

The plugin is divided into two main parts: withIDWiseAndroid and withIDWiseIOS, each responsible for handling the platform-specific configurations. By encapsulating the platform-specific logic, the plugin ensures that the correct modifications are applied based on the target platform, maintaining consistency and reducing the risk of platform-related issues. This modular approach also makes the plugin easier to maintain and extend, as new features or updates can be added without affecting the core functionality.

Android Configuration (`withIDWiseAndroid`)

The withIDWiseAndroid function is responsible for configuring the Android-specific requirements of the IDWise SDK. This includes adding Maven repositories, enabling MultiDex, and setting up data binding. Let's break down each step:

Adding Maven Repositories: The IDWise SDK is hosted on a custom Maven repository, which needs to be added to the project-level build.gradle file. The withProjectBuildGradle function is used to modify this file. The plugin searches for the allprojects { repositories { block and injects the IDWise Maven repository URL. This ensures that the Android build system can locate and download the IDWise SDK.
Enabling MultiDex: MultiDex is required for apps that exceed the 64K method limit in Android. The plugin uses withAppBuildGradle to modify the app-level build.gradle file, enabling multiDexEnabled true in the defaultConfig block. This is crucial for larger applications that incorporate multiple SDKs and libraries.
Setting up Data Binding: Data binding simplifies the process of accessing data in layouts. The plugin adds the dataBinding feature within the android { buildFeatures { block in the app-level build.gradle file. This allows developers to use data binding expressions in their layouts, improving code readability and maintainability.
Adding Google ML Kit Vision Dependencies: The IDWise SDK relies on Google ML Kit Vision for certain functionalities. The plugin uses withAndroidManifest to add the necessary meta-data to the AndroidManifest.xml file. This ensures that the required ML Kit dependencies, such as ocr, face, custom_ica, and barcode_ui, are included in the application.

iOS Configuration (`withIDWiseIOS`)

The withIDWiseIOS function configures the iOS-specific requirements of the IDWise SDK. This primarily involves adding the IDWise iOS SDK source to the Podfile.

Adding Podfile Sources: The IDWise iOS SDK is hosted on a custom CocoaPods repository. The withDangerousMod function is used to modify the Podfile, adding the IDWise repository URL. This ensures that CocoaPods can locate and install the IDWise SDK. The plugin checks if the repository URL is already present to avoid duplicates, maintaining the integrity of the Podfile.

Combining Platform-Specific Configurations (`withIDWise`)

The withIDWise function serves as the main entry point for the plugin. It uses the withPlugins function to combine the Android and iOS configurations, ensuring that both platforms are properly configured when the plugin is applied. This function streamlines the plugin application process, making it easier to manage and maintain the plugin.

Applying the IDWise Expo Config Plugin

Once the withIdwise.js plugin is implemented, you need to apply it to your Expo project. This involves creating a file named app.plugin.js (or app.plugin.ts for TypeScript projects) in the root of your project and exporting the plugin.

The app.plugin.js file acts as a bridge between your Expo configuration and the custom plugin. By exporting the plugin from this file, you instruct Expo to apply the plugin during the build process. This ensures that the necessary native modifications are made before the application is built, guaranteeing that the IDWise SDK is properly integrated.

To apply the plugin, you also need to update your app.json or app.config.js(ts) file to include the plugin. This is done by adding the plugin to the plugins array in the Expo configuration. For example:

{
  "expo": {
    "name": "YourAppName",
    "slug": "your-app-slug",
    "version": "1.0.0",
    "plugins": [
      "./app.plugin.js"
    ],
    // ... other Expo configurations
  }
}

By including the plugin in the plugins array, you ensure that it is applied whenever you build or update your Expo application. This makes the integration process seamless and repeatable, allowing you to focus on developing your application rather than dealing with complex native configurations.

Step-by-Step Guide: Integrating IDWise with Expo

To make the integration process even clearer, here’s a step-by-step guide on how to integrate the IDWise SDK into your Expo project:

Install Dependencies: Begin by installing the necessary dependencies for your Expo project, including the @expo/config-plugins package. This package provides the utility functions needed to create and apply config plugins.
```
npx expo install @expo/config-plugins
```
Create the Plugin File: Create a directory named plugin in the root of your project and add the withIdwise.js file inside it. This file will contain the implementation of your custom Expo config plugin.
```
mkdir plugin
touch plugin/withIdwise.js
```
Implement the Plugin: Copy the code provided earlier for withIdwise.js into the file you just created. This code defines the logic for modifying the native project files for both Android and iOS.
Create app.plugin.js: Create a file named app.plugin.js in the root of your project. This file will export your custom Expo config plugin.
```
touch app.plugin.js
```
Export the Plugin: Add the following code to app.plugin.js to export the plugin:
```
module.exports = require('./plugin/dist/withIdwise.js');
```

Update app.json or app.config.js(ts): Modify your app.json or app.config.js(ts) file to include the plugin in the plugins array. This tells Expo to apply the plugin during the build process.

{
  "expo": {
    "name": "YourAppName",
    "slug": "your-app-slug",
    "version": "1.0.0",
    "plugins": [
      "./app.plugin.js"
    ],
    // ... other Expo configurations
  }
}

Install Pods (iOS): If you are building for iOS, you need to install the CocoaPods dependencies. This step ensures that the IDWise iOS SDK is properly linked to your project.
```
cd ios
pod install
cd ..
```
Build Your App: Now you can build your Expo app. Expo will automatically apply the config plugin, making the necessary native modifications.
```
npx expo run:android
# or
npx expo run:ios
```

By following these steps, you can seamlessly integrate the IDWise SDK into your Expo project, leveraging its powerful identity verification capabilities. The use of a custom Expo config plugin ensures a clean, repeatable, and maintainable integration process.

Conclusion

Integrating the IDWise SDK into an Expo managed workflow is made straightforward with the use of custom config plugins. By automating the native code injection for both iOS and Android, developers can ensure a seamless and efficient integration process. This guide has walked you through the implementation and application of such a plugin, providing a clear and repeatable method for incorporating IDWise's identity verification capabilities into your Expo applications.

For further information on Expo config plugins, you can visit the Expo documentation.