Skip to content
Expression node macro
JavaScript Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
macro
test Improve support of call expression (ability to call whatever function… Dec 26, 2019
.editorconfig
.gitignore
.npmignore
.prettierrc init Dec 25, 2019
LICENSE.txt
README.md
babel.config.js init Dec 25, 2019
package-lock.json init Dec 25, 2019
package.json
watch.sh

README.md

expression-node.macro

Intro

This macro will transform a javascript block to be react native animated expression. Example:

import { Animated } from 'react-native';
const { E } = Animated;
import re from 'expression-node.macro';

useOnFrameExpression(() => {
  const normalizedPan = re(panY - panYOffset);

  const min = (a, b) => re(a < b ? a : b);

  const canSwipeMore = re(
    gestureState === State.ACTIVE && scrollY <= 0,
  );

  return re(() => {
    // memoize last panY value in order to subtract it later from the real panY
    if (gestureState === State.BEGAN) {
      panYOffset = scrollY;
    }

    // check if the user has already scrolled all the way to the top
    if (canSwipeMore) {
      // if so - allow user to scroll more to the top
      // in order to show the refresh controls
      marginTop = panY >= 0 ? min(MAX_OVERSCROLL, normalizedPan) : 0;
    }
  });
});

Will transform to:

import { Animated } from 'react-native';
const { E } = Animated;
import re from 'expression-node.macro';

useOnFrameExpression(() => {
  const normalizedPan = E.sub(panY, panYOffset);

  const min = (a, b) => E.cond(E.lessThan(a, b), a, b);

  const canSwipeMore = E.and(
    E.eq(gestureState, State.ACTIVE),
    E.lessOrEq(scrollY, 0),
  );

  return E.block(
    E.block([
      E.cond(
        E.eq(gestureState, State.BEGAN),
        E.block([E.set(panYOffset, scrollY)]),
      ),
      E.cond(
        canSwipeMore,
        E.block([
          E.set(
            marginTop,
            E.cond(
              E.greaterOrEq(panY, 0),
              min(MAX_OVERSCROLL, normalizedPan),
              0,
            ),
          ),
        ]),
      ),
    ]),
  );
});

Installation

npm add -D terrysahaidak/expression-node.macro

Usage

Make sure you have Animated.E in scope:

import { Animated } from 'react-native';
const { E } = Animated;

Then you should be able to import re from the package. See example for usage cases.

Config

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

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

License

Based on js-to-reanimated.macro by kkirby.

MIT

You can’t perform that action at this time.