feat(ios): refactor list template handlers from deprecated delegate and add item/image ids to handler

matt5stones · matt5stones · commit 3213da4486dd · 2025-10-22T15:23:22.000-04:00
diff --git a/packages/react-native-carplay/ios/RNCarPlay.m b/packages/react-native-carplay/ios/RNCarPlay.m
@@ -281,7 +281,6 @@ - (void)updateListRowItemImageWithURL:(CPListImageRowItem *)item imgUrl:(NSStrin
                 listTemplate.emptyViewSubtitleVariants = [RCTConvert NSArray:config[@"emptyViewSubtitleVariants"]];
             }
         }
-        listTemplate.delegate = self;
         carPlayTemplate = listTemplate;
     }
     else if ([type isEqualToString:@"map"]) {
@@ -1142,6 +1141,17 @@ - (void) applyConfigForMapTemplate:(CPMapTemplate*)mapTemplate templateId:(NSStr
 
         NSArray *_imageItems = [item objectForKey:@"images"];
         NSArray *_imageUrls = [item objectForKey:@"imgUrls"];
+        NSArray *_imageIds = [item objectForKey:@"imageIds"];
+
+        NSString *_itemId = [item objectForKey:@"id"];
+
+        if (_itemId == nil) {
+            _itemId = (id)[NSNull null];
+        }
+
+        if (_imageIds == nil) {
+            _imageIds = (id)[NSNull null];
+        }
 
         if (_imageItems == nil && _imageUrls == nil) {
             UIImage *_image = [RCTConvert UIImage:_imageObj];
@@ -1163,8 +1173,37 @@ - (void) applyConfigForMapTemplate:(CPMapTemplate*)mapTemplate templateId:(NSStr
                 NSString *imgUrlString = [RCTConvert NSString:item[@"imgUrl"]];
                 [self updateItemImageWithURL:_item imgUrl:imgUrlString];
             }
-            [_item setUserInfo:@{ @"index": @(listIndex) }];
-            [_items addObject:_item];
+            [_item setUserInfo:@{
+              @"index": @(listIndex),
+              @"itemId": _itemId
+            }];
+
+            _item.handler = ^(CPListItem *selectedItem, void (^completionHandler)(void)) {
+                NSDictionary *payload = @{
+                  @"templateId": templateId,
+                  @"index": selectedItem.userInfo[@"index"],
+                  @"itemId": selectedItem.userInfo[@"itemId"]
+                };
+                if (self->hasListeners) {
+                  [self sendEventWithName:@"didSelectListItem" body:payload];
+                }
+                self.selectedResultBlock = completionHandler;
+            };
+            if (_itemId) {
+                RNCPStore *store = [RNCPStore sharedManager];
+                NSMutableArray *existing = store.itemsStore[_itemId];
+                if (existing == nil) {
+                    existing = [NSMutableArray array];
+                    store.itemsStore[_itemId] = existing;
+                }
+                [existing addObject:_item];
+            }
+
+            if (_item) {
+              [_items addObject:_item];
+            } else {
+              NSLog(@"The item was nil can't be created %@", item);
+            }
         } else {
             // parse images
             NSMutableArray * _images = [NSMutableArray array];
@@ -1204,17 +1243,68 @@ - (void) applyConfigForMapTemplate:(CPMapTemplate*)mapTemplate templateId:(NSStr
                     }
                 }
 
+                [_item setUserInfo:@{
+                  @"index": @(listIndex),
+                  @"itemId": _itemId,
+                  @"imageIds": _imageIds
+                }];
+
                 [_item setListImageRowHandler:^(CPListImageRowItem * _Nonnull item, NSInteger index, dispatch_block_t  _Nonnull completionBlock) {
                     // Find the current template
                     RNCPStore *store = [RNCPStore sharedManager];
                     CPTemplate *template = [store findTemplateById:templateId];
+                    NSString *imageId = nil;
+
+                    id imageIdsObj = item.userInfo[@"imageIds"];
+                    if ([imageIdsObj isKindOfClass:[NSArray class]]) {
+                        NSArray *imageIds = (NSArray *)imageIdsObj;
+                        if (index < imageIds.count) {
+                            id candidate = imageIds[index];
+                            if ([candidate isKindOfClass:[NSString class]]) {
+                                imageId = candidate;
+                            }
+                        }
+                    }
+
+                    if (!imageId) {
+                        imageId = (NSString *)[NSNull null];
+                    }
+
                     if (template) {
-                        [self sendTemplateEventWithName:template name:@"didSelectListItemRowImage" json:@{ @"index": @(listIndex), @"imageIndex": @(index)}];
+                        NSMutableDictionary *payload = [@{
+                            @"index": @(listIndex),
+                            @"imageIndex": @(index),
+                            @"itemId": item.userInfo[@"itemId"],
+                        } mutableCopy];
+
+                        if (![imageId isKindOfClass:[NSNull class]]) {
+                            payload[@"imageId"] = imageId;
+                        }
+
+                        [self sendTemplateEventWithName:template
+                            name:@"didSelectListItemRowImage"
+                            json:payload];
                     }
                 }];
 
-                [_item setUserInfo:@{ @"index": @(listIndex) }];
-                [_items addObject:_item];
+                _item.handler = ^(CPListItem *selectedItem, void (^completionHandler)(void)) {
+                    NSDictionary *payload = @{
+                      @"templateId": templateId,
+                      @"index": selectedItem.userInfo[@"index"],
+                      @"itemId": selectedItem.userInfo[@"itemId"]
+                    };
+
+                    if (self->hasListeners) {
+                      [self sendEventWithName:@"didSelectListItem" body:payload];
+                    }
+
+                    self.selectedResultBlock = completionHandler;
+                };
+                if (_item) {
+                  [_items addObject:_item];
+                } else {
+                  NSLog(@"The image row item could not be created: %@", item);
+                }
             }
 
         }
