Issue with the drag feature

[felixmagnell]

Hello, my issue is that the dragable object has no constrain. I can drag the component over the whole screen even if it's not wrapped under the same View. I don't want the svg object to go over the gray area, as seen in picture:

This is my code:

return (

            <View style={{ flex: 1,
                backgroundColor: 'white',
                flexDirection: 'column',
                justifyContent: 'flex-start',
              }} onLayout={this.onLayout}
              >
              <View style={{ height: 100, width: null, backgroundColor: '#dcdcdc', flexDirection: 'row', 
              justifyContent: 'space-between' }}>
                <View style={{ flexDirection: 'row', justifyContent: 'flex-start' }}>

              </View>
              </View>
              <SvgPanZoom
          canvasHeight  = {500}
          canvasWidth   = {500}
          minScale      = {0.5}
          initialZoom   = {0.7}
          onZoom        = {(zoom) => { console.log('onZoom:' + zoom) }}
          canvasStyle   = {{ backgroundColor: 'yellow' }}
          viewStyle     = {{ backgroundColor: 'green'  }}
        >

          {/* Doesn't consume or respond to clicks */}
          <Circle
            cx          = {100}
            cy          = {100}
            r           = {42}
            stroke      = "red"
            strokeWidth = "2.5"
            fill        = "blue"
          />

          {/* Responds to clicks */}
          <SvgPanZoomElement
            x ={50}
            y ={50}
            onClick         = {()=>{ console.log('onClick!') }}
            onClickCanceled = {()=>{ console.log('onClickCanceled!') }}
            onClickRelease  = {()=>{ console.log('onClickRelease!') }}
            onDrag          = {()=>{ console.log('onDrag!') }}
          >
            <Circle
              cx          = {42}
              cy          = {42}
              r           = {42}
              stroke      = "blue"
              strokeWidth = "2.5"
              fill        = "red"
            />
          </SvgPanZoomElement>

        </SvgPanZoom>

            </View>

          );
        }

Any ideas why it behaves like this?

[Stalder]

Did you try to set style overflow: 'hidden' for parent View?

[felixmagnell]

@Stalder Perfect! It worked! Thank you.