title: How to have zoom logic in react native event with d3 like web zoom event?
body: <p>Zooming in web seem quiet easy code like this:</p>
  <pre><code>  const zoom = d3
      .zoom&lt;SVGSVGElement, unknown&gt;()
      .scaleExtent([1, 3])
      .translateExtent([
        [0, 0],
        [width, height],
      ])
      .extent([
        [0, 0],
        [width, height],
      ])
      .on(&quot;zoom&quot;, ({ transform }: D3ZoomEvent&lt;SVGSVGElement, unknown&gt;) =&gt; {
        x.range([0, width].map((d) =&gt; transform.applyX(d)));
        xState.range([0, width].map((d) =&gt; transform.applyX(d)));
        g.selectAll(&quot;.bar&quot;)
          .attr(&quot;x&quot;, function (d) {
            return x(
              (d as { key: string; value: number }).key as string
            ) as number;
          })
          .attr(&quot;width&quot;, x.bandwidth());
  
        g.selectAll(&quot;.category&quot;).attr(&quot;transform&quot;, function (d) {
          return `translate(${xState(
            (d as DataType).State as string
          )},${containerHeight - margin.top})`;
        });
      });
    svg.call(zoom);
  </code></pre>
  <p>However I have no idea how to implement this in react native? I made range in state, this is in react native:</p>
  <pre><code>const [xRange, setXRange] = useState([0, width]);
  const x = d3.scaleBand().range(xRange).padding(0.25);
  </code></pre>
  <p>and the pinch handler:</p>
  <pre><code>&lt;PinchGestureHandler
    onGestureEvent={e =&gt; {
      const zoomIdentity = d3.zoomIdentity.translate(
        e.nativeEvent.focalX,
        e.nativeEvent.focalY,
      );
  
      setXRange(xRange.map(d =&gt; zoomIdentity.applyX(d)));
    }}&gt;
    &lt;Svg style={styles.svg} width={width} height={width}&gt;
      {testData.map((d, index) =&gt; {
        return (
          &lt;Rect
            key={`rect:${index}`}
            rx={5}
            x={x(d.key)}
            y={y(d.value)}
            fill={color(d.value)}
            width={xBandWidth}
            height={height - y(d.value)}
          /&gt;
        );
      })}
      {data.map((d, index) =&gt; {
        return (
          &lt;SVGText
            key={`label:${index}`}
            fontSize={10}
            transform={`translate(${xState(d.State) as number},${
              height + 20
            })`}
            fill=&quot;green&quot;&gt;
            {d.State}
          &lt;/SVGText&gt;
        );
      })}
    &lt;/Svg&gt;
  &lt;/PinchGestureHandler&gt;
  </code></pre>
  <p>But it don't work, i want to have same zoom logic in web to react native?</p>