title: React-Native-Camera Limit Camera Area
body: <p>I have some problems limiting the Area of a RNCamera to its surrounding view.
  All related tickets I found here did not provide a proper solution with RNCamera.</p>
  
  <p>My Component has flex column design with two views.</p>
  
  <ul>
  <li>View 1: as a wrapper for the camera</li>
  <li>View 2: results view, colored in red with opacity </li>
  </ul>
  
  <p>As you can see the RNCamera goes over the bounds of the surrounding view.
  This leads causes problems while Barcode Scanning.</p>
  
  <p>The barcode in the example screenshot is detected.</p>
  
  <p>Is it possible to limit the react native camera to the bounds of its surrounding view?</p>
  
  <p>Or if not is there a way to see the coordinates of the scanned barcode and compare it against the measurements of the Views.</p>
  
  <p>The scanned barcode has bounds but I am not sure how to translate that to a proper position.</p>
  
  <p><a href="https://i.stack.imgur.com/9iNB1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9iNB1.jpg" alt="Screenshot"></a></p>
  
  <p><a href="https://i.stack.imgur.com/NtKrR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NtKrR.png" alt="Bounds and position"></a></p>
  
  <pre><code>const Stocktake = () =&gt; {
      let redBoxView, cameraWrapperView, camera
  
      function onBarCodeRead(bc) {
          console.log('bc', bc)
  
          if (redBoxView) {
              redBoxView.measure((x, y, width, height, pageX, pageY) =&gt; {
                  console.log('RedBox', x, y, width, height, pageX, pageY);
                  console.log('X', pageX)
                  console.log('Xend', pageX + width)
                  console.log('Y', pageY)
                  console.log('Yend', pageY + height)
              })
          }
      }
  
      return (
          &lt;View style={{flex: 1}}&gt;
              &lt;View style={{ backgroundColor: "purple", flex: 1 }}
                  ref={view =&gt; {
                      cameraWrapperView = view
                  }}&gt;
                  &lt;RNCamera
                      ref={ref =&gt; {
                          camera = ref;
                      }}
                      defaultTouchToFocus
                      mirrorImage={false}
                      onBarCodeRead={(bc) =&gt; { onBarCodeRead(bc) }}
                      onFocusChanged={() =&gt; { }}
                      onZoomChanged={() =&gt; { }}
                      style={styles.preview}
                      playSoundOnCapture={true}
                  /&gt;
              &lt;/View&gt;
              &lt;View style={{ backgroundColor: "rgba(254,0,0,0.6)", flex: 2, alignItems: "flex-end", justifyContent: "flex-end" }}
                  ref={ref =&gt; {
                      redBoxView = ref;
                  }}&gt;
                  {redBoxView ? &lt;Text&gt;{JSON.stringify(redboxMeasures)}&lt;/Text&gt; : null}
              &lt;/View&gt;
  
  
          &lt;/View&gt;
      );
  
  }
  </code></pre>