From 80a00300891890e65696169ddd15a42d541d92d6 Mon Sep 17 00:00:00 2001 From: Nicolas Girardot Date: Mon, 29 Sep 2025 14:52:41 +0200 Subject: [PATCH 1/6] feat/add-react-native-docs --- docs.json | 4 +- getting-started/mobile-sdk.mdx | 38 ++- getting-started/react-native-sdk.mdx | 452 +++++++++++++++++++++++++++ getting-started/sdk.mdx | 21 +- package-lock.json | 232 ++++++++++---- package.json | 2 +- 6 files changed, 674 insertions(+), 75 deletions(-) create mode 100644 getting-started/react-native-sdk.mdx diff --git a/docs.json b/docs.json index 6575316..017a669 100644 --- a/docs.json +++ b/docs.json @@ -103,7 +103,9 @@ "pages": [ "getting-started/sdk", "getting-started/js-sdk", - "getting-started/react-sdk" + "getting-started/react-sdk", + "getting-started/react-native-sdk", + "getting-started/mobile-sdk" ] }, "getting-started/component-configuration", diff --git a/getting-started/mobile-sdk.mdx b/getting-started/mobile-sdk.mdx index 7182114..edb0bd5 100644 --- a/getting-started/mobile-sdk.mdx +++ b/getting-started/mobile-sdk.mdx @@ -1,16 +1,34 @@ ---- -title: Mobile SDK -description: Integrate Edgee with a mobile application. -icon: mobile ---- - -import EdgeeSdk from '/snippets/edgee-sdk.mdx'; -We're currently working on native mobile SDKs for iOS and Android that will allow you -to implement data collection in your mobile app. +Edgee provides comprehensive mobile SDKs that allow you to implement data collection in your mobile applications with rich native context and privacy-first design. + +## Available Mobile SDKs + + + + Full-featured SDK for React Native applications with 30+ native data points, offline queue, and automatic screen tracking. + + + +### React Native SDK Features + +Our React Native SDK provides: + +- **Rich Native Context**: Automatically collects device, app, and system information +- **Privacy-First**: GDPR/CCPA compliant with optional device ID collection +- **Offline Queue**: Events are persisted and retried when network is available +- **Lightweight**: Minimal impact on app size (~100KB total) +- **Type-Safe**: Full TypeScript support with comprehensive type definitions +- **Auto Screen Tracking**: Optional helpers for Expo Router and React Navigation +- **Graceful Fallback**: Works without native modules (Expo Go compatible) + +[Get started with React Native SDK →](/getting-started/react-native-sdk) + +## Native iOS and Android SDKs + +We're currently working on native mobile SDKs for iOS and Android that will provide even deeper system integration. -In the meantime, you can directly integrate with the data collection API of your Edgee project. +In the meantime, you can directly integrate with the data collection API of your Edgee project for native iOS and Android apps. [Learn more about data collection API.](/api-reference/data-collection/) diff --git a/getting-started/react-native-sdk.mdx b/getting-started/react-native-sdk.mdx new file mode 100644 index 0000000..57e2708 --- /dev/null +++ b/getting-started/react-native-sdk.mdx @@ -0,0 +1,452 @@ + + + +For React Native applications, we provide a comprehensive SDK that enables seamless data collection with rich native context. This SDK automatically collects 30+ device and app data points while maintaining privacy compliance and optimal performance. + +## Features + +- **Rich Native Context**: Automatically collects device, app, and system information +- **Privacy-First**: GDPR/CCPA compliant with optional device ID collection +- **Offline Queue**: Events are persisted and retried when network is available +- **Lightweight**: Minimal impact on app size (~100KB total) +- **Type-Safe**: Full TypeScript support with comprehensive type definitions +- **Auto Screen Tracking**: Optional helpers for Expo Router and React Navigation +- **Graceful Fallback**: Works without native modules (Expo Go compatible) + +## Installation + +### Step 1: Install Package & Dependencies + + + +```bash npm +npm install react-native-edgee @react-native-async-storage/async-storage @react-native-community/netinfo +``` + +```bash yarn +yarn add react-native-edgee @react-native-async-storage/async-storage @react-native-community/netinfo +``` + +```bash expo +npx expo install react-native-edgee @react-native-async-storage/async-storage @react-native-community/netinfo +``` + + + +### Step 2: Platform Setup + +Choose your platform setup based on your React Native environment: + + + + **iOS:** + ```bash + cd ios && pod install && cd .. + ``` + + **Android:** + + 1. **Add native module** to `android/app/src/main/java/.../MainApplication.java`: + + ```java + import com.reactnativeedgee.EdgeeReactNativePackage; + + public class MainApplication extends Application implements ReactApplication { + // ... existing code ... + + @Override + protected List getPackages() { + @SuppressWarnings("UnnecessaryLocalVariable") + List packages = new PackageList(this).getPackages(); + + packages.add(new EdgeeReactNativePackage()); // 👈 Add this line + + return packages; + } + } + ``` + + 2. **Add permission** to `android/app/src/main/AndroidManifest.xml`: + + ```xml + + + + + ``` + + 3. **Rebuild your app:** + ```bash + npx react-native run-android + ``` + + + + ```bash + # Install the package + npx expo install react-native-edgee @react-native-async-storage/async-storage @react-native-community/netinfo + + # Create development build (this compiles native modules) + npx expo run:ios # For iOS + npx expo run:android # For Android + ``` + + Native modules require a development build, not Expo Go. + + + + ```bash + npx expo install react-native-edgee @react-native-async-storage/async-storage @react-native-community/netinfo + ``` + + + **Limitations:** Native context collection is disabled. Only basic JavaScript context (screen size, platform, locale) will be available. + + + + +### Step 3: Verify Installation + +Test that native modules are working: + +```typescript +import { isNativeModuleAvailable } from 'react-native-edgee'; + +console.log('Native modules available:', isNativeModuleAvailable()); +// Should log: true (React Native CLI, Expo Dev Build) +// Should log: false (Expo Go) +``` + +## Quick Start + +### Basic Setup + +```typescript +import { EdgeeClient } from 'react-native-edgee'; + +// Create client instance +export const edgee = new EdgeeClient({ + host: "https://your-edgee-host.com", + debug: __DEV__, // Enable debug logging in development + collectDeviceId: false, // Set to true if you need unique device tracking +}); +``` + +Replace `https://your-edgee-host.com` with the URL provided in the Edgee console, in the project overview section. + +### Track Events + +```typescript +// Track events (automatically includes rich native context) +// Consent is handled transparently - no need to check before each call! +edgee.track('App Launched', { + source: 'cold_start', + version: '1.0.0' +}); + +// Track user information +edgee.user({ + id: '123', + email: 'user@example.com', + plan: 'premium' +}); + +// Track screen views +edgee.screen('Home Screen', { + category: 'main', + loaded_time: Date.now() +}); +``` + +### Consent Management (Optional) + +```typescript +// Set consent - all tracking calls automatically respect this setting +await edgee.setConsent('granted'); // 'granted', 'denied', or 'pending' + +// Check consent status +console.log('Current consent:', edgee.getConsent()); +console.log('Can track:', edgee.canTrack()); + +// Listen for consent changes +const unsubscribe = edgee.onConsentChange((status) => { + console.log('Consent changed to:', status); +}); + +// Reset consent +await edgee.resetConsent(); +``` + +**Key Benefits:** +- **Transparent**: No need to check consent before each tracking call +- **Auto-sync**: Consent events automatically sent to your Edgee server +- **Persistent**: Consent preference stored locally and remembered +- **Compliant**: GDPR/CCPA ready with proper consent management + +## Rich Native Context + +With native modules enabled, each event automatically includes comprehensive context: + +### App Information +- App name, version, build number +- Bundle/package identifier +- Installation and update timestamps + +### Device Information +- Device model, manufacturer, brand +- Screen dimensions, density, scale +- Hardware capabilities (tablet, simulator/emulator detection) + +### System Information +- OS name and version +- Locale, language, country, timezone +- Memory usage, storage info +- Battery level and state (iOS) + +### Network Information +- Connection type (WiFi, cellular, ethernet) +- Carrier name and network codes +- Radio technology (3G, 4G, 5G) + +### Privacy Information *(Optional)* +- Advertising ID (with proper consent on iOS 14+) +- Device ID (privacy-compliant, opt-in only) +- Tracking authorization status + +## React Integration + +### Context Provider (Recommended) + +```typescript +import { EdgeeProvider, useEdgee } from 'react-native-edgee'; + +// Wrap your app +export default function App() { + return ( + + + + ); +} + +// Use in components +function SomeComponent() { + const edgee = useEdgee(); + + const handleButtonPress = () => { + // Tracking automatically respects consent - no need to check! + edgee.track('Button Pressed', { button_id: 'cta_main' }); + }; + + const handleConsentGrant = async () => { + await edgee.setConsent('granted'); + }; + + return ( + +