Add support for Expo projects

Author: d3ce1t

CONTRIBUTING.md

@@ -14,7 +14,7 @@ bundle install
 bundle exec pod install
 
 # Build Android and iOS example app
-yarn ../..
+cd - # Go back to the root directory of the repo
 yarn build:android
 yarn build:ios
 ```
@@ -40,9 +40,9 @@ The [example app](/example/) demonstrates usage of the library. You need to run
 
 It is configured to use the local version of the library, so any changes you make to the library's source code will be reflected in the example app. Changes to the library's JavaScript code will be reflected in the example app without a rebuild, but native code changes will require a rebuild of the example app.
 
-If you want to use Android Studio or XCode to edit the native code, you can open the `example/android` or `example/ios` directories respectively in those editors. To edit the Objective-C or Swift files, open `example/ios/TrackingplanReactNativeExample.xcworkspace` in XCode and find the source files at `Pods > Development Pods > trackingplan-react-native`.
+If you want to use Android Studio or XCode to edit the native code, you can open the `example/android` or `example/ios` directories respectively in those editors. To edit the Objective-C or Swift files, open `example/ios/TrackingplanReactNativeExample.xcworkspace` in XCode and find the source files at `Pods > Development Pods > TrackingplanReactNative`.
 
-To edit the Java or Kotlin files, open `example/android` in Android studio and find the source files at `trackingplan-react-native` under `Android`.
+To edit the Java or Kotlin files, open `example/android` in Android studio and find the source files at `trackingplan_react-native` under `Android`.
 
 You can use various commands from the root directory to work with the project.
 

README.md

@@ -3,10 +3,10 @@
 ## Table of Contents
 
 - [Requirements](#requirements)
-- [Installation](#Installation)
-  - [Android](#android)
-  - [iOS](#ios)
-- [Autolinking & Rebuilding](#autolinking--rebuilding)
+- [Installation](#installation)
+  - [Choose Your Project Type](#choose-your-project-type)
+  - [Expo Projects](#expo-projects)
+  - [React Native CLI Projects](#react-native-cli-projects)
 - [Usage](#usage)
 - [Need Help?](#need-help)
 - [Learn More](#learn-more)
@@ -19,7 +19,24 @@
 
 ## Installation
 
-Install the Trackingplan for React Native SDK with NPM or Yarn:
+### Choose Your Project Type
+
+Before proceeding, identify your project type:
+
+- **Expo Projects**: Use Expo CLI, have an `app.json` or `app.config.js` file, and may use EAS Build
+- **React Native CLI Projects**: Use React Native CLI, have separate `android/` and `ios/` directories
+
+---
+
+## Expo Projects
+
+**Requirements for Expo:**
+
+- Expo SDK 50+
+- Custom development builds (Expo plugins require custom native code)
+- ⚠️ **Note**: This will NOT work with Expo Go due to native dependencies
+
+### Step 1: Install the Package
 
 ```sh
 # Using npm
@@ -29,91 +46,163 @@ npm install --save @trackingplan/react-native
 yarn add @trackingplan/react-native
 ```
 
-Follow the instructions in the next sections to configure Trackingplan in Android and iOS.
+### Step 2: Configure the Expo Plugin
+
+Add the plugin to your `app.config.js` or `app.json`. Replace `YOUR_TP_ID` with your actual Trackingplan ID (found in your Trackingplan dashboard).
+
+**Option A: app.config.js**
+
+```javascript
+export default {
+  expo: {
+    name: 'Your App',
+    // ... other config
+    plugins: [
+      [
+        '@trackingplan/react-native',
+        {
+          tpId: 'YOUR_TP_ID', // Replace with your actual Trackingplan ID
+        },
+      ],
+    ],
+  },
+};
+```
 
-### Android
+**Option B: app.json**
+
+```json
+{
+  "expo": {
+    "name": "Your App",
+    "plugins": [
+      [
+        "@trackingplan/react-native",
+        {
+          "tpId": "YOUR_TP_ID"
+        }
+      ]
+    ]
+  }
+}
+```
 
-1. Open your `/android/build.gradle` to include the Trackingplan adapter.
+### Step 3: Rebuild Your Project
 
-Add the adapter dependency:
+```sh
+# For development builds
+npx expo run:android
+npx expo run:ios
 
-```gradle
-// Add this to your project's root build.gradle
-buildscript {
-    ext {
-        // ... other ext properties
-        trackingplanVersion = findProject(':trackingplan-react-native').ext.get('trackingplanVersion')
-    }
-    dependencies {
-        // ... other dependencies
-        classpath "com.trackingplan.client:adapter:$trackingplanVersion"
-    }
-}
+# For EAS builds
+eas build --platform android
+eas build --platform ios
 ```
 
