Barcode - camera's frame not properly centered with camera height

[mist998]

Describe the bug

View flex:1

CodeScanner flex:1 View flex:3

Among all famous cam libs, this camera would not overflow after changing height. But the scanning frame will not show properly unless 100vh given, like, removing that View flex:3.

To Reproduce Steps to reproduce the behavior:

1. Supply all components mentioned and related props like showFrame, scanBarcode, style…
2. permission state to render cam componet once permission is granted…

Expected behavior Just like doc suggest, the frame is always at the center of the camera screen, it work with normal 100vh but not something lower like 25vh.

Screenshots N/A

Desktop (please complete the following information):

• OS: Windows
• Version 11

Smartphone (please complete the following information):

• Device: Emulated - Pixel 6 Pro API 33
• OS: Android 13

Additional context npx react-native@latest init xxxProject npm i react-native-camera-kit plus some configurations written in the /blob/master/docs/kotlin.md

[DavidBertet]

Could you try with the v14 beta? I think it is something that has been fixed

[cu4nt0m]

How can I install the latest beta? sorry very noobie question

[DavidBertet]

There is no bad questions ;)

You can use @version after the library name to explicitly define one

npm install react-native-camera-kit@v14.0.0-beta13

[rsroffrove]

Any update on the issue @cu4nt0m ?

[mist998]

Hi, I did wrap the component with my own camera frame (zIndex, position absolute things) to solve any kind of this problem, and I guess installing beta version will fix, hence may close this issue soon if no one highlight this issue again.

[Yeasirarafat53]

barcode continuously scanning , how to fix it

[rsroffrove]

Hi, I did wrap the component with my own camera frame (zIndex, position absolute things) to solve any kind of this problem, and I guess installing beta version will fix, hence may close this issue soon if no one highlight this issue again.

With this approach the problem of the entire screen being a scannable area irrespective of the frame you add still persists. Android still will scan any QR code which comes into the camera frame even if it is outside you designed native frame.

[rsroffrove]

barcode continuously scanning , how to fix it

Any QR code that comes into the camera view will be scanned continuously. You will have to implement a logic to only respond to the QRCode info types that your app actually wants to read and ignore any other reads. Remember if you are using stack based pages which is probably what you are using then you will have to unmount the camera component/the component this package provides upon successful scan, otherwise even if you move to another page on successful scan the component will still be mounted in the stack and will keep scanning.

[Yeasirarafat53]

import React, {useRef, useState} from 'react'; import {StyleSheet, Text, View, Button, Alert} from 'react-native'; import {Camera, CameraType} from 'react-native-camera-kit'; import {check, PERMISSIONS, RESULTS} from 'react-native-permissions'; import Modal from 'react-native-modal'; import {useToast} from 'react-native-toast-notifications'; import Toast from 'react-native-toast-notifications';

const Example = () => { const toast = useToast(); const toastRef = useRef(); const [isCameraOpen, setIsCameraOpen] = useState(false); const [scannedBarcode, setScannedBarcode] = useState(null);

const handleScan = () => { setIsCameraOpen(true); };

const handleBarcodeScan = (event) => { const scannedValue = event.nativeEvent.codeStringValue;

if (scannedValue.length === 13) {
  setScannedBarcode(scannedValue);
  setIsCameraOpen(false);
} else {
  // Notify the user about an invalid barcode length using a toast message
  toast.show('Invalid barcode length', { type: 'error' });
}

};

return ( <View style={{ flex: 1 }}> {isCameraOpen ? ( <Camera style={{ flex: 1 }} cameraType={CameraType.Back} scanBarcode={true} onReadCode={handleBarcodeScan} showFrame={true} laserColor="red" frameColor="white" /> ) : ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text style={{ color: 'red' }}>Scanned Barcode: {scannedBarcode}

    </View>
  )}
</View>

); };

export default Example;

const styles = StyleSheet.create({});

problem is first time when camera open its show black screen but second time camera works fine, so whats wrong?

[mist998]

It is indeed scanning the whole area, but it was not a big deal.

barcode continuously scanning , how to fix it

@Yeasirarafat53 My workaround (probably, forgot what exactly I did) is pass a callback into the camera wrapper component, and inside it, once it scan something, change the prop scanning to false (so I let user to still see the camera, but this actually causing some lag, since camera component is expensive to re-render and keep the camera opened will drain battery..etc).

Without a full context, it's hard to judge where goes wrong, here's some clues that I could offer you, The black screen you mentioned is probably because the first time the permission is not granted at the first run (installation, or every time before you granting camera permission), but even if the permission is granted, AFAIK none of the camera lib in RN would automatically re-render itself. So, just update the component once you detect the required permission is granted.