react-native-svg-pan-zoom dont work with a wrapper != view

Hi friends, thanks for this npm, is amazing. The bad news is when the react-native-svg-pan-zoom is wrapped with another component than View, by example react-native-modal, the zoom and drag is disabled, but the events click work even.

This is an example

import React, {Component} from 'react'; import {Platform, StyleSheet, Text, View, ImageBackground, Dimensions} from 'react-native'; import { Svg, Rect, Circle, Image, Polyline, Path, G } from 'react-native-svg'; import Modal from "react-native-modal"; import SvgPanZoom, { SvgPanZoomElement } from 'react-native-svg-pan-zoom';

const width = Dimensions.get('window').width const height = Dimensions.get('window').height

const WIDTH = 1500 const HEIGHT = 2500 type Props = {}; export default class App extends Component { constructor(props) { super(props); this.state = { tree_maxWidth:width6, tree_maxHeight:height7 } }

render() { return ( <Modal

      visible={true}
        style={{
                backgroundColor: 'transparent',
                margin: 0, // This is the important style you need to set
                alignItems: undefined,
                justifyContent: undefined,
                }}

      // animationIn="slideInLeft"
      // animationOut="slideOutRight"
      // animationInTiming={1000}
      // animationOutTiming={1000}

       backdropColor="#B4B3DB"
       backdropOpacity={0.8}
       animationIn="zoomInDown"
       animationOut="zoomOutUp"
       animationInTiming={1600}
       animationOutTiming={1600}
       backdropTransitionInTiming={600}
       backdropTransitionOutTiming={600}

       isVisible={this.props.isVisible}
      >
            <View style = {{ width: '100%', height:'100%' }}>
    <SvgPanZoom
      canvasHeight  = {height}
      canvasWidth   = {width}
      minScale      = {.01}
      maxScale = {4}
      // initialZoom   = {.8}
      // canvasHeight  = {500}
      // canvasWidth   = {500}
      // minScale      = {0.5}
      // initialZoom   = {0.7}

      onZoom        = {(zoom) => { console.log('onZoom:' + zoom) }}
      canvasStyle   = {{ backgroundColor: 'yellow' }}
      viewStyle     = {{ backgroundColor: 'black'  }}
    >
      <Image
        x={0}
        y={0}
        width="100%"
        height="100%"
        preserveAspectRatio="xMidYMid slice"
        opacity="1"
        href={require('./map.png')}
        // minScale = {5}
        // clipPath="url(#clip)"
      />

      {/* 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"
        />

        <Polyline
           points="100,100 200,120 300,200 400,600 600,700 950,900"
           stroke="orange"
           strokeWidth="10"
           fill="none"
           strokeDasharray={[10, 10]}
       />

              <Path
                  d="M55.192 27.87l-5.825-1.092a17.98 17.98 0 0 0-1.392-3.37l3.37-4.928c.312-.456.248-1.142-.143-1.532l-4.155-4.156c-.39-.39-1.076-.454-1.532-.143l-4.928 3.37a18.023 18.023 0 0 0-3.473-1.42l-1.086-5.793c-.103-.543-.632-.983-1.185-.983h-5.877c-.553 0-1.082.44-1.185.983l-1.096 5.85a17.96 17.96 0 0 0-3.334 1.393l-4.866-3.33c-.456-.31-1.142-.247-1.532.144l-4.156 4.156c-.39.39-.454 1.076-.143 1.532l3.35 4.896a18.055 18.055 0 0 0-1.37 3.33L8.807 27.87c-.542.103-.982.632-.982 1.185v5.877c0 .553.44 1.082.982 1.185l5.82 1.09a18.013 18.013 0 0 0 1.4 3.4l-3.31 4.842c-.313.455-.25 1.14.142 1.53l4.155 4.157c.39.39 1.076.454 1.532.143l4.84-3.313c1.04.563 2.146 1.02 3.3 1.375l1.096 5.852c.103.542.632.982 1.185.982h5.877c.553 0 1.082-.44 1.185-.982l1.086-5.796c1.2-.354 2.354-.82 3.438-1.4l4.902 3.353c.456.313 1.142.25 1.532-.142l4.155-4.154c.39-.39.454-1.076.143-1.532l-3.335-4.874a18.016 18.016 0 0 0 1.424-3.44l5.82-1.09c.54-.104.98-.633.98-1.186v-5.877c0-.553-.44-1.082-.982-1.185zM32 42.085c-5.568 0-10.083-4.515-10.083-10.086 0-5.568 4.515-10.084 10.083-10.084 5.57 0 10.086 4.516 10.086 10.083 0 5.57-4.517 10.085-10.086 10.085z"
                  fill="blue"
          />

      </SvgPanZoomElement>

    </SvgPanZoom>
    </View>
  </Modal>
);

} }

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, });

Best regards.

garblovians / react-native-svg-pan-zoom

react-native-svg-pan-zoom dont work with a wrapper != view #11