title: React native pinch zoom with redash and reanimated
body: <p>I'm just trying to scale the image with pinch zoom using reanimated and redash.</p>
  <p><a href="https://www.youtube.com/watch?v=MukiK57qwVY" rel="nofollow noreferrer">I followed this tutorial</a></p>
  <p>But the component that I grab stays on top of the previous but under the next component. I know It's a bit complicated explainatory. For that I tried to draw a schema to explain you better.</p>
  <p><a href="https://i.stack.imgur.com/2xVl2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2xVl2.png" alt="enter image description here" /></a></p>
  <p>So, In the Image above 1,2 and 3 are my Cards which holds the Images. And I pinch Zooming to 2nd Image, but It stays above the first one (which is I wanted) but, also stays under the next card which is 3rd In this case.</p>
  <p>How can I prevent This?</p>
  <pre><code>const SIZE = shared === true ? width - 20 : width;
  const styles = StyleSheet.create({
      image: {
          ...StyleSheet.absoluteFill,
          width: undefined,
          height: undefined,
          resizeMode: &quot;contain&quot;,
      },
  });
  const state = new Value(State.UNDETERMINED);
  const pinchRef = useRef(PinchGestureHandler);
  const origin = vec.createValue(0, 0);
  const pinch = vec.createValue(0, 0);
  const focal = vec.createValue(0, 0);
  const scale = new Value(1);
  const numberOfPointers = new Value(0);
  const pinchGestureHandler = onGestureEvent({
      numberOfPointers,
      scale,
      state,
      focalX: focal.x,
      focalY: focal.y,
  });
  const zIndex = cond(eq(state, State.ACTIVE), 3, 0);
  const adjustedFocal = vec.add(
      {
          x: -SIZE / 2,
          y: -SIZE / 2,
      },
      focal
  );
  useCode(
      () =&gt;
          block([
              cond(pinchBegan(state), vec.set(origin, adjustedFocal)),
              cond(
                  pinchActive(state, numberOfPointers),
                  vec.set(pinch, vec.minus(vec.sub(origin, adjustedFocal)))
              ),
              cond(eq(state, State.END), [
                  set(pinch.x, timing({ from: pinch.x, to: 0 })),
                  set(pinch.y, timing({ from: pinch.y, to: 0 })),
                  set(scale, timing({ from: scale, to: 1 })),
              ]),
          ]),
      [adjustedFocal, numberOfPointers, origin, pinch, scale, state]
  );
  return (
      &lt;&gt;
          &lt;Animated.View style={{ width: SIZE, height: SIZE, zIndex }}&gt;
              &lt;PinchGestureHandler ref={pinchRef} {...pinchGestureHandler}&gt;
                  &lt;Animated.View style={StyleSheet.absoluteFill}&gt;
                      &lt;Animated.Image
                          style={[
                              styles.image,
                              {
                                  transform: [
                                      ...translate(pinch),
                                      ...transformOrigin(origin, { scale }),
                                  ],
                              },
                          ]}
                          source={{ uri: app.HOST + photo }}
                      /&gt;
                  &lt;/Animated.View&gt;
              &lt;/PinchGestureHandler&gt;
          &lt;/Animated.View&gt;
      &lt;/&gt;
  );
  </code></pre>
  <p>Here is the component</p>