@adobe/react-native-aepmessaging 6.0.5 → 7.1.0

package/README.md

@@ -33,79 +33,13 @@ yarn add @adobe/react-native-aepmessaging
 
 ## Usage
 
-### [Messaging](https://developer.adobe.com/client-sdks/documentation/adobe-journey-optimizer)
+### Initializing with SDK:
 
-### Installing and registering the extension with the AEP Mobile Core
+To initialize the SDK, use the following methods:
+- [MobileCore.initializeWithAppId(appId)](https://github.com/adobe/aepsdk-react-native/tree/main/packages/core#initializewithappid)
+- [MobileCore.initialize(initOptions)](https://github.com/adobe/aepsdk-react-native/tree/main/packages/core#initialize)
 
-### Initialization
-
-Initializing the SDK should be done in native code, additional documentation on how to initialize the SDK can be found [here](https://github.com/adobe/aepsdk-react-native#initializing).
-
-Example:
-
-iOS
-
-```objectivec
-@import AEPCore;
-@import AEPLifecycle;
-@import AEPEdge;
-@import AEPEdgeIdentity;
-@import AEPMessaging;
-
-...
-@implementation AppDelegate
--(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
-  [AEPMobileCore setLogLevel: AEPLogLevelDebug];
-  [AEPMobileCore configureWithAppId:@"yourAppID"];
-
-  const UIApplicationState appState = application.applicationState;
-
-  [AEPMobileCore registerExtensions: @[AEPMobileEdgeIdentity.class, AEPMobileEdge.class, AEPMobileMessaging.class, AEPMobileOptimize.class] completion:^{
-    if (appState != UIApplicationStateBackground) {
-        [AEPMobileCore lifecycleStart:nil}];
-    }
-  }];
-  return YES;
-}
-
-@end
-```
-
-Android
-
-```java
-import com.adobe.marketing.mobile.AdobeCallback;
-import com.adobe.marketing.mobile.InvalidInitException;
-import com.adobe.marketing.mobile.Lifecycle;
-import com.adobe.marketing.mobile.LoggingMode;
-import com.adobe.marketing.mobile.MobileCore;
-import com.adobe.marketing.mobile.Edge;
-import com.adobe.marketing.mobile.edge.identity.Identity;
-import com.adobe.marketing.mobile.Messaging;
-
-...
-import android.app.Application;
-...
-public class MainApplication extends Application implements ReactApplication {
-  ...
-  @Override
-  public void on Create(){
-    super.onCreate();
-    ...
-    MobileCore.setApplication(this);
-    MobileCore.setLogLevel(LoggingMode.DEBUG);
-    MobileCore.configureWithAppID("yourAppID");
-    List<Class<? extends Extension>> extensions = Arrays.asList(
-                Edge.EXTENSION,
-                Identity.EXTENSION,
-                Messaging.EXTENSION,
-    						Lifecycle.EXTENSION);
-    MobileCore.registerExtensions(extensions, o -> {
-      MobileCore.lifecycleStart(null);
-    });
-  }
-}
-```
+Refer to the root [Readme](https://github.com/adobe/aepsdk-react-native/blob/main/README.md) for more information about the SDK setup.
 
 ### Importing the extension:
 
@@ -372,23 +306,6 @@ var message: Message;
 message.track('sample text', MessagingEdgeEventType.IN_APP_DISMISS);
 ```
 
-### handleJavascriptMessage
-
-Adds a handler for Javascript messages sent from the message's webview.
-
-**Syntax**
-
-```javascript
-handleJavascriptMessage(name: string) : Promise<?any>
-```
-
-**Example**
-
-```javascript
-var message: Message;
-message.handleJavascriptMessage('test').then((data) => {});
-```
-
 ### setAutoTrack
 
 Enables/Disables autotracking for message events.
@@ -517,3 +434,29 @@ function otherWorkflowFinished() {
   currentMessage.clearMessage();
 }
 ```
+
+
+## Tracking interactions with content cards
+
+### trackContentCardDisplay
+
+Tracks a Display interaction with the given ContentCard
+
+**Syntax**
+```javascript
+Messaging.trackContentCardDisplay(proposition, contentCard);
+```
+
+### trackContentCardInteraction
+
+Tracks a Click interaction with the given ContentCard
+
+**Syntax**
+```javascript
+Messaging.trackContentCardInteraction(proposition, contentCard);
+```
+
+
+## Tutorials
+[Content Cards](./tutorials/ContentCards.md)
+

package/android/build.gradle

@@ -80,6 +80,7 @@ dependencies {
   //noinspection GradleDynamicVersion
   implementation "com.facebook.react:react-native:+"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-  api "com.adobe.marketing.mobile:messaging:3.+"
-  implementation "com.facebook.react:react-native:+"
+  implementation platform("com.adobe.marketing.mobile:sdk-bom:3.+")
+  api "com.adobe.marketing.mobile:messaging"
+
 }

package/android/src/main/java/com/adobe/marketing/mobile/reactnative/messaging/RCTAEPMessagingModule.java

@@ -27,6 +27,7 @@ import com.adobe.marketing.mobile.MessagingEdgeEventType;
 import com.adobe.marketing.mobile.MobileCore;
 import com.adobe.marketing.mobile.messaging.MessagingUtils;
 import com.adobe.marketing.mobile.messaging.Proposition;
+import com.adobe.marketing.mobile.messaging.PropositionItem;
 import com.adobe.marketing.mobile.messaging.Surface;
 import com.adobe.marketing.mobile.services.ServiceProvider;
 import com.adobe.marketing.mobile.services.ui.InAppMessage;
@@ -38,6 +39,7 @@ import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.modules.core.DeviceEventManagerModule;
 import java.util.HashMap;
@@ -269,4 +271,28 @@ public final class RCTAEPMessagingModule
         .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
         .emit(name, eventData);
   }
-}
+
+  @ReactMethod
+  public void trackContentCardDisplay(ReadableMap propositionMap, ReadableMap contentCardMap) {
+    final Map<String, Object> eventData = RCTAEPMessagingUtil.convertReadableMapToMap(propositionMap);
+    final Proposition proposition = Proposition.fromEventData(eventData);
+    for (PropositionItem item : proposition.getItems()) {
+      if (item.getItemId().equals(contentCardMap.getString("id"))) {
+        item.track(MessagingEdgeEventType.DISPLAY);
+        break;
+      }
+    }
+  }
+
+  @ReactMethod
+  public void trackContentCardInteraction(ReadableMap propositionMap, ReadableMap contentCardMap) {
+    final Map<String, Object> eventData = RCTAEPMessagingUtil.convertReadableMapToMap(propositionMap);
+    final Proposition proposition = Proposition.fromEventData(eventData);
+    for (PropositionItem item : proposition.getItems()) {
+      if (item.getItemId().equals(contentCardMap.getString("id"))) {
+        item.track("click", MessagingEdgeEventType.INTERACT, null);
+        break;
+      }
+    }
+  }
+}

package/android/src/main/java/com/adobe/marketing/mobile/reactnative/messaging/RCTAEPMessagingUtil.java

@@ -19,6 +19,8 @@
  import com.facebook.react.bridge.Arguments;
  import com.facebook.react.bridge.ReadableArray;
  import com.facebook.react.bridge.ReadableMap;
+ import com.facebook.react.bridge.ReadableMapKeySetIterator;
+ import com.facebook.react.bridge.ReadableType;
  import com.facebook.react.bridge.WritableArray;
  import com.facebook.react.bridge.WritableMap;
  import com.facebook.react.bridge.WritableNativeArray;
@@ -216,4 +218,66 @@
      }
      return writableMap;
    }
