How can i remove extra white space in expo BarCodeScanner

Question

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,
}}

Answer 1

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.

Answer 2

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

Answer 3

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" }}
  />
 )
}