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
birkir · Aug 29, 2023 · 04639f3 · 04639f3
1 parent 69de874
commit 04639f3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/packages/react-native-carplay/ios/RNCarPlay.m b/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) {
@@ -610,7 +626,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"]]];
@@ -967,9 +984,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;
@@ -980,6 +994,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;

diff --git a/packages/react-native-carplay/src/interfaces/ListItem.ts b/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;
  /**