-> **Important:** The above approach is recommended to add the Trackingplan adapter. If you choose to hardcode a version string instead of using the programmatic approach, you MUST ensure that it exactly matches the version used by trackingplan-react-native, otherwise your app may experience compatibility issues.
+### ✅ Expo Setup Complete!
 
-2. Modify your `/android/app/build.gradle` to apply the Trackingplan Gradle plugin.
+The Expo plugin automatically handles:
 
-```gradle
-// ... other plugins
-apply plugin: "com.trackingplan.client"
-```
+- Android Gradle dependencies and configuration
+- iOS CocoaPods dependency
+- Native initialization code with your Trackingplan ID
 
-3. Open your `/android/app/src/main/java/com/{projectName}/MainApplication.kt` and add the following:
+**No additional configuration needed!**
 
-At the top of the file, import the Trackingplan SDK:
+---
 
-```kotlin
-import com.trackingplan.client.sdk.Trackingplan;
-```
+## React Native CLI Projects
 
-Within your existing `onCreate` method, add the following right after `super.onCreate()`:
+For React Native CLI projects, manual native configuration is required.
 
-```kotlin
-override fun onCreate() {
-  super.onCreate()
-  Trackingplan.init("YOUR_TP_ID").start(this)
-  // ...other code
-}
+### Step 1: Install the Package
+
+```sh
+# Using npm
+npm install --save @trackingplan/react-native
+
+# Using yarn
+yarn add @trackingplan/react-native
 ```
 
-### iOS
+### Step 2: Android Configuration
 
-Open your `/ios/{projectName}/AppDelegate.swift` file and add the following:
+1. **Update root build.gradle**
 
-At the top of the file, import the Trackingplan SDK:
+   Open `/android/build.gradle` and add the Trackingplan adapter:
 
-```swift
-import Trackingplan
-```
+   ```gradle
+   buildscript {
+       ext {
+           // ... other ext properties
+           trackingplanVersion = findProject(':trackingplan_react-native').ext.get('trackingplanVersion')
+       }
+       dependencies {
+           // ... other dependencies
+           classpath "com.trackingplan.client:adapter:$trackingplanVersion"
+       }
+   }
+   ```
+
+   > **Important:** Use the programmatic approach above to ensure version compatibility. Hardcoding a version string may cause compatibility issues.
+
+2. **Apply the Gradle plugin**
+
+   Modify `/android/app/build.gradle`:
+
+   ```gradle
+   // ... other plugins
+   apply plugin: "com.trackingplan.client"
+   ```
 
-Within your existing `application` method, add the following to the top of the method:
+3. **Initialize in MainApplication**
+
+   Open `/android/app/src/main/java/com/{projectName}/MainApplication.kt`:
+
+   ```kotlin
+   import com.trackingplan.client.sdk.Trackingplan // Add this import
+
+   class MainApplication : Application(), ReactApplication {
+       override fun onCreate() {
+           super.onCreate()
+           Trackingplan.init("YOUR_TP_ID").start(this) // Add this line
+           // ...other code
+       }
+   }
+   ```
+
+### Step 3: iOS Configuration
+
+Open `/ios/{projectName}/AppDelegate.swift`:
 
 ```swift
-func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil) -> Bool {
-    Trackingplan.initialize(tpId: "YOUR_TP_ID")
-    // ...other code
+import Trackingplan // Add this import
+
+@main
+class AppDelegate: UIResponder, UIApplicationDelegate {
+    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil) -> Bool {
+        Trackingplan.initialize(tpId: "YOUR_TP_ID") // Add this line
+        // ...other code
+        return true
+    }
 }
 ```
 
-## Autolinking & Rebuilding
-
-Once the above steps have been completed, the Trackingplan for React Native SDK must be linked to your project and your application needs to be rebuilt.
-
-To automatically link the package, rebuild your project:
+### Step 4: Link and Rebuild
 
-```console
-# Android apps
+```sh
+# For Android
 npx react-native run-android
 
-# iOS apps
+# For iOS
 cd ios/
 pod install --repo-update
 cd ..
 npx react-native run-ios
 ```
 
+### ✅ React Native CLI Setup Complete!
+
 ## Usage
 
 At this point, your app is ready to start monitoring traffic sent to your data destinations with Trackingplan.

android/build.gradle

