@javascriptcommon/react-native-carplay 2.4.7 → 2.4.8

package/ios/RNCarPlay.m

@@ -2,10 +2,12 @@
 #import "RNCarPlayViewController.h"
 #import <React/RCTConvert.h>
 #import <React/RCTRootView.h>
+#import <React/RCTImageSource.h>
 
 @implementation RNCarPlay
 {
     bool hasListeners;
+    NSCache<NSString *, UIImage *> *_imageCache;
 }
 
 @synthesize interfaceController;
@@ -59,6 +61,8 @@ RCT_EXPORT_MODULE();
     static dispatch_once_t onceToken;
     dispatch_once(&onceToken, ^{
         sharedInstance = [super allocWithZone:zone];
+        sharedInstance->_imageCache = [[NSCache alloc] init];
+        sharedInstance->_imageCache.countLimit = 100; // Cache up to 100 images
     });
     return sharedInstance;
 }
@@ -167,69 +171,191 @@ RCT_EXPORT_MODULE();
     return resizedImage;
 }
 
+// Helper method to load image asynchronously using React Native's image loader
+- (void)loadImageAsync:(id)imageSource completion:(void (^)(UIImage *image))completion {
+    if (imageSource == nil || [imageSource isKindOfClass:[NSNull class]]) {
+        if (completion) completion(nil);
+        return;
+    }
+
+    // Check if it's a dictionary with a 'uri' key (React Native image source)
+    if ([imageSource isKindOfClass:[NSDictionary class]]) {
+        NSDictionary *imageDict = (NSDictionary *)imageSource;
+        NSString *uri = imageDict[@"uri"];
+
+        if (uri) {
+            // Check cache first
+            UIImage *cachedImage = [_imageCache objectForKey:uri];
+            if (cachedImage) {
+                if (completion) completion(cachedImage);
+                return;
+            }
+
+            // Use React Native's image loader for proper async loading with caching
+            RCTImageLoader *imageLoader = [self.bridge moduleForClass:[RCTImageLoader class]];
+            RCTImageSource *source = [[RCTImageSource alloc] initWithURLRequest:[RCTConvert NSURLRequest:imageSource] size:CGSizeZero scale:1];
+
+            [imageLoader loadImageWithURLRequest:source.request callback:^(NSError *error, UIImage *image) {
+                if (image) {
+                    [self->_imageCache setObject:image forKey:uri];
+                }
+                if (completion) completion(image);
+            }];
+            return;
+        }
+    }
+
+    // Not a URL, use synchronous loading (local assets)
+    UIImage *image = [RCTConvert UIImage:imageSource];
+    if (completion) completion(image);
+}
+
+// Helper to load multiple images asynchronously
+- (void)loadImagesAsync:(NSArray *)imageSources completion:(void (^)(NSArray<UIImage *> *images))completion {
+    if (imageSources == nil || imageSources.count == 0) {
+        if (completion) completion(@[]);
+        return;
+    }
+
+    NSMutableArray<UIImage *> *results = [NSMutableArray arrayWithCapacity:imageSources.count];
+    for (NSUInteger i = 0; i < imageSources.count; i++) {
+        [results addObject:[NSNull null]]; // Placeholder
+    }
+
+    __block NSUInteger completedCount = 0;
+    NSUInteger totalCount = imageSources.count;
+
+    for (NSUInteger i = 0; i < imageSources.count; i++) {
+        id source = imageSources[i];
+        [self loadImageAsync:source completion:^(UIImage *image) {
+            if (image) {
+                results[i] = image;
+            }
+            completedCount++;
+            if (completedCount == totalCount) {
+                // Remove NSNull placeholders
+                NSMutableArray<UIImage *> *finalResults = [NSMutableArray array];
+                for (id obj in results) {
+                    if ([obj isKindOfClass:[UIImage class]]) {
+                        [finalResults addObject:obj];
+                    }
+                }
+                if (completion) completion(finalResults);
+            }
+        }];
+    }
+}
+
+// Helper to load images for NowPlayingButtons - maintains order, returns array with images or NSNull for failed loads
+- (void)loadImagesForNowPlayingButtons:(NSArray *)imageSources completion:(void (^)(NSArray *images))completion {
+    if (imageSources == nil || imageSources.count == 0) {
+        if (completion) completion(@[]);
+        return;
+    }
+
+    NSMutableArray *results = [NSMutableArray arrayWithCapacity:imageSources.count];
+    for (NSUInteger i = 0; i < imageSources.count; i++) {
+        [results addObject:[NSNull null]]; // Placeholder
+    }
+
+    __block NSUInteger completedCount = 0;
+    NSUInteger totalCount = imageSources.count;
+
+    for (NSUInteger i = 0; i < imageSources.count; i++) {
+        id source = imageSources[i];
+        if ([source isKindOfClass:[NSNull class]]) {
+            completedCount++;
+            if (completedCount == totalCount && completion) {
+                completion([results copy]);
+            }
+            continue;
+        }
+
+        [self loadImageAsync:source completion:^(UIImage *image) {
+            if (image) {
+                results[i] = image;
+            }
+            // NSNull remains for failed loads
+            completedCount++;
+            if (completedCount == totalCount && completion) {
+                completion([results copy]);
+            }
+        }];
+    }
+}
+
 - (void)updateItemImageWithURL:(CPListItem *)item imgUrl:(NSString *)imgUrlString placeholderImage:(UIImage *)placeholderImage {
+    // Check cache first
+    UIImage *cachedImage = [_imageCache objectForKey:imgUrlString];
+    if (cachedImage) {
+        [item setImage:cachedImage];
+        return;
+    }
+
     if (placeholderImage != nil) {
-        dispatch_async(dispatch_get_main_queue(), ^{
-            [item setImage:placeholderImage];
-        });
+        [item setImage:placeholderImage];
     }
 
-    NSURL *imgUrl = [NSURL URLWithString:imgUrlString];
+    // Use React Native's image loader
+    RCTImageLoader *imageLoader = [self.bridge moduleForClass:[RCTImageLoader class]];
+    NSURLRequest *request = [NSURLRequest requestWithURL:[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);
+    [imageLoader loadImageWithURLRequest:request callback:^(NSError *error, UIImage *image) {
+        if (image) {
+            [self->_imageCache setObject:image forKey:imgUrlString];
+            [item setImage:image];
+        } else if (error) {
+            NSLog(@"Failed to load image from URL: %@ - %@", imgUrlString, error);
         }
     }];
-    [task resume];
 }
 
 - (void)updateListRowItemImageWithURL:(CPListImageRowItem *)item imgUrl:(NSString *)imgUrlString index:(int)index placeholderImage:(UIImage *)placeholderImage {
+    // Check cache first
+    UIImage *cachedImage = [_imageCache objectForKey:imgUrlString];
+    if (cachedImage) {
+        NSMutableArray* newImages = [item.gridImages mutableCopy];
+        @try {
+            newImages[index] = cachedImage;
+            [item updateImages:newImages];
+        }
+        @catch (NSException *exception) {
+            NSLog(@"Failed to update images array of CPListImageRowItem");
+        }
+        return;
+    }
+
     if (placeholderImage != nil) {
-        dispatch_async(dispatch_get_main_queue(), ^{
+        NSMutableArray* newImages = [item.gridImages mutableCopy];
+        @try {
+            newImages[index] = placeholderImage;
+            [item updateImages:newImages];
+        }
+        @catch (NSException *exception) {
+            NSLog(@"Failed to update images array of CPListImageRowItem");
+        }
+    }
+
+    // Use React Native's image loader
+    RCTImageLoader *imageLoader = [self.bridge moduleForClass:[RCTImageLoader class]];
+    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:imgUrlString]];
+
+    [imageLoader loadImageWithURLRequest:request callback:^(NSError *error, UIImage *image) {
+        if (image) {
+            [self->_imageCache setObject:image forKey:imgUrlString];
+
             NSMutableArray* newImages = [item.gridImages mutableCopy];
-            
             @try {
-                newImages[index] = placeholderImage;
+                newImages[index] = image;
+                [item updateImages:newImages];
             }
             @catch (NSException *exception) {
-                // Best effort updating the array
                 NSLog(@"Failed to update images array of CPListImageRowItem");
             }
-            
-            [item updateImages:newImages];
-        });
-    }
-    
-    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(), ^{
-                NSMutableArray* newImages = [item.gridImages mutableCopy];
-                
-                @try {
-                    newImages[index] = image;
-                }
-                @catch (NSException *exception) {
-                    // Best effort updating the array
-                    NSLog(@"Failed to update images array of CPListImageRowItem");
-                }                
-                
-                [item updateImages:newImages];                
-            });
-        } else {
-            NSLog(@"Failed to load image for CPListImageRowItem from URL: %@", imgUrl);
+        } else if (error) {
+            NSLog(@"Failed to load image for CPListImageRowItem from URL: %@ - %@", imgUrlString, error);
         }
     }];
