diff --git a/packages/react-native-carplay/ios/RNCarPlay.m b/packages/react-native-carplay/ios/RNCarPlay.m index 2f4955a0..b2daa344 100644 --- 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 index 3633279f..4a7632cf 100644 --- 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; /**