Style shoutem camera component

Question

He, I was trying to put the right styles in place in order to see the focus image over the camera screen with a little padding on all sides, but somehow I could not get it done.

The shoutem.camera source looks like:

<View style={style.cameraContainer}>
    <Camera
      onBarCodeRead={this.onQRCodeScanned}
      style={style.cameraView}
      aspect={Camera.constants.Aspect.fill}
      captureQuality={cameraQuality}
    />
    <Image
      source={require('../assets/images/focus-frame.png')}
      style={style.cameraFocusFrame}
    />
</View>

I am asking for style.cameraContainer & style.cameraView & style.cameraFocusFrame.

score 1 · Accepted Answer · answered Aug 26 '17 at 07:24

The style rules for those styles can be found at the very end of themeName.js. Here it is from the default theme, Rubicon:

'shoutem.camera.QRCodeScanner': {
  cameraContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cameraFocusFrame: {
    width: 175,
    height: 165,
    resizeMode: 'contain',
  },
  cameraView: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },
  noPermissionsMessage: {
    alignSelf: 'center',
    fontSize: 18,
    lineHeight: 20,
  },
}

We do intend to reimplement the focus frame to be responsive by nature, as you had mentioned.

Style shoutem camera component

1 Answers1