-    [task resume];
 }
 
 RCT_EXPORT_METHOD(checkForConnection) {
@@ -325,44 +451,80 @@ RCT_EXPORT_METHOD(createTemplate:(NSString *)templateId config:(NSDictionary*)co
         [nowPlayingTemplate setAlbumArtistButtonEnabled:[RCTConvert BOOL:config[@"albumArtistButtonEnabled"]]];
         [nowPlayingTemplate setUpNextTitle:[RCTConvert NSString:config[@"upNextButtonTitle"]]];
         [nowPlayingTemplate setUpNextButtonEnabled:[RCTConvert BOOL:config[@"upNextButtonEnabled"]]];
-        NSMutableArray<CPNowPlayingButton *> *buttons = [NSMutableArray new];
+
         NSArray<NSDictionary*> *_buttons = [RCTConvert NSDictionaryArray:config[@"buttons"]];
-        
-        NSDictionary *buttonTypeMapping = @{
-            @"shuffle": CPNowPlayingShuffleButton.class,
-            @"add-to-library": CPNowPlayingAddToLibraryButton.class,
-            @"more": CPNowPlayingMoreButton.class,
-            @"playback": CPNowPlayingPlaybackRateButton.class,
-            @"repeat": CPNowPlayingRepeatButton.class,
-            @"image": CPNowPlayingImageButton.class
-        };
-        
-        for (NSDictionary *_button in _buttons) {
+
+        // Collect all image sources for image-type buttons
+        NSMutableArray *imageSources = [NSMutableArray new];
+        for (NSUInteger i = 0; i < _buttons.count; i++) {
+            NSDictionary *_button = _buttons[i];
             NSString *buttonType = [RCTConvert NSString:_button[@"type"]];
-            NSDictionary *body = @{@"templateId":templateId, @"id": _button[@"id"] };
-            Class buttonClass = buttonTypeMapping[buttonType];
-            if (buttonClass) {
-                CPNowPlayingButton *button;
-                
-                if ([buttonType isEqualToString:@"image"]) {
-                    UIImage *_image = [RCTConvert UIImage:[_button objectForKey:@"image"]];
-                    button = [[CPNowPlayingImageButton alloc] initWithImage:_image handler:^(__kindof CPNowPlayingImageButton * _Nonnull) {
-                        if (self->hasListeners) {
-                            [self sendEventWithName:@"buttonPressed" body:body];
-                        }
-                    }];
-                } else {
-                    button = [[buttonClass alloc] initWithHandler:^(__kindof CPNowPlayingButton * _Nonnull) {
-                        if (self->hasListeners) {
-                            [self sendEventWithName:@"buttonPressed" body:body];
+            if ([buttonType isEqualToString:@"image"]) {
+                id imageSource = [_button objectForKey:@"image"];
+                [imageSources addObject:imageSource ?: [NSNull null]];
+            }
+        }
+
+        // Pre-load all images, then create buttons
+        [self loadImagesForNowPlayingButtons:imageSources completion:^(NSArray *loadedImages) {
+            NSMutableArray<CPNowPlayingButton *> *buttons = [NSMutableArray new];
+
+            NSDictionary *buttonTypeMapping = @{
+                @"shuffle": CPNowPlayingShuffleButton.class,
+                @"add-to-library": CPNowPlayingAddToLibraryButton.class,
+                @"more": CPNowPlayingMoreButton.class,
+                @"playback": CPNowPlayingPlaybackRateButton.class,
+                @"repeat": CPNowPlayingRepeatButton.class,
+                @"image": CPNowPlayingImageButton.class
+            };
+
+            NSUInteger imageIndex = 0;
+            for (NSUInteger i = 0; i < _buttons.count; i++) {
+                NSDictionary *_button = _buttons[i];
+                NSString *buttonType = [RCTConvert NSString:_button[@"type"]];
+                NSDictionary *body = @{@"templateId":templateId, @"id": _button[@"id"] ?: @"" };
+                Class buttonClass = buttonTypeMapping[buttonType];
+
+                if (buttonClass) {
+                    CPNowPlayingButton *button;
+
+                    if ([buttonType isEqualToString:@"image"]) {
+                        id imageObj = (imageIndex < loadedImages.count) ? loadedImages[imageIndex] : nil;
+                        UIImage *image = ([imageObj isKindOfClass:[UIImage class]]) ? (UIImage *)imageObj : nil;
+                        imageIndex++;
+
+                        if (image) {
+                            button = [[CPNowPlayingImageButton alloc] initWithImage:image handler:^(__kindof CPNowPlayingImageButton * _Nonnull) {
+                                if (self->hasListeners) {
+                                    [self sendEventWithName:@"buttonPressed" body:body];
+                                }
+                            }];
+                        } else {
+                            // Fallback: create a minimal placeholder if image failed to load
+                            UIImage *placeholder = [UIImage systemImageNamed:@"circle"];
+                            button = [[CPNowPlayingImageButton alloc] initWithImage:placeholder handler:^(__kindof CPNowPlayingImageButton * _Nonnull) {
+                                if (self->hasListeners) {
+                                    [self sendEventWithName:@"buttonPressed" body:body];
+                                }
+                            }];
                         }
-                    }];
+                    } else {
+                        button = [[buttonClass alloc] initWithHandler:^(__kindof CPNowPlayingButton * _Nonnull) {
+                            if (self->hasListeners) {
+                                [self sendEventWithName:@"buttonPressed" body:body];
+                            }
+                        }];
+                    }
+
+                    [buttons addObject:button];
                 }
-                
-                [buttons addObject:button];
             }
-        }
-        [nowPlayingTemplate updateNowPlayingButtons:buttons];
+
+            dispatch_async(dispatch_get_main_queue(), ^{
+                [nowPlayingTemplate updateNowPlayingButtons:buttons];
+            });
+        }];
+
         carPlayTemplate = nowPlayingTemplate;
     } else if ([type isEqualToString:@"tabbar"]) {
         CPTabBarTemplate *tabBarTemplate = [[CPTabBarTemplate alloc] initWithTemplates:[self parseTemplatesFrom:config]];
@@ -370,7 +532,8 @@ RCT_EXPORT_METHOD(createTemplate:(NSString *)templateId config:(NSDictionary*)co
         carPlayTemplate = tabBarTemplate;
     } else if ([type isEqualToString:@"contact"]) {
         NSString *nm = [RCTConvert NSString:config[@"name"]];
-        UIImage *img = [RCTConvert UIImage:config[@"image"]];
+        id imageSource = config[@"image"];
+        UIImage *img = [self isImageSourceURL:imageSource] ? nil : [RCTConvert UIImage:imageSource];
         CPContact *contact = [[CPContact alloc] initWithName:nm image:img];
         [contact setSubtitle:config[@"subtitle"]];
         [contact setActions:[self parseButtons:config[@"actions"] templateId:templateId]];
@@ -452,7 +615,13 @@ RCT_EXPORT_METHOD(createTemplate:(NSString *)templateId config:(NSDictionary*)co
         carPlayTemplate.tabImage = [UIImage systemImageNamed:[RCTConvert NSString:config[@"tabSystemImageName"]]];
     }
     if (config[@"tabImage"]) {
-        carPlayTemplate.tabImage = [RCTConvert UIImage:config[@"tabImage"]];
+        id tabImageSource = config[@"tabImage"];
+        if ([self isImageSourceURL:tabImageSource]) {
+            // Tab images with URLs need to be loaded async, but tabImage setter doesn't update later
+            // For now, skip URL-based tab images
+        } else {
+            carPlayTemplate.tabImage = [RCTConvert UIImage:tabImageSource];
+        }
     }
     if (config[@"tabTitle"]) {
         carPlayTemplate.tabTitle = [RCTConvert NSString:config[@"tabTitle"]];
@@ -569,11 +738,12 @@ RCT_EXPORT_METHOD(setRootTemplate:(NSString *)templateId animated:(BOOL)animated
 
     if (template) {
         [store.interfaceController setRootTemplate:template animated:animated completion:^(BOOL done, NSError * _Nullable err) {
-            NSLog(@"error %@", err);
-            // noop
+            if (err) {
+                NSLog(@"Set root template error: %@", err);
+            }
         }];
     } else {
-        NSLog(@"Failed to find template %@", template);
+        NSLog(@"Failed to find template %@", templateId);
     }
 }
 
@@ -581,12 +751,19 @@ RCT_EXPORT_METHOD(pushTemplate:(NSString *)templateId animated:(BOOL)animated) {
     RNCPStore *store = [RNCPStore sharedManager];
     CPTemplate *template = [store findTemplateById:templateId];
     if (template) {
+        // Check if template is already on the navigation stack
+        NSArray *currentTemplates = store.interfaceController.templates;
+        if ([currentTemplates containsObject:template]) {
+            NSLog(@"Template %@ is already on the navigation stack, skipping push", templateId);
+            return;
+        }
         [store.interfaceController pushTemplate:template animated:animated completion:^(BOOL done, NSError * _Nullable err) {
-            NSLog(@"error %@", err);
-            // noop
+            if (err) {
+                NSLog(@"Push template error: %@", err);
+            }
         }];
     } else {
-        NSLog(@"Failed to find template %@", template);
+        NSLog(@"Failed to find template %@", templateId);
     }
 }
 
@@ -595,27 +772,30 @@ RCT_EXPORT_METHOD(popToTemplate:(NSString *)templateId animated:(BOOL)animated)
     CPTemplate *template = [store findTemplateById:templateId];
     if (template) {
         [store.interfaceController popToTemplate:template animated:animated completion:^(BOOL done, NSError * _Nullable err) {
-            NSLog(@"error %@", err);
-            // noop
+            if (err) {
+                NSLog(@"Pop to template error: %@", err);
+            }
         }];
     } else {
-        NSLog(@"Failed to find template %@", template);
+        NSLog(@"Failed to find template %@", templateId);
     }
 }
 
 RCT_EXPORT_METHOD(popToRootTemplate:(BOOL)animated) {
     RNCPStore *store = [RNCPStore sharedManager];
     [store.interfaceController popToRootTemplateAnimated:animated completion:^(BOOL done, NSError * _Nullable err) {
-        NSLog(@"error %@", err);
-        // noop
+        if (err) {
+            NSLog(@"Pop to root template error: %@", err);
+        }
     }];
 }
 
 RCT_EXPORT_METHOD(popTemplate:(BOOL)animated) {
     RNCPStore *store = [RNCPStore sharedManager];
     [store.interfaceController popTemplateAnimated:animated completion:^(BOOL done, NSError * _Nullable err) {
-        NSLog(@"error %@", err);
-        // noop
+        if (err) {
+            NSLog(@"Pop template error: %@", err);
+        }
     }];
 }
 
@@ -623,12 +803,18 @@ RCT_EXPORT_METHOD(presentTemplate:(NSString *)templateId animated:(BOOL)animated
     RNCPStore *store = [RNCPStore sharedManager];
     CPTemplate *template = [store findTemplateById:templateId];
     if (template) {
+        // Check if template is already presented
+        if (store.interfaceController.presentedTemplate == template) {
+            NSLog(@"Template %@ is already presented, skipping", templateId);
+            return;
+        }
         [store.interfaceController presentTemplate:template animated:animated completion:^(BOOL done, NSError * _Nullable err) {
-            NSLog(@"error %@", err);
-            // noop
+            if (err) {
+                NSLog(@"Present template error: %@", err);
+            }
         }];
     } else {
-        NSLog(@"Failed to find template %@", template);
+        NSLog(@"Failed to find template %@", templateId);
     }
 }
 
@@ -637,6 +823,152 @@ RCT_EXPORT_METHOD(dismissTemplate:(BOOL)animated) {
     [store.interfaceController dismissTemplateAnimated:animated];
 }
 
+RCT_EXPORT_METHOD(updateTemplate:(NSString *)templateId config:(NSDictionary*)config) {
+    RNCPStore *store = [RNCPStore sharedManager];
+    CPTemplate *template = [store findTemplateById:templateId];
+    NSString *type = [RCTConvert NSString:config[@"type"]];
+
+    if (!template) {
+        NSLog(@"Failed to find template %@", templateId);
+        return;
+    }
+
+    // Route to specific update methods based on template type
+    if ([template isKindOfClass:[CPListTemplate class]]) {
+        CPListTemplate *listTemplate = (CPListTemplate *)template;
+        if (config[@"leadingNavigationBarButtons"]) {
+            NSArray *leadingNavigationBarButtons = [self parseBarButtons:[RCTConvert NSArray:config[@"leadingNavigationBarButtons"]] templateId:templateId];
+            [listTemplate setLeadingNavigationBarButtons:leadingNavigationBarButtons];
+        }
+        if (config[@"trailingNavigationBarButtons"]) {
+            NSArray *trailingNavigationBarButtons = [self parseBarButtons:[RCTConvert NSArray:config[@"trailingNavigationBarButtons"]] templateId:templateId];
+            [listTemplate setTrailingNavigationBarButtons:trailingNavigationBarButtons];
+        }
+        if (config[@"emptyViewTitleVariants"]) {
+            listTemplate.emptyViewTitleVariants = [RCTConvert NSArray:config[@"emptyViewTitleVariants"]];
+        }
+        if (config[@"emptyViewSubtitleVariants"]) {
+            listTemplate.emptyViewSubtitleVariants = [RCTConvert NSArray:config[@"emptyViewSubtitleVariants"]];
+        }
+        if (config[@"sections"]) {
+            [listTemplate updateSections:[self parseSections:[RCTConvert NSArray:config[@"sections"]] templateId:templateId]];
+        }
+    } else if ([template isKindOfClass:[CPGridTemplate class]]) {
+        CPGridTemplate *gridTemplate = (CPGridTemplate *)template;
+        if (config[@"leadingNavigationBarButtons"]) {
+            NSArray *leadingNavigationBarButtons = [self parseBarButtons:[RCTConvert NSArray:config[@"leadingNavigationBarButtons"]] templateId:templateId];
+            [gridTemplate setLeadingNavigationBarButtons:leadingNavigationBarButtons];
+        }
+        if (config[@"trailingNavigationBarButtons"]) {
+            NSArray *trailingNavigationBarButtons = [self parseBarButtons:[RCTConvert NSArray:config[@"trailingNavigationBarButtons"]] templateId:templateId];
+            [gridTemplate setTrailingNavigationBarButtons:trailingNavigationBarButtons];
+        }
+        if (config[@"buttons"]) {
+            NSArray *buttons = [self parseGridButtons:[RCTConvert NSArray:config[@"buttons"]] templateId:templateId];
+            [gridTemplate updateGridButtons:buttons];
+        }
+    } else if ([template isKindOfClass:[CPNowPlayingTemplate class]]) {
+        CPNowPlayingTemplate *nowPlayingTemplate = (CPNowPlayingTemplate *)template;
+        if (config[@"albumArtistButtonEnabled"]) {
+            [nowPlayingTemplate setAlbumArtistButtonEnabled:[RCTConvert BOOL:config[@"albumArtistButtonEnabled"]]];
+        }
+        if (config[@"upNextButtonTitle"]) {
+            [nowPlayingTemplate setUpNextTitle:[RCTConvert NSString:config[@"upNextButtonTitle"]]];
+        }
+        if (config[@"upNextButtonEnabled"]) {
+            [nowPlayingTemplate setUpNextButtonEnabled:[RCTConvert BOOL:config[@"upNextButtonEnabled"]]];
+        }
+        if (config[@"buttons"]) {
+            NSArray<NSDictionary*> *_buttons = [RCTConvert NSDictionaryArray:config[@"buttons"]];
+
+            // Collect all image sources for image-type buttons
+            NSMutableArray *imageSources = [NSMutableArray new];
+            NSMutableArray *imageIndices = [NSMutableArray new]; // Track which buttons need images
+
+            for (NSUInteger i = 0; i < _buttons.count; i++) {
+                NSDictionary *_button = _buttons[i];
+                NSString *buttonType = [RCTConvert NSString:_button[@"type"]];
+                if ([buttonType isEqualToString:@"image"]) {
+                    id imageSource = [_button objectForKey:@"image"];
+                    [imageSources addObject:imageSource ?: [NSNull null]];
+                    [imageIndices addObject:@(i)];
+                }
+            }
+
+            // Pre-load all images, then create buttons
+            [self loadImagesForNowPlayingButtons:imageSources completion:^(NSArray *loadedImages) {
+                NSMutableArray<CPNowPlayingButton *> *buttons = [NSMutableArray new];
+
+                NSDictionary *buttonTypeMapping = @{
+                    @"shuffle": CPNowPlayingShuffleButton.class,
+                    @"add-to-library": CPNowPlayingAddToLibraryButton.class,
+                    @"more": CPNowPlayingMoreButton.class,
+                    @"playback": CPNowPlayingPlaybackRateButton.class,
+                    @"repeat": CPNowPlayingRepeatButton.class,
+                    @"image": CPNowPlayingImageButton.class
+                };
+
+                NSUInteger imageIndex = 0;
+                for (NSUInteger i = 0; i < _buttons.count; i++) {
+                    NSDictionary *_button = _buttons[i];
+                    NSString *buttonType = [RCTConvert NSString:_button[@"type"]];
+                    NSDictionary *body = @{@"templateId":templateId, @"id": _button[@"id"] ?: @"" };
+                    Class buttonClass = buttonTypeMapping[buttonType];
+
+                    if (buttonClass) {
+                        CPNowPlayingButton *button;
+
+                        if ([buttonType isEqualToString:@"image"]) {
+                            id imageObj = (imageIndex < loadedImages.count) ? loadedImages[imageIndex] : nil;
+                            UIImage *image = ([imageObj isKindOfClass:[UIImage class]]) ? (UIImage *)imageObj : nil;
+                            imageIndex++;
+
+                            if (image) {
+                                button = [[CPNowPlayingImageButton alloc] initWithImage:image handler:^(__kindof CPNowPlayingImageButton * _Nonnull btn) {
+                                    if (self->hasListeners) {
+                                        [self sendEventWithName:@"buttonPressed" body:body];
+                                    }
+                                }];
+                            } else {
+                                // Fallback: create a minimal placeholder if image failed to load
+                                UIImage *placeholder = [UIImage systemImageNamed:@"circle"];
+                                button = [[CPNowPlayingImageButton alloc] initWithImage:placeholder handler:^(__kindof CPNowPlayingImageButton * _Nonnull btn) {
+                                    if (self->hasListeners) {
+                                        [self sendEventWithName:@"buttonPressed" body:body];
+                                    }
+                                }];
+                            }
+                        } else {
+                            button = [[buttonClass alloc] initWithHandler:^(__kindof CPNowPlayingButton * _Nonnull btn) {
+                                if (self->hasListeners) {
+                                    [self sendEventWithName:@"buttonPressed" body:body];
+                                }
+                            }];
+                        }
+
+                        [buttons addObject:button];
+                    }
+                }
+
+                dispatch_async(dispatch_get_main_queue(), ^{
+                    [nowPlayingTemplate updateNowPlayingButtons:buttons];
+                });
+            }];
+        }
+    } else if ([template isKindOfClass:[CPMapTemplate class]]) {
+        CPMapTemplate *mapTemplate = (CPMapTemplate *)template;
+        [self applyConfigForMapTemplate:mapTemplate templateId:templateId config:config];
+    } else if ([template isKindOfClass:[CPInformationTemplate class]]) {
+        CPInformationTemplate *informationTemplate = (CPInformationTemplate *)template;
+        if (config[@"items"]) {
+            informationTemplate.items = [self parseInformationItems:[RCTConvert NSArray:config[@"items"]]];
+        }
+        if (config[@"actions"]) {
+            informationTemplate.actions = [self parseInformationActions:[RCTConvert NSArray:config[@"actions"]] templateId:templateId];
+        }
+    }
+}
+
 RCT_EXPORT_METHOD(updateListTemplate:(NSString*)templateId config:(NSDictionary*)config) {
     RNCPStore *store = [RNCPStore sharedManager];
     CPTemplate *template = [store findTemplateById:templateId];
@@ -702,14 +1034,21 @@ RCT_EXPORT_METHOD(updateListTemplateItem:(NSString *)templateId config:(NSDictio
         CPListItem *item = (CPListItem *)section.items[index];
         if (config[@"imgUrl"]) {
             NSString *imgUrlString = [RCTConvert NSString:config[@"imgUrl"]];
-            UIImage *placeholderImage;
-            if (config[@"placeholderImage"] != nil) {
-                placeholderImage = [RCTConvert UIImage:config[@"placeholderImage"]];
+            UIImage *placeholderImage = nil;
+            id placeholderSource = config[@"placeholderImage"];
+            if (placeholderSource != nil && ![self isImageSourceURL:placeholderSource]) {
+                placeholderImage = [RCTConvert UIImage:placeholderSource];
             }
             [self updateItemImageWithURL:item imgUrl:imgUrlString placeholderImage:placeholderImage];
         }
         if (config[@"image"]) {
-            [item setImage:[RCTConvert UIImage:config[@"image"]]];
+            id imageSource = config[@"image"];
+            if ([self isImageSourceURL:imageSource]) {
+                NSString *imgUrlString = [self getURLStringFromImageSource:imageSource];
+                [self updateItemImageWithURL:item imgUrl:imgUrlString placeholderImage:nil];
+            } else {
+                [item setImage:[RCTConvert UIImage:imageSource]];
+            }
         }
         if (config[@"text"]) {
             [item setText:[RCTConvert NSString:config[@"text"]]];
@@ -724,7 +1063,16 @@ RCT_EXPORT_METHOD(updateListTemplateItem:(NSString *)templateId config:(NSDictio
             [item setPlaybackProgress:[RCTConvert CGFloat:config[@"playbackProgress"]]];
         }
         if (@available(iOS 14.0, *) && config[@"accessoryImage"]) {
-            [item setAccessoryImage:[RCTConvert UIImage:config[@"accessoryImage"]]];
+            id accessorySource = config[@"accessoryImage"];
+            if ([self isImageSourceURL:accessorySource]) {
+                [self loadImageAsync:accessorySource completion:^(UIImage *image) {
+                    if (image) {
+                        [item setAccessoryImage:image];
+                    }
+                }];
+            } else {
+                [item setAccessoryImage:[RCTConvert UIImage:accessorySource]];
+            }
         }
     } else {
         NSLog(@"Failed to find template %@", template);
@@ -1086,8 +1434,18 @@ RCT_EXPORT_METHOD(updateMapTemplateMapButtons:(NSString*) templateId mapButtons:
             NSString *_title = [barButton objectForKey:@"title"];
             [_barButton setTitle:_title];
         } else if (_type == CPBarButtonTypeImage) {
-            UIImage *_image = [RCTConvert UIImage:[barButton objectForKey:@"image"]];
-            [_barButton setImage:_image];
+            id imageSource = [barButton objectForKey:@"image"];
+            if ([self isImageSourceURL:imageSource]) {
+                // Load image asynchronously
+                [self loadImageAsync:imageSource completion:^(UIImage *image) {
+                    if (image) {
+                        [_barButton setImage:image];
+                    }
+                }];
+            } else {
+                UIImage *_image = [RCTConvert UIImage:imageSource];
+                [_barButton setImage:_image];
+            }
         }
         [result addObject:_barButton];
     }
@@ -1110,6 +1468,27 @@ RCT_EXPORT_METHOD(updateMapTemplateMapButtons:(NSString*) templateId mapButtons:
     return result;
 }
 
+// Helper to check if image source is a URL
+- (BOOL)isImageSourceURL:(id)imageSource {
+    if ([imageSource isKindOfClass:[NSDictionary class]]) {
+        NSDictionary *imageDict = (NSDictionary *)imageSource;
+        NSString *uri = imageDict[@"uri"];
+        if (uri && ([uri hasPrefix:@"http://"] || [uri hasPrefix:@"https://"])) {
+            return YES;
+        }
+    }
+    return NO;
+}
+
+// Helper to get URL string from image source
+- (NSString *)getURLStringFromImageSource:(id)imageSource {
+    if ([imageSource isKindOfClass:[NSDictionary class]]) {
+        NSDictionary *imageDict = (NSDictionary *)imageSource;
+        return imageDict[@"uri"];
+    }
+    return nil;
+}
+
 - (NSArray<CPSelectableListItem>*)parseListItems:(NSArray*)items startIndex:(int)startIndex templateId:(NSString *)templateId {
     NSMutableArray *_items = [NSMutableArray array];
     int listIndex = startIndex;
@@ -1118,12 +1497,14 @@ RCT_EXPORT_METHOD(updateMapTemplateMapButtons:(NSString*) templateId mapButtons:
         NSString *_detailText = [item objectForKey:@"detailText"];
         NSString *_text = [item objectForKey:@"text"];
         NSObject *_imageObj = [item objectForKey:@"image"];
-        
+
         NSArray *_imageItems = [item objectForKey:@"images"];
         NSArray *_imageUrls = [item objectForKey:@"imgUrls"];
-        
+
         if (_imageItems == nil && _imageUrls == nil) {
-            UIImage *_image = [RCTConvert UIImage:_imageObj];
+            // Check if image is a URL - if so, use async loading
+            BOOL isURL = [self isImageSourceURL:_imageObj];
+            UIImage *_image = isURL ? nil : [RCTConvert UIImage:_imageObj];
             CPListItem *_item;
             if (@available(iOS 14.0, *)) {
                 CPListItemAccessoryType accessoryType = _showsDisclosureIndicator ? CPListItemAccessoryTypeDisclosureIndicator : CPListItemAccessoryTypeNone;
@@ -1136,11 +1517,16 @@ RCT_EXPORT_METHOD(updateMapTemplateMapButtons:(NSString*) templateId mapButtons:
             }
             if (item[@"imgUrl"]) {
                 NSString *imgUrlString = [RCTConvert NSString:item[@"imgUrl"]];
-                UIImage *placeholderImage;
-                if ([item objectForKey:@"placeholderImage"] != nil) {
-                    placeholderImage = [RCTConvert UIImage:[item objectForKey:@"placeholderImage"]];
+                UIImage *placeholderImage = nil;
+                id placeholderSource = [item objectForKey:@"placeholderImage"];
+                if (placeholderSource != nil && ![self isImageSourceURL:placeholderSource]) {
+                    placeholderImage = [RCTConvert UIImage:placeholderSource];
                 }
                 [self updateItemImageWithURL:_item imgUrl:imgUrlString placeholderImage:placeholderImage];
+            } else if (isURL) {
+                // Load image asynchronously for URL-based images
+                NSString *imgUrlString = [self getURLStringFromImageSource:_imageObj];
+                [self updateItemImageWithURL:_item imgUrl:imgUrlString placeholderImage:nil];
             }
             [_item setUserInfo:@{ @"index": @(listIndex) }];
             [_items addObject:_item];
@@ -1152,8 +1538,13 @@ RCT_EXPORT_METHOD(updateMapTemplateMapButtons:(NSString*) templateId mapButtons:
                 NSArray* slicedArray = [_imageItems subarrayWithRange:NSMakeRange(0, MIN(CPMaximumNumberOfGridImages, _imageItems.count))];
 
                 for (NSObject *imageObj in slicedArray){
-                    UIImage *_image = [RCTConvert UIImage:imageObj];
-                    [_images addObject:_image];
+                    // Skip URL-based images for initial creation (use placeholder)
+                    if ([self isImageSourceURL:imageObj]) {
+                        [_images addObject:[[UIImage alloc] init]];
+                    } else {
+                        UIImage *_image = [RCTConvert UIImage:imageObj];
+                        [_images addObject:_image];
+                    }
                 }
             }
             if (@available(iOS 14.0, *)) {
@@ -1181,7 +1572,8 @@ RCT_EXPORT_METHOD(updateMapTemplateMapButtons:(NSString*) templateId mapButtons:
                         UIImage *placeholderImage = nil;
                         if (_placeholderImages != nil && _index < _placeholderImages.count) {
                             id placeholderImageObj = _placeholderImages[_index];
-                            if (placeholderImageObj != nil && placeholderImageObj != [NSNull null]) {
+                            // Only load placeholder synchronously if it's not a URL
+                            if (placeholderImageObj != nil && placeholderImageObj != [NSNull null] && ![self isImageSourceURL:placeholderImageObj]) {
                                 placeholderImage = [RCTConvert UIImage:placeholderImageObj];
                             }
                         }
@@ -1239,10 +1631,22 @@ RCT_EXPORT_METHOD(updateMapTemplateMapButtons:(NSString*) templateId mapButtons:
     for (NSDictionary *button in buttons) {
         NSString *_id = [button objectForKey:@"id"];
         NSArray<NSString*> *_titleVariants = [button objectForKey:@"titleVariants"];
-        UIImage *_image = [RCTConvert UIImage:[button objectForKey:@"image"]];
+        id imageSource = [button objectForKey:@"image"];
+        UIImage *_image;
+
+        if ([self isImageSourceURL:imageSource]) {
+            // CPGridButton doesn't support updating image after creation
+            // For URL-based images, we create with placeholder and load async
+            _image = [[UIImage alloc] init];
+            // Note: In production, images should be bundled locally to avoid this issue
+        } else {
+            _image = [RCTConvert UIImage:imageSource];
+        }
+
+        int currentIndex = index; // Capture for block
         CPGridButton *_button = [[CPGridButton alloc] initWithTitleVariants:_titleVariants image:_image handler:^(CPGridButton * _Nonnull barButton) {
             if (self->hasListeners) {
-                [self sendEventWithName:@"gridButtonPressed" body:@{@"id": _id, @"templateId":templateId, @"index": @(index) }];
+                [self sendEventWithName:@"gridButtonPressed" body:@{@"id": _id, @"templateId":templateId, @"index": @(currentIndex) }];
             }
         }];
         BOOL _disabled = [button objectForKey:@"disabled"];
@@ -1281,8 +1685,11 @@ RCT_EXPORT_METHOD(updateMapTemplateMapButtons:(NSString*) templateId mapButtons:
     CPManeuver* maneuver = [[CPManeuver alloc] init];
 
     if ([json objectForKey:@"junctionImage"]) {
-        UIImage *junctionImage = [RCTConvert UIImage:json[@"junctionImage"]];
-        [maneuver setJunctionImage:[self imageWithTint:junctionImage andTintColor:[UIColor whiteColor]]];
+        id junctionSource = json[@"junctionImage"];
+        if (![self isImageSourceURL:junctionSource]) {
+            UIImage *junctionImage = [RCTConvert UIImage:junctionSource];
+            [maneuver setJunctionImage:[self imageWithTint:junctionImage andTintColor:[UIColor whiteColor]]];
+        }
     }
 
     if ([json objectForKey:@"initialTravelEstimates"]) {
@@ -1291,7 +1698,11 @@ RCT_EXPORT_METHOD(updateMapTemplateMapButtons:(NSString*) templateId mapButtons:
     }
 
     if ([json objectForKey:@"symbolImage"]) {
-        UIImage *symbolImage = [RCTConvert UIImage:json[@"symbolImage"]];
+        id symbolSource = json[@"symbolImage"];
+        if ([self isImageSourceURL:symbolSource]) {
+            return maneuver; // Skip URL-based symbol images for now
+        }
+        UIImage *symbolImage = [RCTConvert UIImage:symbolSource];
 
         if ([json objectForKey:@"symbolImageSize"]) {
             NSDictionary *size = [RCTConvert NSDictionary:json[@"symbolImageSize"]];
@@ -1348,9 +1759,11 @@ RCT_EXPORT_METHOD(updateMapTemplateMapButtons:(NSString*) templateId mapButtons:
 }
 
 - (CPNavigationAlert*)parseNavigationAlert:(NSDictionary*)json templateId:(NSString*)templateId {
-    CPImageSet *imageSet;
-    if ([json objectForKey:@"lightImage"] && [json objectForKey:@"darkImage"]) {
-        imageSet = [[CPImageSet alloc] initWithLightContentImage:[RCTConvert UIImage:json[@"lightImage"]] darkContentImage:[RCTConvert UIImage:json[@"darkImage"]]];
+    CPImageSet *imageSet = nil;
+    id lightSource = json[@"lightImage"];
+    id darkSource = json[@"darkImage"];
+    if (lightSource && darkSource && ![self isImageSourceURL:lightSource] && ![self isImageSourceURL:darkSource]) {
+        imageSet = [[CPImageSet alloc] initWithLightContentImage:[RCTConvert UIImage:lightSource] darkContentImage:[RCTConvert UIImage:darkSource]];
     }
     CPAlertAction *secondaryAction = [json objectForKey:@"secondaryAction"] ? [self parseAlertAction:json[@"secondaryAction"] body:@{ @"templateId": templateId, @"secondary": @(YES) }] : nil;
 
@@ -1374,7 +1787,12 @@ RCT_EXPORT_METHOD(updateMapTemplateMapButtons:(NSString*) templateId mapButtons:
 }
 
 - (CPVoiceControlState*)parseVoiceControlState:(NSDictionary*)json {
-    return [[CPVoiceControlState alloc] initWithIdentifier:[RCTConvert NSString:json[@"identifier"]] titleVariants:[RCTConvert NSStringArray:json[@"titleVariants"]] image:[RCTConvert UIImage:json[@"image"]] repeats:[RCTConvert BOOL:json[@"repeats"]]];
+    id imageSource = json[@"image"];
+    UIImage *image = nil;
+    if (imageSource && ![self isImageSourceURL:imageSource]) {
+        image = [RCTConvert UIImage:imageSource];
+    }
+    return [[CPVoiceControlState alloc] initWithIdentifier:[RCTConvert NSString:json[@"identifier"]] titleVariants:[RCTConvert NSStringArray:json[@"titleVariants"]] image:image repeats:[RCTConvert BOOL:json[@"repeats"]]];
 }
 
 - (NSString*)panDirectionToString:(CPPanDirection)panDirection {