### Install and Run Example App Source: https://github.com/attentive-mobile/attentive-react-native-sdk/blob/main/DEBUGGING.md Commands to navigate to the example app directory, install dependencies, and run the app on iOS and Android simulators/devices. ```bash cd example npm install # iOS npx react-native run-ios # Android npx react-native run-android ``` -------------------------------- ### Install iOS Native Dependencies Source: https://github.com/attentive-mobile/attentive-react-native-sdk/blob/main/MIGRATION_GUIDE.md Run `pod install` in the `ios` directory to install native dependencies for iOS. ```bash cd ios && pod install && cd .. ``` -------------------------------- ### Start Metro Server Source: https://github.com/attentive-mobile/attentive-react-native-sdk/blob/main/example/README.md Run this command in the root of your React Native project to start the Metro bundler. ```bash npm start ``` -------------------------------- ### Complete Migration Example: Before Source: https://github.com/attentive-mobile/attentive-react-native-sdk/blob/main/MIGRATION_GUIDE.md Shows the old API usage for initializing the SDK, identifying users, and tracking product view and purchase events. ```typescript import Attentive, { Mode, type AttentiveConfiguration, type ProductViewEvent, type PurchaseEvent } from '@attentive-mobile/attentive-react-native-sdk'; // Initialize const config: AttentiveConfiguration = { attentiveDomain: 'mystore', mode: Mode.Production, enableDebugger: false, }; Attentive.initialize(config); // Identify user Attentive.identify({ email: 'user@example.com', phone: '+15551234567', }); // Track product view const productView: ProductViewEvent = { items: [{ productId: 'prod_123', productVariantId: 'var_456', price: { price: '49.99', currency: 'USD', }, name: 'T-Shirt', }], deeplink: 'myapp://product/123', }; Attentive.recordProductViewEvent(productView); // Track purchase const purchase: PurchaseEvent = { items: [{ productId: 'prod_123', productVariantId: 'var_456', price: { price: '49.99', currency: 'USD', }, }], order: { orderId: 'order_789', }, }; Attentive.recordPurchaseEvent(purchase); ``` -------------------------------- ### Navigate to Bonni Directory Source: https://github.com/attentive-mobile/attentive-react-native-sdk/blob/main/Bonni/README.md Changes the current directory to the Bonni example app's root folder within the repository. ```bash cd Bonni ``` -------------------------------- ### Usage Examples Source: https://github.com/attentive-mobile/attentive-react-native-sdk/blob/main/_autodocs/GENERATION_REPORT.txt A collection of realistic code examples demonstrating common use cases and integration patterns for the Attentive React Native SDK. ```APIDOC ## Usage Examples This section provides over 45 realistic code examples showcasing various ways to integrate and utilize the Attentive React Native SDK. These examples are designed to be practical and cover common development scenarios. ### Example Scenarios: - **Initialization**: Demonstrations of initializing the SDK in debug and production modes. - **User Identification**: Workflows for identifying users within the application. - **Event Recording**: Examples for tracking e-commerce events. - **Push Notification Setup**: Comprehensive examples for setting up push notifications on both iOS and Android. - **Error Handling**: Patterns for effectively handling errors within the SDK integration. - **Complete Example App**: Reference to a full example application demonstrating end-to-end integration. - **Integration Patterns**: Various methods for integrating the SDK into different parts of your application. ``` -------------------------------- ### Install Android Native Dependencies Source: https://github.com/attentive-mobile/attentive-react-native-sdk/blob/main/MIGRATION_GUIDE.md Run `./gradlew clean` in the `android` directory to clean and install native dependencies for Android. ```bash cd android && ./gradlew clean && cd .. ``` -------------------------------- ### Install Attentive React Native SDK Source: https://github.com/attentive-mobile/attentive-react-native-sdk/blob/main/_autodocs/quick-start.md Install the SDK using npm. This is the first step before integrating the SDK into your React Native application. ```bash npm install @attentive-mobile/attentive-react-native-sdk ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/attentive-mobile/attentive-react-native-sdk/blob/main/Bonni/README.md Installs all JavaScript dependencies for the project. Ensure Node.js version 18 or higher is used. ```bash npm install ``` -------------------------------- ### Initialize SDK Source: https://github.com/attentive-mobile/attentive-react-native-sdk/blob/main/_autodocs/quick-start.md Initialize the Attentive SDK once when your application starts. This is typically done in your root `App` component. ```APIDOC ## Initialize SDK ### Description Initialize the Attentive SDK with your domain and mode. ### Method `initialize(options: { attentiveDomain: string; mode: 'production' | 'staging'; }) ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```typescript import { initialize } from '@attentive-mobile/attentive-react-native-sdk'; import { useEffect } from 'react'; export const App = () => { useEffect(() => { initialize({ attentiveDomain: 'myapp.attentivemobile.com', mode: 'production' }); }, []); return ; }; ``` ### Response #### Success Response (200) None #### Response Example None ``` -------------------------------- ### Example Usage: Initialize, Record Event, and Debug Source: https://github.com/attentive-mobile/attentive-react-native-sdk/blob/main/DEBUGGING.md Demonstrates initializing the SDK with debugging enabled, recording a product view event which triggers the debug overlay, manually invoking the debug helper, and programmatically exporting debug logs. ```typescript import { initialize, recordProductViewEvent, invokeAttentiveDebugHelper, exportDebugLogs, } from '@attentive-mobile/attentive-react-native-sdk'; // Initialize with debugging const config = { attentiveDomain: 'games', mode: 'debug', enableDebugger: true, }; initialize(config); // Record an event - debug overlay will automatically appear recordProductViewEvent({ items: [{ productId: 'test-product', productVariantId: 'test-variant', price: '29.99', currency: 'USD', }], }); // Manually show debug info invokeAttentiveDebugHelper(); // Export debug logs programmatically const debugLogs = await exportDebugLogs(); console.log(debugLogs); ``` -------------------------------- ### Handle Multiple Product Interaction Events Source: https://github.com/attentive-mobile/attentive-react-native-sdk/blob/main/_autodocs/quick-start.md This example demonstrates how to handle various product interactions by recording different events such as product views, add-to-cart, and custom remove-from-cart events. This allows for detailed tracking of user engagement with products. ```typescript const handleProductInteraction = (product, action) => { switch (action) { case 'view': recordProductViewEvent({ items: [product] }); break; case 'add-to-cart': recordAddToCartEvent({ items: [product] }); break; case 'remove-from-cart': recordCustomEvent({ type: 'remove_from_cart', properties: { productId: product.productId } }); break; } }; ``` -------------------------------- ### Complete Attentive SDK Integration Example Source: https://github.com/attentive-mobile/attentive-react-native-sdk/blob/main/_autodocs/quick-start.md This example demonstrates a full integration of the Attentive React Native SDK within a root component. It covers initialization, user identification, purchase event recording, and triggering creatives. Ensure you have the necessary imports and platform-specific configurations. ```typescript import React, { useEffect, useState } from 'react'; import { View, Button, Alert, Platform } from 'react-native'; import { initialize, identify, triggerCreative, recordPurchaseEvent, registerForPushNotifications, getPushAuthorizationStatus } from '@attentive-mobile/attentive-react-native-sdk'; export const App = () => { const [userId, setUserId] = useState(null); useEffect(() => { // Initialize SDK if (Platform.OS === 'ios') { initialize({ attentiveDomain: 'myapp.attentivemobile.com', mode: 'production' }); } // Request push permission registerForPushNotifications(); }, []); const handleUserLogin = (email: string, userId: string) => { setUserId(userId); identify({ email, clientUserId: userId }); }; const handlePurchase = () => { recordPurchaseEvent({ items: [ { productId: '123', productVariantId: 'var-123', price: '29.99', currency: 'USD' } ], orderId: 'order-456' }); // Show creative after purchase triggerCreative(); }; return (