js-to-reanimated.macro

Intro

Based on reanimated-math.macro by futuun.

This macro will transform a javascript block to be reanimated. Example:

re(() => {
    if(this.gestureState == State.ACTIVE){
        stopClock(this.clock);
        this.transX = this.transX + (this.dragX - this.prevDragX);
        this.prevDragX = this.dragX;
        this.transX;
    }
    else if(this.gestureState != -1){
        this.prevDragX = 0;
        this.transX = () => {
            if(defined(this.transX)){
                if(clockRunning(this.clock) == 0){
                    this.animatedState.finished = 0;
                    this.animatedState.velocity = this.dragVX;
                    this.animatedState.position = this.transX;
                    startClock(this.clock);
                }
            }
            decay(this.clock,this.animatedState,{
                deceleration: 0.999
            });
            if(this.animatedState.finished){
                stopClock(this.clock);
            }
            this.animatedState.position;
        }
    }
});

Will transform to:

Animated.block([
  Animated.cond(
    Animated.eq(this.gestureState, State.ACTIVE),
    [
      Animated.stopClock(this.clock),
      Animated.set(
        this.transX,
        Animated.add(this.transX, Animated.sub(this.dragX, this.prevDragX))
      ),
      Animated.set(this.prevDragX, this.dragX),
      this.transX
    ],
    Animated.cond(Animated.neq(this.gestureState, Animated.multiply(1, -1)), [
      Animated.set(this.prevDragX, 0),
      Animated.set(this.transX, [
        Animated.cond(Animated.defined(this.transX), [
          Animated.cond(Animated.eq(Animated.clockRunning(this.clock), 0), [
            Animated.set(this.animatedState.finished, 0),
            Animated.set(this.animatedState.velocity, this.dragVX),
            Animated.set(this.animatedState.position, this.transX),
            Animated.startClock(this.clock)
          ])
        ]),
        Animated.decay(this.clock, this.animatedState, {
          deceleration: 0.999
        }),
        Animated.cond(this.animatedState.finished, [
          Animated.stopClock(this.clock)
        ]),
        this.animatedState.position
      ])
    ])
  )
]);

Config

Define the identifier to the reanimated config name to tell the macro what identifier holds the Reanimated value.

const plugins = [
    ['macros',{
        jsToReanimated: {
            identifier: 'Animated'
        }
    }]
];
`