- }
+
+   /**
+     * Converts {@link ReadableMap} Map to {@link Map}
+     *
+     * @param readableMap instance of {@code ReadableMap}
+     * @return instance of {@code Map}
+     */
+    static Map<String, Object> convertReadableMapToMap(final ReadableMap readableMap) {
+        ReadableMapKeySetIterator iterator = readableMap.keySetIterator();
+        Map<String, Object> map = new HashMap<>();
+        while (iterator.hasNextKey()) {
+            String key = iterator.nextKey();
+            ReadableType type = readableMap.getType(key);
+            switch (type) {
+                case Boolean:
+                    map.put(key, readableMap.getBoolean(key));
+                    break;
+                case Number:
+                    map.put(key, readableMap.getDouble(key));
+                    break;
+                case String:
+                    map.put(key, readableMap.getString(key));
+                    break;
+                case Map:
+                    map.put(key, convertReadableMapToMap(readableMap.getMap(key)));
+                    break;
+                case Array:
+                    map.put(key, convertReadableArrayToList(readableMap.getArray(key)));
+                    break;
+                default:
+                    break;
+            }
+        }
+        return map;
+    }
+
+    static List<Object> convertReadableArrayToList(final ReadableArray readableArray) {
+        final List<Object> list = new ArrayList<>(readableArray.size());
+        for (int i = 0; i < readableArray.size(); i++) {
+            ReadableType indexType = readableArray.getType(i);
+            switch(indexType) {
+                case Boolean:
+                    list.add(i, readableArray.getBoolean(i));
+                    break;
+                case Number:
+                    list.add(i, readableArray.getDouble(i));
+                    break;
+                case String:
+                    list.add(i, readableArray.getString(i));
+                    break;
+                case Map:
+                    list.add(i, convertReadableMapToMap(readableArray.getMap(i)));
+                    break;
+                case Array:
+                    list.add(i, convertReadableArrayToList(readableArray.getArray(i)));
+                    break;
+                default:
+                    break;
+            }
+        }
+        return list;
+    }
+ }

package/dist/Messaging.d.ts

@@ -1,6 +1,7 @@
 import Message from './models/Message';
 import { MessagingDelegate } from './models/MessagingDelegate';
 import { MessagingProposition } from './models/MessagingProposition';
