expo: barCodeScanner cannot show in full screen in Android

It seems that <Camera> can actually read bar codes and it works just fine. If the camera is stretched, you can try changing the pixel ratio.

import { Camera } from 'expo-camera';

<Camera
  onBarCodeScanned={this.onBarCodeScanned}
  ratio='16:9'
  style={StyleSheet.absoluteFillObject}
/>

@OscarYuen : I have solved my problem with a style wrapper and height attribute :

const styles = StyleSheet.create({
  cameraContainer: {
      marginHorizontal: 0, marginLeft: 0, marginStart: 0,
      paddingHorizontal: 0, paddingLeft: 0, paddingStart: 0,
      height: '115%',
      padding: 0
  }
});

const Scanner = ({ scan, dataItem, resetData }) => (
  <View style={{ flex: 1, }}>
    {dataItem ? (
      <ProductPage dataItem={dataItem} resetData={() => resetData()} />
    ) : (
      <View style={{ flex: 1, backgroundColor: '#000', padding: 0 }}>
        <BarCodeScanner
          barCodeTypes={['ean13', 'ean8', 'code128']}
          onBarCodeScanned={scan}
          style={[StyleSheet.absoluteFillObject, styles.cameraContainer]}
        />
[...]

It works ! (but I still do not understand why ^^)

I got something! 🎉

you can make the camera scanner show in full screen(but zoomed) by adding width and height styles to 1000 for both but with proper frontend stylings, you can make it look filled in

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

my expo versions “expo”: “~44.0.0”, “expo-barcode-scanner”: “~11.2.0”

As a rock-solid workaround I just went with a black background for a container (it’s applied only for problematic devices and looks natural):

// ... Omitted standard JS imports

export default () => {
  // ...
  return <View style={styles.container}>
    <BarCodeScanner
      onBarCodeScanned={scanResult ? undefined : handleBarCodeScanned}
      style={StyleSheet.absoluteFillObject}
      barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}
    />
  </View>
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#000000' // the rock-solid workaround
  },
})

Please re-open, the bug is still not fixed and switching to expo-camera doesn’t solve the problem of expo-bar-scanner. A PR must be done for closing it.

hey all! using expo-camera instead of expo-barcode-scanner is a good option, it gives you full control over the camera viewport. we’ll look into exposing a resizeMode option to expo-barcode-scanner at some point in the future.

Running into the same issue here. Can’t make barCodeScanner take full width on Android. Using Expo 34.

@OscarYuen You mention that you switched to using the Camera component instead. Would you mind telling me how you handle the parsing of the QR code then?

You could try the following code which is very similar to barCodeScanner component with same style applied.

<Camera
                    onBarCodeScanned={this._scanQRCode}
                    barCodeScannerSettings={{
                        barCodeTypes: [BarCodeScanner.Constants.BarCodeType.qr],
                    }}
                    style={[StyleSheet.absoluteFill, styles.cameraContainer]}
                />

maybe this can help someone, works on a lot of devices, basically just making the Camera larger than the screen and trying to center

  style={
          Platform.OS === "android"
            ? {
                position: "absolute",
                top: 0,
                transform: [{ translateX: width / 2 }],
                right: 0,
                bottom: 0,
                width: width * 2.5,
                height: height * 1.5,
              }
            : StyleSheet.absoluteFillObject
        }

try this,

it worked for me

<View style={{position: 'absolute', ...styles.flexCenter}} >
        <BarCodeScanner
          onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
          style={styles.camDisplay}
          barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}
        />
</View>

styles:

flexCenter: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
},
camDisplay: {
    zIndex: 1,
    width: width*1.8,
    height: height*1.1,
},

Same issue here, but horizontally. I use native-base for components customization and Expo SDK 33 (updated from SDK 32). As you can see, I have a left and right extra padding 😦

Expo CLI 3.0.8 environment info: System: OS: Windows 7 Binaries: Node: 12.4.0 - G:\Travail\nodejs\node.EXE npm: 6.9.0 - G:\Travail\nodejs\npm.CMD

 "dependencies": {
    "@expo/vector-icons": "^10.0.3",
    "axios": "^0.18.0",
    "crypto-js": "^3.1.9-1",
    "expo": "^33.0.0",
    "expo-barcode-scanner": "^5.0.1",
    "expo-constants": "^5.0.1",
    "expo-font": "^5.0.1",
    "expo-permissions": "^5.0.1",
    "native-base": "^2.13.4",
    "prop-types": "^15.6.2",
    "react": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
    "react-native-base64": "0.0.2",
    "react-router-native": "^4.3.0"
  },

Here is my code :

import React from 'react';
import { View, Text } from 'native-base';
import { BarCodeScanner } from 'expo-barcode-scanner';
import { StyleSheet, Image } from 'react-native';
import PropTypes from 'prop-types';
import ProductPage from './ProductPage';

[...]
  <View style={{ flex: 1 }}>
    {dataItem ? (
      <ProductPage dataItem={dataItem} resetData={() => resetData()} />
    ) : (
      <View style={{ flex: 1, backgroundColor: '#fff', contentPadding: 0, padding: 0, paddingHorizontal: 0, paddingLeft: 0, paddingStart: 0, marginHorizontal: 0, marginLeft: 0, marginStart: 0 }}>
        <BarCodeScanner
          barCodeTypes={['ean13', 'ean8', 'code128']}
          onBarCodeScanned={scan}
          style={StyleSheet.absoluteFillObject}
        />
        <View
          style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
        >
          <Image source={barcode} style={{ opacity: 0.5 }} />
        </View>
        <View
          style={{
            backgroundColor: 'rgba(0,0,0,0.5)',
            alignItems: 'center',
          }}
        >
          <Text style={{ color: '#fff', fontSize: 18 }}>
            Scannez le code-barre
          </Text>
          <Text style={{ color: '#fff', fontSize: 18 }}>
            d&#39;un produit cosmétique
          </Text>
        </View>
      </View>
    )}
  </View>

I have tried flex: 4 and several attributes, absoluteFillObject does not work.

Hi, any update on this?

I’m using @deepnothing’s fix, when are we going to have a real fix on expo-barcode-scanner?

@jp928 unfortunately that didn’t work me

I agree ticket should be reopened especially if it works in expo-camera

Note that its still not possible to “absoluteFill” the BarCodeScanner even in SDK38 - at least without workarounds. However its super easy to replace it with the Camera component which supports it (the only change I had to perform is to wrap the barCodeTypes property into a barCodeScannerSettings one).