How i can trigger a function after animating done? - react-native

Question

I am using React-native-reanimated and react-native-gesture-handler,
I need to trigger a function after animation done, This is my my code:
let a = new Value(1);
let onStateChange = event([
{
nativeEvent: ({state}) =>
block([
cond(
eq(state, State.END),
set(a, runTiming(new Clock(), 1, 0)),
),
]),
},
]);
return <TapGestureHandler onHandlerStateChange={onStateChange}>
I need something like this :
onStateChange = event => {
if (event.nativeEvent.state === State.END) {
alert("I'm being pressed");
}
return block([
cond(
eq(event.nativeEvent.state, State.END),
set(a, runTiming(new Clock(), 1, 0)),
),
]);
},
But not works. :/

Answer 1

There is a call method to handle back from native section to JS.

Answer 2

You can use the call method once the animation is finished (state.END).
This example is for normal animation but the implementation for your case should be similar, notice that when you use call you can pass back parameters to the function you want to use.
function runTiming({ clock, value, dest, afterAnimationActions }) {
const state = {
finished: new Value(0),
position: value,
time: new Value(0),
frameTime: new Value(0),
};
const config = {
duration: ANIMATION_DURATION,
toValue: dest,
easing: Easing.inOut(Easing.ease),
};
return block([
cond(clockRunning(clock), 0, [
set(state.finished, 0),
set(state.time, 0),
set(state.position, value),
set(state.frameTime, 0),
set(config.toValue, dest),
startClock(clock),
]),
timing(clock, state, config),
cond(state.finished, [
stopClock(clock),
call([dest], (d) => afterAnimationActions(d)), // <-- Add this
]),
state.position,
]);
}
With that, you can call runTiming like this:
transY = runTiming({
clock: this.clock,
value: this.from,
dest: this.toValue,
afterAnimationActions: this.afterAnimationActions,
});
And the afterAnimationActions should look like this:
afterAnimationActions = ([dest]) => {
// `dest` is the param we passed using `call`
// The function logic here
};