I'm just trying to scale the image with pinch zoom using reanimated and redash.
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.
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.
How can I prevent This?
const SIZE = shared === true ? width - 20 : width;
const styles = StyleSheet.create({
image: {
...StyleSheet.absoluteFill,
width: undefined,
height: undefined,
resizeMode: "contain",
},
});
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(
() =>
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 (
<>
<Animated.View style={{ width: SIZE, height: SIZE, zIndex }}>
<PinchGestureHandler ref={pinchRef} {...pinchGestureHandler}>
<Animated.View style={StyleSheet.absoluteFill}>
<Animated.Image
style={[
styles.image,
{
transform: [
...translate(pinch),
...transformOrigin(origin, { scale }),
],
},
]}
source={{ uri: app.HOST + photo }}
/>
</Animated.View>
</PinchGestureHandler>
</Animated.View>
</>
);
Here is the component
