question : how to call js callback like setState after runTiming()

my use-case is to call a setState after runTiming or runSpring was done springing the value. here is my code

function runSpring({ translateY, velocityY, state: _state }) {
  const clock = new Clock();
  const state = {
    finished: new Value(0),
    velocity: new Value(0),
    position: new Value(0),
    time: new Value(0)
  };
  const config = {
    stiffness: new Value(10),
    mass: new Value(1),
    damping: new Value(10),
    overshootClamping: false,
    restSpeedThreshold: 0.001,
    restDisplacementThreshold: 0.001
  };
  const configB = SpringUtils.makeConfigFromBouncinessAndSpeed({
    ...SpringUtils.makeDefaultConfig(),
    bounciness: 10,
    speed: 2
  });
  const configC = SpringUtils.makeConfigFromOrigamiTensionAndFriction({
    ...SpringUtils.makeDefaultConfig(),
    tension: 100,
    friction: new Value(40)
  });
  // startClock(clock);
  return block([
    cond(lessOrEq(translateY, 0), [
      cond(
        lessOrEq(velocityY, -300),
        [
          startClock(clock),
          spring(clock, state, { ...config, toValue: -DeviceHeight })
        ],
        [
          cond(
            eq(_state, State.END),
            [startClock(clock), spring(clock, state, config)],

            [
              set(state.position, translateY)
              // debug("clock  2 happened", eq(_state, State.ACTIVE))
            ]
          )
        ]
      )
    ]),
    state.position
  ]);
}

port default class ExampleTab extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentItemIndex: 0

    };
    this._translateY = new Value(0);
    this._state = new Value(State.UNDETERMINED);
    this._velocityY = new Value(0);
    this.currentCardVelocity = new Value(0);
    this.translateY = runSpring({
      translateY: this._translateY,
      velocityY: this._velocityY,
      state: this._state
    });
  }

  render(){
 return (
        <PanGestureHandler
              key={pIndex}
              {...gestureEvent}
              // onHandlerStateChange={this.handleGState}
              enabled={indexDistance === 0}
            >
              <Animated.View
                style={{
                  flex: 1,
                  shadowOffset: { height: 3 },
                  elevation: 3,
                  // borderWidth: 0.5,
                  borderColor: "black",
                  borderRadius: 25,
                  shadowColor: "black",
                  shadowOpacity: 0.5,
                  justifyContent: "flex-end",
                  transform: [
                    {
                      translateY:
                        indexDistance === 0
                          ? this.translateY
                          : isPrevCard
                          ? prevCardTranslateY
                          : translateY
                    }
                  ],
                  // opacity: animatedOpacity,
                  marginHorizontal: multiply(indexDistance, secondCardGrowth),
                  ...StyleSheet.absoluteFillObject
                }}
              >
              </Animed.View>
           </PanGestureHandler>
        ) }
  }
}

[brunocrpontes]

You can do it like below.

Using conditionals with the finished state at the end of the block and the call function to do a callback from js side:

[ ...previous block animated events...,
  cond(state.finished, 
     call([...your params here], (...your params) => {...function })
  )
]

[sidferreira]

So I’m not the only one…