@@ -76,7 +76,7 @@ def trackingplan_version = ext.trackingplanVersion
 dependencies {
   implementation "com.facebook.react:react-android"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-  implementation "com.trackingplan.client:sdk:$trackingplan_version"
+  api "com.trackingplan.client:sdk:$trackingplan_version"
 }
 
 react {

app.plugin.js

@@ -0,0 +1 @@
+module.exports = require('./plugin/build');

eslint.config.mjs

@@ -33,9 +33,6 @@ export default defineConfig([
     },
   },
   {
-    ignores: [
-      'node_modules/',
-      'lib/'
-    ],
+    ignores: ['node_modules/', 'lib/'],
   },
 ]);

example/README.md

@@ -42,7 +42,7 @@ The first time you create a new project, run the Ruby bundler to install CocoaPo
 bundle install
 ```
 
-Then, and every time you update your native dependencies, run:
+Then, and every time you update your native dependencies, run (from your ios directory):
 
 ```sh
 bundle exec pod install

example/android/app/src/main/java/trackingplanreactnative/example/MainApplication.kt

@@ -11,30 +11,32 @@ import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
 import com.facebook.react.defaults.DefaultReactNativeHost
 import com.facebook.react.soloader.OpenSourceMergedSoMapping
 import com.facebook.soloader.SoLoader
+import com.trackingplan.client.sdk.Trackingplan
 
 class MainApplication : Application(), ReactApplication {
 
   override val reactNativeHost: ReactNativeHost =
-      object : DefaultReactNativeHost(this) {
-        override fun getPackages(): List<ReactPackage> =
-            PackageList(this).packages.apply {
-              // Packages that cannot be autolinked yet can be added manually here, for example:
-              // add(MyReactNativePackage())
-            }
+    object : DefaultReactNativeHost(this) {
+      override fun getPackages(): List<ReactPackage> =
+        PackageList(this).packages.apply {
+          // Packages that cannot be autolinked yet can be added manually here, for example:
+          // add(MyReactNativePackage())
+        }
 
-        override fun getJSMainModuleName(): String = "index"
+      override fun getJSMainModuleName(): String = "index"
 
-        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
+      override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
 
-        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
-        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
-      }
+      override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+      override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
+    }
 
   override val reactHost: ReactHost
     get() = getDefaultReactHost(applicationContext, reactNativeHost)
 
   override fun onCreate() {
     super.onCreate()
+    Trackingplan.init("TP3708250").enableDebug().start(this) // Add this line
     SoLoader.init(this, OpenSourceMergedSoMapping)
     if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
       // If you opted-in for the New Architecture, we load the native entry point for this app.

example/android/build.gradle

@@ -6,7 +6,7 @@ buildscript {
         targetSdkVersion = 35
         ndkVersion = "27.1.12297006"
         kotlinVersion = "2.0.21"
-        trackingplanVersion = findProject(":trackingplan-react-native").ext.get("trackingplanVersion")
+        trackingplanVersion = findProject(":trackingplan_react-native").ext.get("trackingplanVersion")
     }
     repositories {
         google()

example/ios/Podfile.lock

@@ -1656,7 +1656,7 @@ PODS:
     - React-utils (= 0.79.2)
   - SocketRocket (0.7.1)
   - Trackingplan (1.4.1)
-  - TrackingplanReactNative (0.1.0):
+  - TrackingplanReactNative (0.1.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1980,7 +1980,7 @@ SPEC CHECKSUMS:
   ReactCommon: 76d2dc87136d0a667678668b86f0fca0c16fdeb0
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Trackingplan: b43e2d62090dc36d3fac3efcdef27cdbfd7d5712
-  TrackingplanReactNative: 9f6d3a75cac2c2858a24beacc3188a7bda96ee3e
+  TrackingplanReactNative: 79eb434c8d3ecc3e5333108a7812e53e2a233540
   Yoga: c758bfb934100bb4bf9cbaccb52557cee35e8bdf
 
 PODFILE CHECKSUM: 75042b8ee069f7c96c6dd0fa588b0b8f798528f9

example/ios/TrackingplanReactNativeExample/AppDelegate.swift

@@ -2,6 +2,7 @@ import UIKit
 import React
 import React_RCTAppDelegate
 import ReactAppDependencyProvider
+import Trackingplan
 
 @main
 class AppDelegate: UIResponder, UIApplicationDelegate {
@@ -14,6 +15,7 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
     _ application: UIApplication,
     didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
   ) -> Bool {
+    Trackingplan.initialize(tpId: "TP3708250", debug: true)
     let delegate = ReactNativeDelegate()
     let factory = RCTReactNativeFactory(delegate: delegate)
     delegate.dependencyProvider = RCTAppDependencyProvider()