@kkirbatski/js-to-reanimated.macro

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'
		}
	}]
];