7

iOS is working fine BarCodeScanner take full screen but when i use android there is extra white space.

<BarCodeScanner
  onBarCodeScanned={scanned ? undefined : this._handleBarCodeScanned}
  style={[StyleSheet.absoluteFill, { flex: 1 }]}
/>

I have also checked by giving a different style like but no luck

style={{
  height: Dimensions.get('window').height,
  width: Dimensions.get('window').width,
}}

White space example

4 Answers 4

7

This seems to be an issue in recent versions of expo-barcode-scanner. One possible workaround is to explicitly set the dimensions of the BarCodeScanner to the dimensions of the screen:

import { Dimensions } from 'react-native';

<BarCodeScanner style={{
    width: Dimensions.get('screen').width,
    height: Dimensions.get('screen').height,
}} />           

Note that setting it to the dimensions of the window, like you tried, does not work.

3
  • Thank you for your help. But I have changed the project from expo to react-native cli for some reason. Sep 27, 2019 at 11:18
  • @ZeeshanAnsari Not a problem... Still, you can use these expo modules with react-native cli. Apr 23, 2021 at 8:34
  • OMGGGGG this is workkk, thank you. i've been searching this for hours!!!!!
    – me noob
    May 11, 2022 at 11:39
3

FrederikVds's answer not worked for me. So I have changed the expo camera which has the barcode scanner functionality too. You can do it like following:

import { Camera } from 'expo-camera'

<Camera
  onBarCodeScanned={scanned ? undefined : this._handleBarCodeScanned}
  style={StyleSheet.absoluteFillObject}
/>

Optionally you can use ratio='16:9'.

If you need to use expo libraries in react-native cli, you should follow these setups

Here is the issue discussion: https://github.com/expo/expo/issues/5212

1
  • Yea, this approach seems to work better Dec 30, 2021 at 22:35
1
import { BarCodeScanner, BarCodeScannerResult } from 
'expo-barcode-scanner'


const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;

export default function XYZ() {            

 return(
  <BarCodeScanner
   onBarCodeScanned={scanned ? undefined : 
   handleBarCodeScanned}
   style={{ width: height - 188, height: height, 
   alignSelf: "center" }}
  />
 )
}
1
  • 1
    Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Jun 9, 2022 at 9:40
0

Maybe a bit too late to answer the question but here's a solution that helped: Use this function to calculate the dimensions needed to be passed to the barcode style:

const calcDimensions = (width, height) => {
  const aspectHeight = width * 1.777777778;
  const aspectWidth = height * 0.5625;
  if (aspectHeight < height) {
    return {
      height: height,
      width: aspectWidth,
    };
  } else {
    return {
      height: aspectHeight,
      width: width,
    };
  }
};

const {newHeight, newWidth} = calcDimensions(screenHeight, screenWidth);

      <BarCodeScanner
        onBarCodeScanned={handleBarCodeScanned}
        style={{
          
          width: newWidth,
          height: newHeight,
        }}
      />
1
  • 1
    Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    May 14, 2023 at 13:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.