render()

in src/components/qrcodeScanner.tsx [60:175]
111 lines of code
3 McCabe index (conditional complexity)

  render() {
    const sideWidth = this.calculateSideWidth(
      this.props.width,
      this.props.markerSize,
    );
    const verticals = this.calculateVerticals(
      this.props.height,
      this.props.markerSize,
    );

    return (
      <Scanner
        ref={sc => (this.qrCodeRef = sc)}
        onRead={this.onRead}
        // //@ts-ignore
        // flashMode={
        //   RNCamera.Constants.FlashMode.off
        // }
        containerStyle={{
          marginTop: -80,
        }}
        topViewStyle={{
          position: 'absolute',
          zIndex: 2,
          marginLeft:
            this.props.width > this.props.height ? sideWidth - verticals : 0,
        }} // hack: margin is needed when in landscape
        topContent={
          <View
            style={{
              position: 'relative',
              height: this.props.height,
              width: this.props.width,
            }}>
            <View
              key="left"
              style={{
                height: this.props.height + 80,
                backgroundColor: 'rgba(0,0,0,.5)',
                width: sideWidth,
                left: 0,
                position: 'absolute',
                top: 0,
              }}
            />
            <View
              key="right"
              style={{
                height: this.props.height + 80,
                backgroundColor: 'rgba(0,0,0,.5)',
                width: sideWidth,
                right: 0,
                position: 'absolute',
                top: 0,
              }}
            />
            <View
              key="top"
              style={{
                marginHorizontal: sideWidth,
                width: this.props.markerSize,
                backgroundColor: 'rgba(0,0,0,.5)',
                height: verticals + 40,
                top: 0,
                position: 'absolute',
              }}
            />
            <View
              key="bottom"
              style={{
                marginHorizontal: sideWidth,
                width: this.props.markerSize,
                backgroundColor: 'rgba(0,0,0,.5)',
                height: verticals + 40,
                bottom: -80,
                position: 'absolute',
              }}
            />
            {this.onClose && (
              <Icon
                name="close-circle-outline"
                type={Platform.select({
                  ios: 'ionicon',
                  android: 'material-community',
                })}
                size={40}
                color="black"
                containerStyle={{
                  position: 'absolute',
                  top: verticals - 40,
                  right: sideWidth - 40,
                }}
                onPress={this.onClose}
              />
            )}
          </View>
        }
        customMarker={
          <View>
            <QRCodeMask width={this.props.markerSize} color={'black'} />
            <Text style={{...style.center, textAlign: 'center'}}>
              Move closer to scan
            </Text>
          </View>
        }
        showMarker={true}
        bottomContent={this.props.bottomContent}
        bottomViewStyle={{
          position: 'absolute',
          zIndex: 2,
          bottom: 100,
        }}
        cameraStyle={{height: this.props.height + 80, width: this.props.width}}
      />
    );
  }