Border Radius on BarCodeScanner

[danthegoodman]

So it seems the border radius style on the BarCodeScanner component works until the camera image is being processed, then it jumps back to sharp edges. Is there any way to force it to stay as such?

Here it is when the camera turns on:

Code:

<BarCodeScanner
  onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned}
  style={{height: 400, width: 300, position: 'absolute', borderRadius: 50}}
  type={BarCodeScanner.Constants.Type.front}
 >

[danthegoodman]

Here is is before the camera turns on (sorry it only lets me post one image per reply):

[danthegoodman]

Welp… adding overflow: 'hidden' fixed it… I’ll leave this here in case anyone is googling for it.

Final code:

<BarCodeScanner
  onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned}
  style={{height: 400, width: 300, position: 'absolute', borderRadius: 50, overflow: 'hidden'}}
  type={BarCodeScanner.Constants.Type.front}
 >

[adamjnav]

Thanks for sharing the solution with the community, @danthegoodman!