Gallery custom button: allow using a completely custom component (other props are disregarded in this case) + optimize image loading (don't recreate the image-view or the image)

ios/lib/ReactNativeCameraKit/CKGalleryCustomCollectionViewCell.h

@@ -8,11 +8,20 @@
 
 #import <UIKit/UIKit.h>
 
+#if __has_include(<React/RCTBridge.h>)
+#import <React/RCTBridge.h>
+#else
+#import "RCTBridge.h"
+#endif
+
 #define CUSOM_BUTTON_IMAGE                      @"image"
 #define CUSOM_BUTTON_BACKGROUND_COLOR           @"backgroundColor"
+#define CUSOM_BUTTON_COMPONENT                  @"component"
 
 @interface CKGalleryCustomCollectionViewCell : UICollectionViewCell
 
+@property (nonatomic, strong) RCTBridge *bridge;
+
 -(void) applyStyle:(NSDictionary*)styleDict;
 
 

ios/lib/ReactNativeCameraKit/CKGalleryCustomCollectionViewCell.m

@@ -14,31 +14,93 @@
 #import "RCTConvert.h"
 #endif
 
+#if __has_include(<React/RCTRootView.h>)
+#import <React/RCTRootView.h>
+#else
+#import "RCTRootView.h"
+#endif
 
+#if __has_include(<React/RCTRootViewDelegate.h>)
+#import <React/RCTRootViewDelegate.h>
+#else
+#import "RCTRootViewDelegate.h"
+#endif
+
+@interface CKGalleryCustomCollectionViewCell () <RCTRootViewDelegate>
+{
+    RCTRootView *_componentRootView;
+    UIImageView *_imageView;
+    NSDictionary *_prevStyleDict;
+}
+@end
 
 @implementation CKGalleryCustomCollectionViewCell
 
 
 -(void) applyStyle:(NSDictionary*)styleDict {
     
-    id imageProp = styleDict[CUSOM_BUTTON_IMAGE];
-    if (imageProp) {
-        UIImage *image = [RCTConvert UIImage:imageProp];
-        UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
-        imageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
-        imageView.frame = self.bounds;
-        imageView.contentMode = UIViewContentModeCenter;
-        [self addSubview:imageView];
+    if (styleDict[CUSOM_BUTTON_COMPONENT]) {
+        if (!_componentRootView) {
+            _componentRootView = [[RCTRootView alloc] initWithBridge:self.bridge moduleName:styleDict[CUSOM_BUTTON_COMPONENT] initialProperties:nil];
+            _componentRootView.delegate = self;
+            _componentRootView.frame = self.bounds;
+            _componentRootView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+            _componentRootView.backgroundColor = [UIColor clearColor];
+            [self addSubview:_componentRootView];
+        } else {
+            _componentRootView.frame = self.bounds;
+        }
     }
     
-    id backgroundColorProps = styleDict[CUSOM_BUTTON_BACKGROUND_COLOR];
-    if (backgroundColorProps) {
-        UIColor *backgroundColor = [RCTConvert UIColor:backgroundColorProps];
-        self.backgroundColor = backgroundColor;
+    if (_componentRootView == nil) {
+        id imageProps = styleDict[CUSOM_BUTTON_IMAGE];
+        if (imageProps) {
+            UIImage *image = [self getImage:imageProps];
+            if (!_imageView) {
+                _imageView = [[UIImageView alloc] initWithImage:image];
+                _imageView.backgroundColor = [UIColor clearColor];
+                _imageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+                _imageView.frame = self.bounds;
+                _imageView.contentMode = UIViewContentModeCenter;
+                [self addSubview:_imageView];
+            } else {
+                _imageView.frame = self.bounds;
+                _imageView.image = image;
+            }
+        }
+        
+        id backgroundColorProps = styleDict[CUSOM_BUTTON_BACKGROUND_COLOR];
+        if (backgroundColorProps) {
+            UIColor *backgroundColor = [RCTConvert UIColor:backgroundColorProps];
+            self.backgroundColor = backgroundColor;
+        }
     }
     
+    _prevStyleDict = styleDict;
 }
 
+-(UIImage*)getImage:(NSDictionary*)currentImageProps {
+    //if it's the same image - don't load it again
+    UIImage *image = nil;
+    if (_prevStyleDict == nil) {
+        image = [RCTConvert UIImage:currentImageProps];
+    } else {
+        NSDictionary *prevImageProps = _prevStyleDict[CUSOM_BUTTON_IMAGE];
+        if (prevImageProps == nil || (prevImageProps != nil && ![prevImageProps isEqualToDictionary:currentImageProps])) {
+            image = [RCTConvert UIImage:currentImageProps];
+        } else if (_imageView != nil) {
+            image = _imageView.image;
+        }
+    }
+    return image;
+}
 
+#pragma - mark RCTRootViewDelegate methods
+
+- (void)rootViewDidChangeIntrinsicSize:(RCTRootView *)rootView {
+    if (rootView == _componentRootView) {
+        [rootView setFrame:CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height)];
+    }
+}
 
 @end

ios/lib/ReactNativeCameraKit/CKGalleryViewManager.m

@@ -76,6 +76,7 @@ typedef void (^CompletionBlock)(BOOL success);
 @property (nonatomic, strong) NSDictionary *fileTypeSupport;
 @property (nonatomic, strong) NSArray *supportedFileTypesArray;
 
+@property (nonatomic, strong) RCTBridge *bridge;
 
 @end
 
@@ -369,6 +370,7 @@ static NSString * const CustomCellReuseIdentifier = @"CustomCell";
         
         if (indexPath.row == 0) {
             CKGalleryCustomCollectionViewCell *customCell = [collectionView dequeueReusableCellWithReuseIdentifier:CustomCellReuseIdentifier forIndexPath:indexPath];
+            customCell.bridge = self.bridge;
             [customCell applyStyle:self.customButtonStyle];
             return customCell;
         }
@@ -689,6 +691,7 @@ RCT_EXPORT_MODULE()
 - (UIView *)view
 {
     self.galleryView = [[CKGalleryView alloc] init];
+    self.galleryView.bridge = self.bridge;
     return self.galleryView;
 }