@@ -1433,10 +1523,28 @@ - (void)sendTemplateEventWithName:(CPTemplate *)template name:(NSString*)name {
     [self sendTemplateEventWithName:template name:name json:@{}];
 }
 
-- (void)sendTemplateEventWithName:(CPTemplate *)template name:(NSString*)name json:(NSDictionary*)json {
-    NSMutableDictionary *body = [[NSMutableDictionary alloc] initWithDictionary:json];
-    NSDictionary *userInfo = [template userInfo];
-    [body setObject:[userInfo objectForKey:@"templateId"] forKey:@"templateId"];
+- (void)sendTemplateEventWithName:(CPTemplate *)template name:(NSString *)name json:(NSDictionary *)json {
+    NSMutableDictionary *body = [[NSMutableDictionary alloc] initWithDictionary:json ?: @{}];
+
+    NSString *templateId = nil;
+    NSDictionary *userInfo = nil;
+
+    if ([template respondsToSelector:@selector(userInfo)]) {
+        userInfo = [template userInfo];
+    }
+
+    if ([userInfo isKindOfClass:[NSDictionary class]]) {
+        id value = userInfo[@"templateId"];
+        if ([value isKindOfClass:[NSString class]]) {
+            templateId = (NSString *)value;
+        }
+    }
+
+    if (templateId.length > 0) {
+        body[@"templateId"] = templateId;
+    }
+    body[@"templateId"] = templateId ?: @"";
+
     if (hasListeners) {
         [self sendEventWithName:name body:body];
     }
@@ -1538,14 +1646,6 @@ - (void)searchTemplate:(CPSearchTemplate *)searchTemplate updatedSearchText:(NSS
     self.searchResultBlock = completionHandler;
 }
 
-# pragma ListTemplate
-
-- (void)listTemplate:(CPListTemplate *)listTemplate didSelectListItem:(CPListItem *)item completionHandler:(void (^)(void))completionHandler {
-    NSNumber* index = [item.userInfo objectForKey:@"index"];
-    [self sendTemplateEventWithName:listTemplate name:@"didSelectListItem" json:@{ @"index": index }];
-    self.selectedResultBlock = completionHandler;
-}
-
 # pragma TabBarTemplate
 - (void)tabBarTemplate:(CPTabBarTemplate *)tabBarTemplate didSelectTemplate:(__kindof CPTemplate *)selectedTemplate {
     NSString* selectedTemplateId = [[selectedTemplate userInfo] objectForKey:@"templateId"];
diff --git a/packages/react-native-carplay/src/CarPlay.ts b/packages/react-native-carplay/src/CarPlay.ts
@@ -158,21 +158,62 @@ export class CarPlayInterface {
    */
   public emitter = new NativeEventEmitter(RNCarPlay);
 
+  public selectListItemListenerMap = new Map<
+    string,
+    (e: { templateId: string; index: number; itemId?: string }) => void
+  >();
+  public selectListItemRowImageListenerMap = new Map<
+    string,
+    (e: {
+      templateId: string;
+      index: number;
+      itemId?: string;
+      imageIndex: number;
+      imageId?: string;
+    }) => void
+  >();
+
   private onConnectCallbacks = new Set<OnConnectCallback>();
   private onDisconnectCallbacks = new Set<OnDisconnectCallback>();
 
   constructor() {
     this.emitter.addListener('didConnect', (window: WindowInformation) => {
-      console.log('we are connected yes!');
+      console.log('Carplay Connected');
       this.connected = true;
       this.window = window;
+      this.emitter.addListener(
+        'didSelectListItem',
+        (e: { templateId: string; index: number; itemId?: string }) => {
+          const templateListener = this.selectListItemListenerMap.get(e.templateId);
+          if (templateListener) {
+            templateListener(e);
+          }
+        },
+      );
+      this.emitter.addListener(
+        'didSelectListItemRowImage',
+        (e: {
+          templateId: string;
+          index: number;
+          itemId?: string;
+          imageIndex: number;
+          imageId?: string;
+        }) => {
+          const templateListener = this.selectListItemRowImageListenerMap.get(e.templateId);
+          if (templateListener) {
+            templateListener(e);
+          }
+        },
+      );
       this.onConnectCallbacks.forEach(callback => {
         callback(window);
       });
     });
     this.emitter.addListener('didDisconnect', () => {
       this.connected = false;
       this.window = undefined;
+      this.emitter.removeAllListeners('didSelectListItem');
+      this.emitter.removeAllListeners('didSelectListItemRowImage');
       this.onDisconnectCallbacks.forEach(callback => {
         callback();
       });
diff --git a/packages/react-native-carplay/src/interfaces/ListItem.ts b/packages/react-native-carplay/src/interfaces/ListItem.ts
@@ -35,6 +35,11 @@ export interface ListItem {
    * @namespace iOS
    */
   imgUrls?: string[];
+  /**
+   * ids corresponding to the images in imgUrls or images which will be passed back on list row item selected
+   * @namespace iOS
+  */
+  imageIds?: string[];
   /**
    * A Boolean value indicating whether the list item cell shows a disclosure indicator on the trailing edge of the list item cell.
    * @namespace iOS
diff --git a/packages/react-native-carplay/src/templates/ListTemplate.ts b/packages/react-native-carplay/src/templates/ListTemplate.ts
@@ -50,7 +50,12 @@ export interface ListTemplateConfig extends TemplateConfig {
    * When the returned promise is resolved the spinner will hide.
    * @param item Object with the selected index
    */
-  onItemSelect?(item: { templateId: string; index: number }): Promise<void>;
+  onItemSelect?(
+    item: {
+      templateId: string;
+      index: number;
+      itemId?: string;
+    }): Promise<void>;
 
   /**
    * Fired when image row item is selected.
@@ -61,7 +66,9 @@ export interface ListTemplateConfig extends TemplateConfig {
   onImageRowItemSelect?(item: {
     templateId: string;
     index: number;
+    itemId?: string;
     imageIndex: number;
+    imageId?: string;
   }): Promise<void>;
 
   /**
@@ -128,20 +135,29 @@ export class ListTemplate extends Template<ListTemplateConfig> {
   constructor(public config: ListTemplateConfig) {
     super(config);
 
-    CarPlay.emitter.addListener('didSelectListItem', (e: { templateId: string; index: number }) => {
-      if (config.onItemSelect && e.templateId === this.id) {
-        void Promise.resolve(config.onItemSelect(e)).then(() => {
-          if (Platform.OS === 'ios') {
-            CarPlay.bridge.reactToSelectedResult(true);
-          }
-        });
-      }
-    });
-
-    CarPlay.emitter.addListener(
-      'didSelectListItemRowImage',
-      (e: { templateId: string; index: number; imageIndex: number }) => {
-        if (config.onImageRowItemSelect && e.templateId === this.id) {
+    CarPlay.selectListItemListenerMap.set(
+      this.id,
+      (e: { templateId: string; index: number; itemId?: string }) => {
+        if (config.onItemSelect) {
+          void Promise.resolve(config.onItemSelect(e)).then(() => {
+            if (Platform.OS === 'ios') {
+              CarPlay.bridge.reactToSelectedResult(true);
+            }
+          });
+        }
+      },
+    );
+
+    CarPlay.selectListItemRowImageListenerMap.set(
+      this.id,
+      (e: {
+        templateId: string;
+        index: number;
+        itemId?: string;
+        imageIndex: number;
+        imageId?: string;
+      }) => {
+        if (config.onImageRowItemSelect) {
           void Promise.resolve(config.onImageRowItemSelect(e)).then(() => {
             if (Platform.OS === 'ios') {
               CarPlay.bridge.reactToSelectedResult(true);
