feat: load ListItem images asynchronously

Synchronous image loading is generally a bad idea for performance reasons.
This changes image loading to asynchronous via a NSURLSessionDataTask.

Also: Fix inline documentation for ListItem images

Author: DanielKuhn

packages/react-native-carplay/ios/RNCarPlay.m

@@ -160,6 +160,22 @@ - (UIImage *)imageWithSize:(UIImage *)image convertToSize:(CGSize)size {
     return destImage;
 }
 
+- (void)updateItemImageWithURL:(CPListItem *)item imgUrl:(NSString *)imgUrlString {
+    NSURL *imgUrl = [NSURL URLWithString:imgUrlString];
+    
+    NSURLSessionDataTask *task = [[NSURLSession sharedSession] dataTaskWithURL:imgUrl completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) {
+        if (data) {
+            UIImage *image = [UIImage imageWithData:data];
+            dispatch_async(dispatch_get_main_queue(), ^{
+                [item setImage:image];
+            });
+        } else {
+            NSLog(@"Failed to load image from URL: %@", imgUrl);
+        }
+    }];
+    [task resume];
+}
+
 RCT_EXPORT_METHOD(checkForConnection) {
     RNCPStore *store = [RNCPStore sharedManager];
     if ([store isConnected] && hasListeners) {
@@ -599,7 +615,8 @@ - (UIImage *)imageWithSize:(UIImage *)image convertToSize:(CGSize)size {
         }
         CPListItem *item = (CPListItem *)section.items[index];
         if (config[@"imgUrl"]) {
-            [item setImage:[[UIImage alloc] initWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:[RCTConvert NSString:config[@"imgUrl"]]]]]];
+            NSString *imgUrlString = [RCTConvert NSString:config[@"imgUrl"]];
+            [self updateItemImageWithURL:item imgUrl:imgUrlString];
         }
         if (config[@"image"]) {
             [item setImage:[RCTConvert UIImage:config[@"image"]]];
@@ -956,9 +973,6 @@ - (void) applyConfigForMapTemplate:(CPMapTemplate*)mapTemplate templateId:(NSStr
         NSString *_detailText = [item objectForKey:@"detailText"];
         NSString *_text = [item objectForKey:@"text"];
         UIImage *_image = [RCTConvert UIImage:[item objectForKey:@"image"]];
-        if (item[@"imgUrl"]) {
-            _image = [[UIImage alloc] initWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:[RCTConvert NSString:item[@"imgUrl"]]]]];
-        }
         CPListItem *_item;
         if (@available(iOS 14.0, *)) {
             CPListItemAccessoryType accessoryType = _showsDisclosureIndicator ? CPListItemAccessoryTypeDisclosureIndicator : CPListItemAccessoryTypeNone;
@@ -969,6 +983,10 @@ - (void) applyConfigForMapTemplate:(CPMapTemplate*)mapTemplate templateId:(NSStr
         if ([item objectForKey:@"isPlaying"]) {
             [_item setPlaying:[RCTConvert BOOL:[item objectForKey:@"isPlaying"]]];
         }
+        if (item[@"imgUrl"]) {
+            NSString *imgUrlString = [RCTConvert NSString:item[@"imgUrl"]];
+            [self updateItemImageWithURL:_item imgUrl:imgUrlString];
+        }
         [_item setUserInfo:@{ @"index": @(index) }];
         [_items addObject:_item];
         index = index + 1;

packages/react-native-carplay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-carplay",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "CarPlay for React Native",
   "main": "lib/index.js",
   "react-native": "src/index.ts",

packages/react-native-carplay/src/interfaces/ListItem.ts

@@ -13,11 +13,11 @@ export interface ListItem {
    */
   detailText?: string;
   /**
-   * The image displayed on the leading edge of the list item cell.
+   * Image from file system displayed on the leading edge of the list item cell.
    */
   image?: ImageSourcePropType;
   /**
-   * The image from file system displayed on the leading edge of the list item cell.
+   * Url for image displayed on the leading edge of the list item cell.
    */
   imgUrl?: null;
   /**