scanner size config, scanner line animation

Author: code76kb

README.md

@@ -14,11 +14,12 @@ import { MlkitBarcodeView, BARCODE } from "react-native-mlkit-barcode";
 // ...
 
  <MlkitBarcodeView
-          enableQrScanner={this.state.enableQrScanner}
+          style={{width:800, height:800}}
+          enableScanner={this.state.enableScanner}
           barcodeFormat={BARCODE.FORMAT_ALL_FORMATS}
           onSuccess={(data) => {
-            console.log("App BarCode On Success :", data);
-            this.setState({enableQrScanner:false})
+            console.log("BarCode On Success :", data);
+            this.setState({enableScanner:false})
           }}
         />
 ```

android/build.gradle

@@ -138,9 +138,6 @@ dependencies {
 //  implementation 'com.google.android.gms:play-services-mlkit-barcode-scanning:18.1.0'
   implementation 'com.google.mlkit:barcode-scanning:17.0.3'
 
-  implementation 'com.facebook.fresco:fresco:2.5.0'
-  implementation 'com.facebook.fresco:animated-gif:2.6.0'
-
 // From node_modules
 }
 

android/src/main/java/com/reactnativemlkitbarcode/MlKitBarcodeDecoder.java

@@ -95,7 +95,7 @@ protected void startCamera() {
         cameraProvider = processCameraProvider.get();
 
         cameraProvider.unbindAll();
-        cameraProvider.bindToLifecycle(frag.getActivity(), cameraSelector, preview, imageAnalysis);
+        cameraProvider.bindToLifecycle(frag, cameraSelector, preview, imageAnalysis);
         preview.setSurfaceProvider(this.previewView.getSurfaceProvider());
 
       } catch (ExecutionException e) {
@@ -119,7 +119,7 @@ protected void stopAll(){
       scanner.close();
     if(cameraProvider!=null){
       cameraProvider.unbindAll();
-//      cameraProvider.shutdown();
+      cameraProvider.shutdown();
     }
   }
 
@@ -136,17 +136,6 @@ private Size getRes() {
     return new Size(displayMetrics.widthPixels,displayMetrics.heightPixels);
   }
 
-  private int aspectRatio() {
-    DisplayMetrics displayMetrics = new DisplayMetrics();
-    this.previewView.getDisplay().getRealMetrics(displayMetrics);
-    Log.e(TAG, "PreviewSize :: W:"+displayMetrics.widthPixels+", H:"+displayMetrics.heightPixels);
-    double previewRatio = (double) Math.max(displayMetrics.widthPixels, displayMetrics.heightPixels) / Math.min(displayMetrics.widthPixels, displayMetrics.heightPixels);
-    if (Math.abs(previewRatio - RATIO_4_3_VALUE) <= Math.abs(previewRatio - RATIO_16_9_VALUE)) {
-      return AspectRatio.RATIO_4_3;
-    }
-    return AspectRatio.RATIO_16_9;
-  }
-
   private void createBarCodeScanner(){
     Log.e(TAG, "createBarCodeScanner: BarCode Format :"+barcodeFormat);
     BarcodeScannerOptions options =

android/src/main/java/com/reactnativemlkitbarcode/MlKitBarcodeFragment.java

@@ -1,8 +1,9 @@
 package com.reactnativemlkitbarcode;
 
+import android.animation.ObjectAnimator;
+import android.animation.ValueAnimator;
 import android.os.Bundle;
 import android.util.Log;
-import android.view.Gravity;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
@@ -13,11 +14,6 @@
 import androidx.camera.view.PreviewView;
 import androidx.fragment.app.Fragment;
 
-import com.facebook.drawee.backends.pipeline.Fresco;
-import com.facebook.drawee.interfaces.DraweeController;
-import com.facebook.drawee.view.SimpleDraweeView;
-import com.facebook.imagepipeline.request.ImageRequest;
-import com.facebook.imagepipeline.request.ImageRequestBuilder;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.uimanager.ThemedReactContext;
 
@@ -28,10 +24,11 @@ public class MlKitBarcodeFragment extends Fragment {
   private ReactContext reactContext;
   private int barcodeFormat;
 
-  private PreviewView previewView = null;
   private int WIDTH = 0;
   private int HEIGHT = 0;
-  private SimpleDraweeView simpleDraweeView = null;
+
+  private PreviewView previewView = null;
+  private View viewLine = null;
 
   public MlKitBarcodeFragment(ThemedReactContext reactContext, int barcodeFormat) {
     this.reactContext = reactContext;
@@ -48,19 +45,9 @@ public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup c
     super.onCreateView(inflater, container, savedInstanceState);
     mlKitBarcodeDecoder = new MlKitBarcodeDecoder(this, reactContext);
 
-    //    RelativeLayout relativeLayout = new RelativeLayout(MlKitBarcodeFragment.this.getContext());
-//    relativeLayout.setGravity(Gravity.CENTER);
-//    relativeLayout.addView(mlKitBarcodeDecoder.createScannerView());
-
-
       View view  = inflater.inflate(R.layout.fragview,container,false);
       previewView = view.findViewById(R.id.previewView);
-
-      simpleDraweeView = view.findViewById(R.id.imgViewGif);
-
-    ImageRequest imageRequest = ImageRequestBuilder.newBuilderWithResourceId(R.drawable.scanner2).build();
-    DraweeController controller = Fresco.newDraweeControllerBuilder().setImageRequest(imageRequest).setAutoPlayAnimations(true).build();
-    simpleDraweeView.setController(controller);
+      viewLine = view.findViewById(R.id.lineView);
     mlKitBarcodeDecoder.createScannerView(previewView);
       return view;
   }
@@ -71,38 +58,23 @@ public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceStat
      Log.e(TAG, "onViewCreated: W:"+WIDTH+", H:"+HEIGHT);
       mlKitBarcodeDecoder.setBarCodeFormat(barcodeFormat);
       previewView.setLayoutParams(new RelativeLayout.LayoutParams(WIDTH,HEIGHT));
-      simpleDraweeView.setLayoutParams(new RelativeLayout.LayoutParams(WIDTH,HEIGHT));
-      mlKitBarcodeDecoder.stopAll();
+      viewLine.setLayoutParams(new RelativeLayout.LayoutParams(WIDTH,8));
       mlKitBarcodeDecoder.startCamera();
-
-  }
-
-  @Override
-  public void onDestroy() {
-    super.onDestroy();
-    Log.e(TAG, "onDestroy: ....");
-//    mlKitBarcodeDecoder.stopAll();
-  }
-
-  @Override
-  public void onDetach() {
-    super.onDetach();
-    Log.e(TAG, "onDetach: ....");
-//    mlKitBarcodeDecoder.stopAll();
+      playScanningAnimation();
   }
 
   public void updatePreviewSize(int width, int height){
     Log.e(TAG, "updatePreviewSize: ");
     WIDTH = width;
     HEIGHT = height;
+  }
 
-//    if(previewView != null){
-//      if(mlKitBarcodeDecoder != null){
-//      mlKitBarcodeDecoder.stopAll();
-//      mlKitBarcodeDecoder.startCamera();
-//      }
-//      previewView.setLayoutParams(new RelativeLayout.LayoutParams(width,height));
-//    }
+  private void playScanningAnimation(){
+    ObjectAnimator animation = ObjectAnimator.ofFloat(viewLine, "translationY", HEIGHT);
+    animation.setDuration(2000);
+    animation.setRepeatCount(-1);
+    animation.setRepeatMode(ValueAnimator.REVERSE);
+    animation.start();
   }
 
 }

android/src/main/java/com/reactnativemlkitbarcode/MlkitBarcodeViewManager.java

@@ -50,23 +50,34 @@ public FrameLayout createViewInstance(ThemedReactContext reactContext) {
     this.reactContext = reactContext;
     FrameLayout frameLayout = new FrameLayout(reactContext);
     Fresco.initialize(reactContext);
+    Log.e(TAG, "createViewInstance: ID :"+frameLayout.getId());
     return frameLayout;
   }
 
+
+
+  @Override
+  public void onDropViewInstance(@NonNull FrameLayout view) {
+    removeFragment();
+    Log.e(TAG, "onDropViewInstance: "+view.getId());
+    super.onDropViewInstance(view);
+  }
+
   @Override
   public void receiveCommand(@NonNull FrameLayout root, String commandId, @Nullable ReadableArray args) {
-    super.receiveCommand(root, commandId, args);
+    Log.e(TAG, "receiveCommand: "+commandId);
     int reactNativeViewId = args.getInt(0);
     switch (commandId) {
       case COMMAND_CREATE:{
         createFragment(root, reactNativeViewId);
         break;
       }
-      case COMMAND_DESTROY:
-        removeFragment();
-        break;
+//      case COMMAND_DESTROY:
+//        removeFragment();
+//        break;
       default: {}
     }
+    super.receiveCommand(root, commandId, args);
   }
 
   @ReactProp(name="barcodeFormat")
@@ -76,21 +87,25 @@ public void setBarcodeFormat( View view,int barcodeFormat){
 
   @ReactProp(name = "height")
   public void setHeight(View view, int height) {
-    Log.e(TAG, "setHeight: "+height);
+    Log.e(TAG, "setHeight: "+height+" View :"+view.getId());
     HEIGHT = height;
-    if(scannerFrag != null)
-        scannerFrag.updatePreviewSize(WIDTH,HEIGHT);
+//    if(scannerFrag != null)
+//        scannerFrag.updatePreviewSize(WIDTH,HEIGHT);
   }
 
   @ReactProp(name = "width")
   public void setWidth(View view, int width) {
     Log.e(TAG, "setWidth: "+width);
     WIDTH = width;
-    if(scannerFrag != null)
-      scannerFrag.updatePreviewSize(WIDTH,HEIGHT);
+//    if(scannerFrag != null)
+//      scannerFrag.updatePreviewSize(WIDTH,HEIGHT);
   }
 
-
+  @Override
+  public void receiveCommand(@NonNull FrameLayout root, int commandId, @Nullable ReadableArray args) {
+    super.receiveCommand(root, commandId, args);
+    Log.e(TAG, "receiveCommand @ :: "+commandId);
+  }
 
   public void createFragment(FrameLayout root, int reactNativeViewId) {
     Log.e(TAG, "createFragment:...");
@@ -106,12 +121,14 @@ public void createFragment(FrameLayout root, int reactNativeViewId) {
   }
 
   public void removeFragment(){
+    Log.e(TAG, "removeFragment: ...");
     try {
       if(scannerFrag != null && scannerFrag.getScannerView() != null)
         scannerFrag.getScannerView().stopAll();
       Choreographer.getInstance().removeFrameCallback(this.frameCallback);
       FragmentActivity activity = (FragmentActivity) this.reactContext.getCurrentActivity();
-      activity.getSupportFragmentManager().beginTransaction().remove(this.scannerFrag).commit();
+      if(this.scannerFrag != null)
+        activity.getSupportFragmentManager().beginTransaction().remove(this.scannerFrag).commit();
     }
     catch (Exception e){
       Log.e(TAG, "removeFragment: Error :"+e.toString());

android/src/main/res/drawable/line.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+
+  <item>
+    <shape android:shape="rectangle">
+      <solid android:color="#FF0000"></solid>
+      <size android:height="4dp" />
+    </shape>
+  </item>
+
+</selector>

android/src/main/res/drawable/scanner2.gif

@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-  xmlns:fresco="http://schemas.android.com/apk/res-auto"
   android:orientation="vertical"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
@@ -10,22 +9,17 @@
 
   <androidx.camera.view.PreviewView
     android:id="@+id/previewView"
-    android:layout_width="200dp"
-    android:layout_height="200dp"
+    android:layout_width="400dp"
+    android:layout_height="400dp"
     android:scaleType="fitCenter"
     />
 
-
-    <com.facebook.drawee.view.SimpleDraweeView
-      android:id="@+id/imgViewGif"
-      android:layout_width="100dp"
-      android:layout_height="100dp"
-      android:scaleType="fitCenter"
-      />
-
-
+  <View
+    android:id="@+id/lineView"
+    android:layout_width="400dp"
+    android:layout_height="4dp"
+    android:background="@drawable/line"/>
 
 </RelativeLayout>
 
 
-<!--  fresco:backgroundImage="@color/colorRed"-->

android/src/main/res/layout/fragview.xml

@@ -9,7 +9,7 @@ export default class App extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      enableQrScanner: true,
+      enableScanner: true,
       barcodeFormat:BARCODE.FORMAT_ALL_FORMATS,
     }
   }
@@ -22,15 +22,15 @@ export default class App extends React.Component {
       <SafeAreaView style={{flex:1}}>
         <MlkitBarcodeView
           style={{width:800, height:800}}
-          enableQrScanner={this.state.enableQrScanner}
-          barcodeFormat={BARCODE.FORMAT_ALL_FORMATS}
+          enableScanner={this.state.enableScanner}
+          barcodeFormat={BARCODE.FORMAT_QR_CODE}
           onSuccess={(data) => {
-            console.log("App BarCode On Success :", data);
-            this.setState({enableQrScanner:false})
+            console.log("BarCode On Success :", data);
+            this.setState({enableScanner:false})
           }}
         />
 
-        <TouchableOpacity style={{width:100, height:50,}} onPress={()=>this.setState({enableQrScanner:!this.state.enableQrScanner})}>
+        <TouchableOpacity style={{width:100, height:50,}} onPress={()=>this.setState({enableScanner:!this.state.enableScanner})}>
           <Text style={{textAlign:'center',color:'red', fontSize:20, backgroundColor:'black'}}>{"Toggle SCanner"}</Text>
         </TouchableOpacity>    
         </SafeAreaView>