Reanimated TapGestureHandler callback with block - react-native

Question

What would be the way to achieve this.
callback with Animated.event works fine
callback with block gives no feedback :(
import React, { useState, useEffect } from "react";
import { View, Text, FlatList, Dimensions, Image } from "react-native";
import Animated from "react-native-reanimated";
import { PanGestureHandler, TapGestureHandler, State } from "react-native-gesture-handler";
const { Value, event, call, set, add, block } = Animated;
const bottom = new Value(100);
//want to achieve something like this
const onHandlerStateChange = block([set(bottom, add(bottom, 10))]);
// the line below Does work
// const onHandlerStateChange = event([{ nativeEvent: { y: bottom } }]);
const Comp = () => {
return (
<TapGestureHandler onHandlerStateChange={onHandlerStateChange}>
<Animated.View style={{ flex: 1}}>
<Animated.View style={{ flex: 1, position: "absolute", bottom: bottom }}>
<Text> some text</Text>
</Animated.View>
</Animated.View>
</TapGestureHandler>
);
};
export default Comp;
*const onHandlerStateChange = block([set(bottom, add(bottom, 10))]); * Doesn't work here

Answer 1

Here's the solution that works
Tip :
Understanding how reanimated evaluates nodes will be very useful
Here's the link to offical doc that might help you understand
https://software-mansion.github.io/react-native-reanimated/about-reanimated.html#at-most-once-evaluation-the-algorithm-
import React, { useState, useEffect } from "react";
import { View, Text, FlatList, Dimensions, Image } from "react-native";
import Animated from "react-native-reanimated";
import {
PanGestureHandler,
TapGestureHandler,
State,
} from "react-native-gesture-handler";
const { Value, event, call, set, add, cond, eq, block } = Animated;
const gstate = new Value(-1);
const onHandlerStateChange = event([{ nativeEvent: { state: gstate } }]);
let bottom = new Value(100);
bottom = cond(eq(gstate, State.END), [set(bottom, add(bottom, 10))], bottom);
const Comp = () => {
return (
<TapGestureHandler onHandlerStateChange={onHandlerStateChange}>
<Animated.View style={{ flex: 1, backgroundColor: "pink" }}>
<Animated.View
style={{ flex: 1, position: "absolute", bottom: bottom }}
>
<Text> some text</Text>
</Animated.View>
</Animated.View>
</TapGestureHandler>
);
};
export default Comp;