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

I got a fix!! ?

you can make the camera scanner show in full screen by adding width and height styles to 1000 for both

<BarCodeScanner
  onBarCodeScanned={scanned ? undefined : this._handleBarCodeScanned}
  style={{ width: 1000, height: 1000 }}
/>