Android: Generalize embedded camera feature to a custom button

android/src/main/java/com/wix/RNCameraKit/gallery/GalleryAdapter.java

@@ -9,8 +9,6 @@ import android.view.View;
 import android.view.ViewGroup;
 import android.widget.ImageView;
 
-import com.wix.RNCameraKit.R;
-
 import java.util.ArrayList;
 import java.util.Collections;
 import java.util.List;
@@ -20,6 +18,8 @@ import java.util.concurrent.TimeUnit;
 
 public class GalleryAdapter extends RecyclerView.Adapter<GalleryAdapter.AbsViewHolder> {
 
+    private static final String DEFAULT_CUSTOM_BUTTON_BACKGROUND_COLOR = "#f2f4f5";
+
     private static int VIEW_TYPE_IMAGE = 0;
     private static int VIEW_TYPE_TAKE_PICTURE = 1;
 
@@ -101,9 +101,9 @@ public class GalleryAdapter extends RecyclerView.Adapter<GalleryAdapter.AbsViewH
         @Override
         public void bind(int position) {
             ImageView imageView = (ImageView) this.itemView;
-            imageView.setImageResource(R.drawable.open_camera);
+            imageView.setImageDrawable(GalleryAdapter.this.customButtonImage);
             imageView.setScaleType(ImageView.ScaleType.CENTER);
-            imageView.setBackgroundColor(Color.parseColor("#f2f4f5"));
+            imageView.setBackgroundColor(Color.parseColor(GalleryAdapter.this.customButtonBackgroundColor));
         }
     }
 
@@ -112,7 +112,8 @@ public class GalleryAdapter extends RecyclerView.Adapter<GalleryAdapter.AbsViewH
     private String unsupportedText;
     private String unsupportedTextColor;
     private List<String> dirtyUris = new ArrayList<>();
-    private boolean embedCameraButton;
+    private Drawable customButtonImage;
+    private String customButtonBackgroundColor = DEFAULT_CUSTOM_BUTTON_BACKGROUND_COLOR;
 
     private class Image {
         String uri;
@@ -161,8 +162,12 @@ public class GalleryAdapter extends RecyclerView.Adapter<GalleryAdapter.AbsViewH
         this.supportedFileTypes = supportedFileTypes;
     }
 