+import { ContentCard } from './models/ContentCard';
 export interface NativeMessagingModule {
     extensionVersion: () => Promise<string>;
     getCachedMessages: () => Message[];
@@ -10,6 +11,8 @@ export interface NativeMessagingModule {
     setMessagingDelegate: (delegate?: MessagingDelegate) => void;
     setMessageSettings: (shouldShowMessage: boolean, shouldSaveMessage: boolean) => void;
     updatePropositionsForSurfaces: (surfaces: string[]) => void;
+    trackContentCardDisplay: (proposition: MessagingProposition, contentCard: ContentCard) => void;
+    trackContentCardInteraction: (proposition: MessagingProposition, contentCard: ContentCard) => void;
 }
 declare class Messaging {
     /**
@@ -40,6 +43,8 @@ declare class Messaging {
      * @returns A record of surface names with their corresponding propositions
      */
     static getPropositionsForSurfaces(surfaces: string[]): Promise<Record<string, MessagingProposition[]>>;
+    static trackContentCardDisplay(proposition: MessagingProposition, contentCard: ContentCard): void;
+    static trackContentCardInteraction(proposition: MessagingProposition, contentCard: ContentCard): void;
     /**
      * Function to set the UI Message delegate to listen the Message lifecycle events.
      * @returns A function to unsubscribe from all event listeners

package/dist/Messaging.js

@@ -63,6 +63,12 @@ class Messaging {
             return yield RCTAEPMessaging.getPropositionsForSurfaces(surfaces);
         });
     }
+    static trackContentCardDisplay(proposition, contentCard) {
+        RCTAEPMessaging.trackContentCardDisplay(proposition, contentCard);
+    }
+    static trackContentCardInteraction(proposition, contentCard) {
+        RCTAEPMessaging.trackContentCardInteraction(proposition, contentCard);
+    }
     /**
      * Function to set the UI Message delegate to listen the Message lifecycle events.
      * @returns A function to unsubscribe from all event listeners

package/dist/Messaging.js.map

@@ -1 +1 @@
-{"version":3,"file":"Messaging.js","sourceRoot":"","sources":["../src/Messaging.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Messaging.js","sourceRoot":"","sources":["../src/Messaging.ts"],"names":[],"mappings":"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"}

package/ios/src/RCTAEPMessaging.mm

@@ -47,4 +47,12 @@ RCT_EXTERN_METHOD(updatePropositionsForSurfaces
                   : (RCTPromiseResolveBlock)resolve withRejecter
                   : (RCTPromiseRejectBlock)reject);
 
+RCT_EXTERN_METHOD(trackContentCardDisplay
+                  : (NSDictionary *)propositionMap contentCardMap
+                  : (NSDictionary *)contentCardMap);
+
+RCT_EXTERN_METHOD(trackContentCardInteraction
+                  : (NSDictionary *)propositionMap contentCardMap
+                  : (NSDictionary *)contentCardMap);
+
 @end

package/ios/src/RCTAEPMessaging.swift

@@ -201,6 +201,54 @@ public class RCTAEPMessaging: RCTEventEmitter, MessagingDelegate {
         reject(Constants.CACHE_MISS, nil, nil)
     }
 
+    @objc
+    func trackContentCardDisplay(
+        _ propositionMap: [String: Any], 
+        contentCardMap: [String: Any]
+    ) { 
+        guard let contentCardId = contentCardMap["id"] as? String else {
+            print("Error: Content card ID is missing or invalid")
+            return
+        }
+        
+        do {
+            let jsonData = try JSONSerialization.data(withJSONObject: propositionMap)
+            let proposition = try JSONDecoder().decode(Proposition.self, from: jsonData)
+            
+            if let matchingItem = proposition.items.first(where: { $0.itemId == contentCardId }) {
+                matchingItem.track(withEdgeEventType: MessagingEdgeEventType.display)
+            } else {
+                print("Error: No matching proposition item found for content card ID: \(contentCardId)")
+            }
+        } catch {
+            print("Error decoding proposition: \(error.localizedDescription)")
+        }
+    }
+
+    @objc
+    func trackContentCardInteraction(
+        _ propositionMap: [String: Any], 
+        contentCardMap: [String: Any]
+    ) { 
+        guard let contentCardId = contentCardMap["id"] as? String else {
+            print("Error: Content card ID is missing or invalid")
+            return
+        }
+        
+        do {
+            let jsonData = try JSONSerialization.data(withJSONObject: propositionMap)
+            let proposition = try JSONDecoder().decode(Proposition.self, from: jsonData)
+            
+            if let matchingItem = proposition.items.first(where: { $0.itemId == contentCardId }) {
+                matchingItem.track("click", withEdgeEventType: MessagingEdgeEventType.interact)
+            } else {
+                print("Error: No matching proposition item found for content card ID: \(contentCardId)")
+            }
+        } catch {
+            print("Error decoding proposition: \(error.localizedDescription)")
+        }
+    }
+
     // Messaging Delegate Methods
     public func onDismiss(message: Showable) {
         if let fullscreenMessage = message as? FullscreenMessage,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/react-native-aepmessaging",
-  "version": "6.0.5",
+  "version": "7.1.0",
   "description": "Adobe Experience Platform support for React Native apps.",
   "homepage": "https://developer.adobe.com/client-sdks/documentation/",
   "license": "Apache-2.0",
@@ -28,9 +28,9 @@
     "name": "Adobe Experience Platform SDK Team"
   },
   "peerDependencies": {
-    "@adobe/react-native-aepcore": "^6.0.0",
-    "@adobe/react-native-aepedge": "^6.0.0",
-    "@adobe/react-native-aepedgeidentity": "^6.0.0",
+    "@adobe/react-native-aepcore": "^7.0.0",
+    "@adobe/react-native-aepedge": "^7.0.0",
+    "@adobe/react-native-aepedgeidentity": "^7.0.0",
     "react-native": ">=0.60.0"
   },
   "publishConfig": {
@@ -39,5 +39,5 @@
   "installConfig": {
     "hoistingLimits": "dependencies"
   },
-  "gitHead": "d907afaf1a8d7521a95ab744bf0e7ea6890e79db"
+  "gitHead": "33e33a1bf4c6233e83b4bc7d10f586e03eb6345a"
 }

package/src/Messaging.ts

@@ -19,6 +19,7 @@ import {
 import Message from './models/Message';
 import { MessagingDelegate } from './models/MessagingDelegate';
 import { MessagingProposition } from './models/MessagingProposition';
+import { ContentCard } from './models/ContentCard';
 
 export interface NativeMessagingModule {
   extensionVersion: () => Promise<string>;
@@ -34,6 +35,8 @@ export interface NativeMessagingModule {
     shouldSaveMessage: boolean
   ) => void;
   updatePropositionsForSurfaces: (surfaces: string[]) => void;
+  trackContentCardDisplay: (proposition: MessagingProposition, contentCard: ContentCard) => void;
+  trackContentCardInteraction: (proposition: MessagingProposition, contentCard: ContentCard) => void;
 }
 
 const RCTAEPMessaging: NativeModule & NativeMessagingModule =
@@ -90,6 +93,14 @@ class Messaging {
     return await RCTAEPMessaging.getPropositionsForSurfaces(surfaces);
   }
 
+  static trackContentCardDisplay(proposition: MessagingProposition, contentCard: ContentCard): void {
+    RCTAEPMessaging.trackContentCardDisplay(proposition, contentCard);
+  }
+
+  static trackContentCardInteraction(proposition: MessagingProposition, contentCard: ContentCard): void {
+    RCTAEPMessaging.trackContentCardInteraction(proposition, contentCard);
+  }
+
   /**
    * Function to set the UI Message delegate to listen the Message lifecycle events.
    * @returns A function to unsubscribe from all event listeners

package/tutorials/ContentCards.md

@@ -0,0 +1,747 @@
+# Content Cards Tutorial
+
+## Overview
+
+Content Cards are a powerful feature of Adobe Journey Optimizer that allows you to deliver personalized, contextual content directly within your mobile application. Unlike push notifications or in-app messages, content cards provide a persistent, non-intrusive way to present relevant information to users when they're actively engaged with your app. Content cards are ideal for showcasing promotions, product recommendations, onboarding tips, or any contextual information that enhances the user experience without interrupting their workflow.
+
+
+## Fetching Content Cards
+
+### Prerequisites
+
+Before implementing content cards, ensure you have:
+
+1. Integrated and registered the AEPMessaging extension in your app 
+2. Configured content card campaigns in Adobe Journey Optimizer
+3. Defined locations where content cards should appear in your app
+
+### Step 1: Update Propositions for Surfaces
+
+To fetch content cards for specific surfaces configured in Adobe Journey Optimizer campaigns, call the `updatePropositionsForSurfaces` API. This method retrieves the latest content cards from the server and caches them in-memory for the application's lifecycle.
+
+**Best Practice**: Batch requests for multiple surfaces in a single API call when possible to optimize performance.
+
+```typescript
+import { Messaging } from '@adobe/react-native-aepmessaging';
+
+// Define surfaces of content cards to retrieve
+const surfaces: string[] = ['homepage', 'product-detail', 'checkout'];
+
+// Fetch content cards for multiple surfaces
+const updateContentCards = async (): Promise<void> => {
+  try {
+    await Messaging.updatePropositionsForSurfaces(surfaces);
+    console.log('Content cards updated successfully');
+  } catch (error) {
+    console.error('Failed to update content cards:', error);
+  }
+};
+```
+
+### Step 2: Retrieve Content Cards
+
+After updating propositions, retrieve the content cards for a specific surface using the `getPropositionsForSurfaces` API. This returns a record of surface names with their corresponding propositions that contain content cards for which the user is qualified.
+
+**Important**: Only content cards for which the user has qualified are returned. User qualification is determined by the delivery rules configured in Adobe Journey Optimizer.
+
+```typescript
+import { Messaging, MessagingProposition, ContentCard, PersonalizationSchema } from '@adobe/react-native-aepmessaging';
+
+// Retrieve propositions for specific surfaces
+const getContentCards = async (surfacePaths: string[]): Promise<ContentCard[]> => {
+  try {
+    const propositionsMap: Record<string, MessagingProposition[]> = await Messaging.getPropositionsForSurfaces(surfacePaths);
+    
+    const allContentCards: ContentCard[] = [];
+    
+    // Extract content cards from all surfaces
+    Object.values(propositionsMap).forEach(propositions => {
+      propositions.forEach(proposition => {
+        const contentCards = proposition.items.filter(
+          item => item.schema === PersonalizationSchema.CONTENT_CARD
+        ) as ContentCard[];
+        allContentCards.push(...contentCards);
+      });
+    });
+    
+    console.log(`Found ${allContentCards.length} content cards across all surfaces`);
+    return allContentCards;
+  } catch (error) {
+    console.error('Error retrieving propositions:', error);
+    return [];
+  }
+};
+```
+
+## Rendering Content Cards
+
+Content cards can be rendered in various ways depending on your application architecture. Since React Native doesn't support the pre-built `ContentCardUI` objects, you'll need to create your own UI components based on the content card data from propositions.
+
+### React Native Implementation
+
+Here's how to implement content cards in a React Native component using propositions:
+
+```typescript
+import React, { useState, useEffect } from 'react';
+import { View, ScrollView, StyleSheet, Text, Image, TouchableOpacity } from 'react-native';
+import { Messaging, MessagingProposition, ContentCard, PersonalizationSchema } from '@adobe/react-native-aepmessaging';
+
+interface ContentCardsScreenProps {
+  surfacePath?: string;
+}
+
+const ContentCardsScreen: React.FC<ContentCardsScreenProps> = ({ surfacePath = 'homepage' }) => {
+  const [contentCards, setContentCards] = useState<ContentCard[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    fetchContentCards();
+  }, [surfacePath]);
+
+  const fetchContentCards = async (): Promise<void> => {
+    try {
+      setLoading(true);
+      
+      // First, update propositions for the surface
+      await Messaging.updatePropositionsForSurfaces([surfacePath]);
+      
+      // Then retrieve the propositions and extract content cards
+      const propositionsMap: Record<string, MessagingProposition[]> = await Messaging.getPropositionsForSurfaces([surfacePath]);
+      const propositions = propositionsMap[surfacePath] || [];
+      
+      const cards: ContentCard[] = propositions.flatMap(proposition => 
+        proposition.items.filter(item => item.schema === PersonalizationSchema.CONTENT_CARD) as ContentCard[]
+      );
+      
+      setContentCards(cards || []);
+    } catch (error) {
+      console.error('Failed to fetch content cards:', error);
+      setContentCards([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const renderContentCard = (card: ContentCard, index: number): JSX.Element => {
+    const { data } = card;
+    
+    return (
+      <TouchableOpacity key={index} style={styles.cardContainer}>
+        {data.content.image?.url && (
+          <Image source={{ uri: data.content.image.url }} style={styles.cardImage} />
+        )}
+        <View style={styles.cardContent}>
+          {data.content.title?.content && (
+            <Text style={styles.cardTitle}>{data.content.title.content}</Text>
+          )}
+          {data.content.body?.content && (
+            <Text style={styles.cardBody}>{data.content.body.content}</Text>
+          )}
+          {data.content.actionUrl && (
+            <TouchableOpacity style={styles.actionButton}>
+              <Text style={styles.actionText}>Learn More</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+  if (loading) {
+    return (
+      <View style={styles.loading}>
+        <Text>Loading content cards...</Text>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView style={styles.container}>
+      {contentCards.map((card, index) => renderContentCard(card, index))}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+  },
+  cardContainer: {
+    backgroundColor: '#fff',
+    borderRadius: 8,
+    marginBottom: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  cardImage: {
+    width: '100%',
+    height: 120,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+  cardContent: {
+    padding: 16,
+  },
+  cardTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 8,
+  },
+  cardBody: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 12,
+  },
+  actionButton: {
+    backgroundColor: '#007AFF',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 4,
+    alignSelf: 'flex-start',
+  },
+  actionText: {
+    color: '#fff',
+    fontWeight: '600',
+  },
+  loading: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default ContentCardsScreen;
+```
+
+## Tracking Content Card Events
+
+Content cards support event tracking to measure user engagement and campaign effectiveness. The AEPMessaging extension provides methods to track two key events: display and interact. These events help you understand how users engage with your content cards and optimize your campaigns accordingly.
+
+### Event Types
+
+- **Display**: Triggered when a content card is shown to the user
+- **Interact**: Triggered when a user taps or interacts with a content card
+
+### Implementing Event Tracking
+
+Here's how to implement event tracking in your content card components:
+
+```typescript
+import React, { useState, useEffect, useRef } from 'react';
+import { View, ScrollView, StyleSheet, Text, Image, TouchableOpacity } from 'react-native';
+import { Messaging, MessagingProposition, ContentCard, PersonalizationSchema } from '@adobe/react-native-aepmessaging';
+
+interface ContentCardsWithTrackingProps {
+  surfacePath?: string;
+}
+
+const ContentCardsWithTracking: React.FC<ContentCardsWithTrackingProps> = ({ 
+  surfacePath = 'homepage' 
+}) => {
+  const [contentCards, setContentCards] = useState<ContentCard[]>([]);
+  const [propositions, setPropositions] = useState<MessagingProposition[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const displayedCards = useRef<Set<string>>(new Set());
+
+  useEffect(() => {
+    fetchContentCards();
+  }, [surfacePath]);
+
+  const fetchContentCards = async (): Promise<void> => {
+    try {
+      setLoading(true);
+      
+      await Messaging.updatePropositionsForSurfaces([surfacePath]);
+      const propositionsMap: Record<string, MessagingProposition[]> = await Messaging.getPropositionsForSurfaces([surfacePath]);
+      const fetchedPropositions = propositionsMap[surfacePath] || [];
+      
+      const cards: ContentCard[] = fetchedPropositions.flatMap(proposition => 
+        proposition.items.filter(item => item.schema === PersonalizationSchema.CONTENT_CARD) as ContentCard[]
+      );
+      
+      setContentCards(cards || []);
+      setPropositions(fetchedPropositions || []);
+    } catch (error) {
+      console.error('Failed to fetch content cards:', error);
+      setContentCards([]);
+      setPropositions([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Track display event when card becomes visible
+  const trackDisplayEvent = (proposition: MessagingProposition, contentCard: ContentCard): void => {
+    const propositionId = proposition.id;
+    
+    // Prevent duplicate display events for the same card
+    if (!displayedCards.current.has(propositionId)) {
+      try {
+        Messaging.trackContentCardDisplay(proposition, contentCard);
+        displayedCards.current.add(propositionId);
+        console.log(`Display event tracked for proposition: ${propositionId}`);
+      } catch (error) {
+        console.error('Failed to track display event:', error);
+      }
+    }
+  };
+
+  // Track interact event when user taps on card
+  const trackInteractEvent = (proposition: MessagingProposition, contentCard: ContentCard): void => {
+    try {
+      Messaging.trackContentCardInteraction(proposition, contentCard);
+      console.log(`Interact event tracked for proposition: ${proposition.id}`);
+    } catch (error) {
+      console.error('Failed to track interact event:', error);
+    }
+  };
+
+  const handleCardPress = (card: ContentCard, proposition: MessagingProposition): void => {
+    // Track interaction
+    trackInteractEvent(proposition, card);
+    
+    // Handle card action (e.g., navigate to URL)
+    if (card.data.content.actionUrl) {
+      // Navigate to action URL or handle custom action
+      console.log(`Navigating to: ${card.data.content.actionUrl}`);
+    }
+  };
+
+  const handleCardDismiss = (cardIndex: number): void => {
+    // Remove card from display
+    setContentCards(prevCards => prevCards.filter((_, index) => index !== cardIndex));
+  };
+
+  const renderContentCard = (card: ContentCard, index: number): JSX.Element => {
+    const { data } = card;
+    const proposition = propositions.find(prop => 
+      prop.items.some(item => item.id === card.id)
+    );
+
+    // Track display event when card is rendered
+    useEffect(() => {
+      if (proposition) {
+        trackDisplayEvent(proposition, card);
+      }
+    }, [proposition]);
+
+    return (
+      <View key={index} style={styles.cardContainer}>
+        <TouchableOpacity 
+          style={styles.dismissButton}
+          onPress={() => handleCardDismiss(index)}
+        >
+          <Text style={styles.dismissText}>×</Text>
+        </TouchableOpacity>
+        
+        <TouchableOpacity 
+          style={styles.cardContent}
+          onPress={() => proposition && handleCardPress(card, proposition)}
+        >
+          {data.content.image?.url && (
+            <Image source={{ uri: data.content.image.url }} style={styles.cardImage} />
+          )}
+          <View style={styles.cardTextContent}>
+            {data.content.title?.content && (
+              <Text style={styles.cardTitle}>{data.content.title.content}</Text>
+            )}
+            {data.content.body?.content && (
+              <Text style={styles.cardBody}>{data.content.body.content}</Text>
+            )}
+            {data.content.actionUrl && (
+              <View style={styles.actionButton}>
+                <Text style={styles.actionText}>Learn More</Text>
+              </View>
+            )}
+          </View>
+        </TouchableOpacity>
+      </View>
+    );
+  };
+
+  if (loading) {
+    return (
+      <View style={styles.loading}>
+        <Text>Loading content cards...</Text>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView style={styles.container}>
+      {contentCards.map((card, index) => renderContentCard(card, index))}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+  },
+  cardContainer: {
+    backgroundColor: '#fff',
+    borderRadius: 8,
+    marginBottom: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+    position: 'relative',
+  },
+  dismissButton: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 1,
+  },
+  dismissText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  cardContent: {
+    flex: 1,
+  },
+  cardImage: {
+    width: '100%',
+    height: 120,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+  cardTextContent: {
+    padding: 16,
+  },
+  cardTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 8,
+  },
+  cardBody: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 12,
+  },
+  actionButton: {
+    backgroundColor: '#007AFF',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 4,
+    alignSelf: 'flex-start',
+  },
+  actionText: {
+    color: '#fff',
+    fontWeight: '600',
+  },
+  loading: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default ContentCardsWithTracking;
+```
+
+### Event Tracking Best Practices
+
+1. **Display Events**: Track display events only once per card per session to avoid duplicate analytics
+2. **Interact Events**: Track interactions immediately when they occur to ensure accurate measurement
+3. **Error Handling**: Implement proper error handling for tracking calls to prevent app crashes
+
+### Custom Event Tracking Hook
+
+For reusable event tracking logic, consider creating a custom hook:
+
+```typescript
+import { useCallback, useRef } from 'react';
+import { Messaging, MessagingProposition, ContentCard } from '@adobe/react-native-aepmessaging';
+
+interface ContentCardTracking {
+  trackDisplay: (proposition: MessagingProposition, contentCard: ContentCard) => void;
+  trackInteract: (proposition: MessagingProposition, contentCard: ContentCard) => void;
+}
+
+const useContentCardTracking = (): ContentCardTracking => {
+  const displayedCards = useRef<Set<string>>(new Set());
+
+  const trackDisplay = useCallback((proposition: MessagingProposition, contentCard: ContentCard): void => {
+    const propositionId = proposition.id;
+    
+    if (!displayedCards.current.has(propositionId)) {
+      try {
+        Messaging.trackContentCardDisplay(proposition, contentCard);
+        displayedCards.current.add(propositionId);
+        console.log(`Display tracked: ${propositionId}`);
+      } catch (error) {
+        console.error('Display tracking failed:', error);
+      }
+    }
+  }, []);
+
+  const trackInteract = useCallback((proposition: MessagingProposition, contentCard: ContentCard): void => {
+    try {
+      Messaging.trackContentCardInteraction(proposition, contentCard);
+      console.log(`Interact tracked: ${proposition.id}`);
+    } catch (error) {
+      console.error('Interact tracking failed:', error);
+    }
+  }, []);
+
+  return {
+    trackDisplay,
+    trackInteract,
+  };
+};
+
+export default useContentCardTracking;
+```
+
+### Advanced Usage Example
+
+Here's a more comprehensive example showing how to use the tracking methods in a production-ready implementation:
+
+```typescript
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { View, FlatList, StyleSheet, Text, Image, TouchableOpacity, ViewToken } from 'react-native';
+import { Messaging, MessagingProposition, ContentCard, PersonalizationSchema } from '@adobe/react-native-aepmessaging';
+
+interface ContentCardWithProposition extends ContentCard {
+  proposition: MessagingProposition;
+  uniqueId: string;
+}
+
+interface ContentCardsFlatListProps {
+  surfacePaths?: string[];
+}
+
+const ContentCardsFlatList: React.FC<ContentCardsFlatListProps> = ({ 
+  surfacePaths = ['homepage'] 
+}) => {
+  const [contentCards, setContentCards] = useState<ContentCardWithProposition[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const displayedCards = useRef<Set<string>>(new Set());
+
+  useEffect(() => {
+    fetchContentCards();
+  }, [surfacePaths]);
+
+  const fetchContentCards = async (): Promise<void> => {
+    try {
+      setLoading(true);
+      
+      await Messaging.updatePropositionsForSurfaces(surfacePaths);
+      const propositionsMap: Record<string, MessagingProposition[]> = await Messaging.getPropositionsForSurfaces(surfacePaths);
+      
+      const cards: ContentCardWithProposition[] = [];
+      
+      Object.entries(propositionsMap).forEach(([surface, propositions]) => {
+        propositions.forEach((proposition, propIndex) => {
+          proposition.items
+            .filter(item => item.schema === PersonalizationSchema.CONTENT_CARD)
+            .forEach((item, itemIndex) => {
+              cards.push({
+                ...(item as ContentCard),
+                proposition,
+                uniqueId: `${surface}-${proposition.id}-${itemIndex}`,
+              });
+            });
+        });
+      });
+      
+      setContentCards(cards);
+    } catch (error) {
+      console.error('Failed to fetch content cards:', error);
+      setContentCards([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Track display event when card appears in viewport
+  const trackDisplayEvent = useCallback((proposition: MessagingProposition, contentCard: ContentCard): void => {
+    const propositionId = proposition.id;
+    
+    if (!displayedCards.current.has(propositionId)) {
+      try {
+        Messaging.trackContentCardDisplay(proposition, contentCard);
+        displayedCards.current.add(propositionId);
+        console.log(`Display event tracked for proposition: ${propositionId}`);
+      } catch (error) {
+        console.error('Failed to track display event:', error);
+      }
+    }
+  }, []);
+
+  // Track interact event
+  const trackInteractEvent = useCallback((proposition: MessagingProposition, contentCard: ContentCard): void => {
+    try {
+      Messaging.trackContentCardInteraction(proposition, contentCard);
+      console.log(`Interact event tracked for proposition: ${proposition.id}`);
+    } catch (error) {
+      console.error('Failed to track interact event:', error);
+    }
+  }, []);
+
+  // Handle viewable items changed - track display events for visible cards
+  const onViewableItemsChanged = useCallback(({ viewableItems }: { viewableItems: ViewToken[] }): void => {
+    viewableItems.forEach(({ item }) => {
+      if (item.proposition) {
+        trackDisplayEvent(item.proposition, item);
+      }
+    });
+  }, [trackDisplayEvent]);
+
+  const handleCardPress = useCallback((card: ContentCardWithProposition): void => {
+    trackInteractEvent(card.proposition, card);
+    
+    if (card.data.content.actionUrl) {
+      console.log(`Navigating to: ${card.data.content.actionUrl}`);
+      // Handle navigation or custom action here
+    }
+  }, [trackInteractEvent]);
+
+  const renderContentCard = ({ item: card }: { item: ContentCardWithProposition }): JSX.Element => {
+    const { data } = card;
+
+    return (
+      <TouchableOpacity 
+        style={styles.cardContainer}
+        onPress={() => handleCardPress(card)}
+        activeOpacity={0.8}
+      >
+        {data.content.image?.url && (
+          <Image 
+            source={{ uri: data.content.image.url }} 
+            style={styles.cardImage}
+            resizeMode="cover"
+          />
+        )}
+        <View style={styles.cardTextContent}>
+          {data.content.title?.content && (
+            <Text style={styles.cardTitle}>{data.content.title.content}</Text>
+          )}
+          {data.content.body?.content && (
+            <Text style={styles.cardBody}>{data.content.body.content}</Text>
+          )}
+          {data.content.actionUrl && (
+            <View style={styles.actionButton}>
+              <Text style={styles.actionText}>Learn More</Text>
+            </View>
+          )}
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+  const keyExtractor = (item: ContentCardWithProposition): string => item.uniqueId;
+
+  if (loading) {
+    return (
+      <View style={styles.loading}>
+        <Text>Loading content cards...</Text>
+      </View>
+    );
+  }
+
+  return (
+    <FlatList<ContentCardWithProposition>
+      data={contentCards}
+      renderItem={renderContentCard}
+      keyExtractor={keyExtractor}
+      onViewableItemsChanged={onViewableItemsChanged}
+      viewabilityConfig={{
+        itemVisiblePercentThreshold: 50,
+        minimumViewTime: 500,
+      }}
+      contentContainerStyle={styles.flatListContainer}
+      showsVerticalScrollIndicator={false}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  flatListContainer: {
+    padding: 16,
+    flexGrow: 1,
+  },
+  cardContainer: {
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    marginBottom: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 4,
+    overflow: 'hidden',
+  },
+  cardImage: {
+    width: '100%',
+    height: 160,
+  },
+  cardTextContent: {
+    padding: 16,
+  },
+  cardTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 8,
+    color: '#333',
+  },
+  cardBody: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 16,
+    lineHeight: 20,
+  },
+  actionButton: {
+    backgroundColor: '#007AFF',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 6,
+    alignSelf: 'flex-start',
+  },
+  actionText: {
+    color: '#fff',
+    fontWeight: '600',
+    fontSize: 14,
+  },
+  loading: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default ContentCardsFlatList;
+```
+
+## Performance Considerations
+
+1. **Caching**: Content cards are cached in-memory by the Messaging extension and persist through the application's lifecycle
+2. **Batching**: Always batch surface requests when fetching content cards for multiple locations
+3. **Viewport Tracking**: Use FlatList with `onViewableItemsChanged` for accurate display tracking
+4. **Error Handling**: Implement proper error handling for all tracking calls
+
+## Wrap Up
+
+This implementation provides a comprehensive foundation for fetching, rendering, and tracking content cards in your React Native application using the `trackContentCardDisplay` and `trackContentCardInteraction` methods. These methods provide specific tracking for content card interactions, allowing for better analytics and campaign optimization.
+
+The key benefits of these tracking methods:
+- **Simplified API**: Direct methods for content card tracking without needing to handle proposition-level details
+- **Better Analytics**: More specific event data for content card interactions
+- **Easier Implementation**: Cleaner code with dedicated methods for content card events
+
+Happy coding!