wait for camera to load bg

android/src/main/java/com/wix/RNCameraKit/camera/CameraView.java

@@ -2,7 +2,6 @@ package com.wix.RNCameraKit.camera;
 
 import android.graphics.Color;
 import android.graphics.Rect;
-import android.hardware.Camera;
 import android.support.annotation.ColorInt;
 import android.view.SurfaceHolder;
 import android.view.SurfaceView;
@@ -18,6 +17,7 @@ import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
 public class CameraView extends FrameLayout implements SurfaceHolder.Callback {
     private SurfaceView surface;
 
+    private boolean showFrame;
     private Rect frameRect;
     private BarcodeFrame barcodeFrame;
     @ColorInt private int frameColor = Color.GREEN;
@@ -78,12 +78,18 @@ public class CameraView extends FrameLayout implements SurfaceHolder.Callback {
         post(measureAndLayout);
     }
 
+    public void setShowFrame(boolean showFrame) {
+        this.showFrame = showFrame;
+    }
+
     public void showFrame() {
-        barcodeFrame = new BarcodeFrame(getContext());
-        barcodeFrame.setFrameColor(frameColor);
-        barcodeFrame.setLaserColor(laserColor);
-        addView(barcodeFrame);
-        requestLayout();
+        if (showFrame) {
+            barcodeFrame = new BarcodeFrame(getContext());
+            barcodeFrame.setFrameColor(frameColor);
+            barcodeFrame.setLaserColor(laserColor);
+            addView(barcodeFrame);
+            requestLayout();
+        }
     }
 
     public Rect getFramingRectInPreview(int previewWidth, int previewHeight) {
@@ -123,4 +129,8 @@ public class CameraView extends FrameLayout implements SurfaceHolder.Callback {
             barcodeFrame.setLaserColor(laserColor);
         }
     }
+
+    public void setSurfaceBgColor(@ColorInt int color) {
+        surface.setBackgroundColor(color);
+    }
 }

android/src/main/java/com/wix/RNCameraKit/camera/CameraViewManager.java

@@ -48,6 +48,7 @@ public class CameraViewManager extends SimpleViewManager<CameraView> {
     private static AtomicBoolean cameraReleased = new AtomicBoolean(false);
 
     private static boolean shouldScan = false;
+
     private static BarcodeScanner scanner;
     private static Camera.PreviewCallback previewCallback = new Camera.PreviewCallback() {
         @Override
@@ -171,6 +172,8 @@ public class CameraViewManager extends SimpleViewManager<CameraView> {
                             if (shouldScan) {
                                 camera.setOneShotPreviewCallback(previewCallback);
                             }
+                            cameraViews.peek().setSurfaceBgColor(Color.TRANSPARENT);
+                            cameraViews.peek().showFrame();
                         } catch (IOException | RuntimeException e) {
                             e.printStackTrace();
                         }
@@ -309,11 +312,9 @@ public class CameraViewManager extends SimpleViewManager<CameraView> {
         }
     }
 
-    @ReactProp(name = "showFrame")
+    @ReactProp(name = "showFrame", defaultBoolean = false)
     public void setFrame(CameraView view, boolean show) {
-        if (show) {
-            view.showFrame();
-        }
+        view.setShowFrame(show);
     }
 
     @ReactProp(name = "frameColor", defaultInt = Color.GREEN)
@@ -326,6 +327,11 @@ public class CameraViewManager extends SimpleViewManager<CameraView> {
         view.setLaserColor(color);
     }
 
+    @ReactProp(name = "surfaceColor")
+    public void setSurfaceBackground(CameraView view, @ColorInt int color) {
+        view.setSurfaceBgColor(color);
+    }
+
     public static synchronized Rect getFramingRectInPreview(int previewWidth, int previewHeight) {
         return cameraViews.peek().getFramingRectInPreview(previewWidth, previewHeight);
     }

example-js-code/src/BarcodeScreen.js

@@ -44,12 +44,13 @@ export default class CameraScreen extends Component {
         showFrame={true}
         scanBarcode={true}
         laserColor={"blue"}
+        surfaceColor={"black"}
         frameColor={"yellow"}
-        onReadCode = {((event) => this.setState({ example: CheckingScreen}))}
-        hideControls={true} 
+        onReadCode={((event) => this.setState({ example: CheckingScreen }))}
+        hideControls={true}
         // offsetForScannerFrame = {10}  
         // heightForScannerFrame = {300}  
-        colorForScannerFrame = {'blue'} 
+        colorForScannerFrame={'blue'}
       />
     );
   }

src/CameraKitCamera.android.js

@@ -16,6 +16,7 @@ export default class CameraKitCamera extends React.Component {
     _.update(transformedProps, 'cameraOptions.ratioOverlayColor', (c) => processColor(c));
     _.update(transformedProps, 'frameColor', (c) => processColor(c));
     _.update(transformedProps, 'laserColor', (c) => processColor(c));
+    _.update(transformedProps, 'surfaceColor', (c) => processColor(c));
 
     return <NativeCamera {...transformedProps}/>
   }

src/CameraScreen/CameraKitCameraScreenBase.js

@@ -161,7 +161,7 @@ export default class CameraScreenBase extends Component {
               scanBarcode={this.props.scanBarcode}
               laserColor={this.props.laserColor}
               frameColor={this.props.frameColor}
-            
+              surfaceColor={this.props.surfaceColor}
               onReadCode = {this.props.onReadCode}
               scannerOptions = {this.state.scannerOptions}
             />