-    public void setEmbedCameraButton(boolean embedCamera) {
+    public void setCustomButtonImage(Drawable customButtonImage) {
-        this.embedCameraButton = embedCamera;
+        this.customButtonImage = customButtonImage;
+    }
+
+    public void setCustomButtonBackgroundColor(String color) {
+        this.customButtonBackgroundColor = color;
     }
 
     private GalleryView view;
@@ -182,7 +187,7 @@ public class GalleryAdapter extends RecyclerView.Adapter<GalleryAdapter.AbsViewH
 
     @Override
     public int getItemViewType(int position) {
-        if (shouldShowCameraButton() && position == 0) {
+        if (shouldShowCustomButton() && position == 0) {
             return VIEW_TYPE_TAKE_PICTURE;
         }
         return VIEW_TYPE_IMAGE;
@@ -223,7 +228,7 @@ public class GalleryAdapter extends RecyclerView.Adapter<GalleryAdapter.AbsViewH
                     } while (cursor.moveToNext());
                 }
 
-                if (shouldShowCameraButton()) {
+                if (shouldShowCustomButton()) {
                     images.add(new Image(null, -1, ""));
                 }
                 Collections.reverse(images);
@@ -299,7 +304,7 @@ public class GalleryAdapter extends RecyclerView.Adapter<GalleryAdapter.AbsViewH
         return images.size();
     }
 
-    private boolean shouldShowCameraButton() {
+    private boolean shouldShowCustomButton() {
-        return embedCameraButton;
+        return customButtonImage != null;
     }
 }

android/src/main/java/com/wix/RNCameraKit/gallery/GalleryView.java

@@ -104,8 +104,12 @@ public class GalleryView extends RecyclerView {
         adapter.setUnsupportedUIParams(overlayColor, unsupportedFinalImage, unsupportedText, unsupportedTextColor);
     }
 
-    public void setEmbedCameraButton(boolean embedCamera) {
+    public void setCustomButtonImage(Drawable customButtonImage) {
-        adapter.setEmbedCameraButton(embedCamera);
+        adapter.setCustomButtonImage(customButtonImage);
+    }
+
+    public void setCustomButtonBackgroundColor(String color) {
+        adapter.setCustomButtonBackgroundColor(color);
     }
 
     public void refresh() {

android/src/main/java/com/wix/RNCameraKit/gallery/GalleryViewManager.java

@@ -24,6 +24,8 @@ public class GalleryViewManager extends SimpleViewManager<GalleryView> {
     private final String UNSUPPORTED_TEXT_COLOR_KEY = "unsupportedTextColor";
     private final String SUPPORTED_TYPES_KEY = "supportedFileTypes";
     private final String UNSUPPORTED_OVERLAY_KEY = "unsupportedOverlayColor";
+    private final String CUSTOM_BUTTON_IMAGE_KEY = "customImage";
+    private final String CUSTOM_BUTTON_BCK_COLOR_KEY = "backgroundColor";
 
     private ThemedReactContext reactContext;
 
@@ -73,11 +75,6 @@ public class GalleryViewManager extends SimpleViewManager<GalleryView> {
         view.setDirtyImages(readableArrayToList(uris));
     }
 
-    @ReactProp(name = "dirtyImages")
-    public void setEmbedCameraButton(GalleryView view, boolean embedCamera) {
-        view.setEmbedCameraButton(embedCamera);
-    }
-
     @ReactProp(name = "selectedImageIcon")
     public void setSelectedImage(final GalleryView view, final String imageSource) {
         new Thread(new Runnable() {
@@ -156,6 +153,27 @@ public class GalleryViewManager extends SimpleViewManager<GalleryView> {
         }).start();
     }
 
+    @ReactProp(name = "customButton")
+    public void setCustomButton(final GalleryView view, final ReadableMap props) {
+        new Thread(new Runnable() {
+            @Override
+            public void run() {
+                final String imageResource = getStringSafe(props, CUSTOM_BUTTON_IMAGE_KEY);
+                final String backgroundColor = getStringSafe(props, CUSTOM_BUTTON_BCK_COLOR_KEY);
+                final Drawable drawable = ResourceDrawableIdHelper.getIcon(view.getContext(), imageResource);
+                reactContext.runOnUiQueueThread(new Runnable() {
+                    @Override
+                    public void run() {
+                        view.setCustomButtonImage(drawable);
+                        if (backgroundColor != null) {
+                            view.setCustomButtonBackgroundColor(backgroundColor);
+                        }
+                    }
+                });
+            }
+        }).start();
+    }
+
     @Nullable
     @Override
     public Map getExportedCustomDirectEventTypeConstants() {

src/CameraKitGalleryView.android.js

@@ -1,11 +1,11 @@
+import _ from 'lodash';
 import React, {Component} from 'react';
 import ReactNative, {
     requireNativeComponent,
     UIManager
 } from 'react-native';
-const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');
-import _ from 'lodash';
 
+const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');
 const GalleryView = requireNativeComponent('GalleryView', null);
 const ALL_PHOTOS = 'All Photos';
 const COMMAND_REFRESH_GALLERY = 1;
@@ -32,6 +32,9 @@ export default class CameraKitGalleryView extends Component {
     if (transformedProps.fileTypeSupport && transformedProps.fileTypeSupport.unsupportedImage) {
       _.update(transformedProps, 'fileTypeSupport.unsupportedImage', (image) => resolveAssetSource(image).uri);
     }
+    if (_.get(transformedProps, 'customButton.customImage')) {
+      _.update(transformedProps, 'customButton.customImage', (image) => resolveAssetSource(image).uri);
+    }
     return <GalleryView {...transformedProps} onTapImage={this.onTapImage}/>
   }