react-native-reanimated 2.8.0 → 3.0.0-rc.0

package/lib/reanimated1/derived/index.js

@@ -1,8 +0,0 @@
-export { default as acc } from './acc';
-export { default as color } from './color';
-export { default as diff } from './diff';
-export { default as diffClamp } from './diffClamp';
-export { default as interpolateNode, Extrapolate } from './interpolate';
-export { default as interpolateColors } from './interpolateColors';
-export { default as onChange } from './onChange';
-export { default as useCode } from './useCode';

package/lib/reanimated1/derived/interpolate.js

@@ -1,152 +0,0 @@
-import {
-  lessThan,
-  multiply,
-  sub,
-  add,
-  divide,
-  greaterThan,
-  lessOrEq,
-  eq,
-} from '../operators';
-import invariant from 'invariant';
-
-import AnimatedNode from '../core/AnimatedNode';
-import { createAnimatedCond as cond } from '../core/AnimatedCond';
-import { createAnimatedFunction as proc } from '../core/AnimatedFunction';
-
-const interpolateInternalSingleProc = proc(function (
-  value,
-  inS,
-  inE,
-  outS,
-  outE
-) {
-  const progress = divide(sub(value, inS), sub(inE, inS));
-  // logic below was made in order to provide a compatibility witn an Animated API
-  const resultForNonZeroRange = add(outS, multiply(progress, sub(outE, outS)));
-  const result = cond(
-    eq(inS, inE),
-    cond(lessOrEq(value, inS), outS, outE),
-    resultForNonZeroRange
-  );
-  return result;
-});
-
-function interpolateInternalSingle(value, inputRange, outputRange, offset) {
-  const inS = inputRange[offset];
-  const inE = inputRange[offset + 1];
-  const outS = outputRange[offset];
-  const outE = outputRange[offset + 1];
-  return interpolateInternalSingleProc(value, inS, inE, outS, outE);
-}
-
-function interpolateInternal(value, inputRange, outputRange, offset = 0) {
-  if (inputRange.length - offset === 2) {
-    return interpolateInternalSingle(value, inputRange, outputRange, offset);
-  }
-  return cond(
-    lessThan(value, inputRange[offset + 1]),
-    interpolateInternalSingle(value, inputRange, outputRange, offset),
-    interpolateInternal(value, inputRange, outputRange, offset + 1)
-  );
-}
-
-export const Extrapolate = {
-  EXTEND: 'extend',
-  CLAMP: 'clamp',
-  IDENTITY: 'identity',
-};
-
-function checkNonDecreasing(name, arr) {
-  for (let i = 1; i < arr.length; ++i) {
-    // We can't validate animated nodes in JS.
-    if (arr[i] instanceof AnimatedNode || arr[i - 1] instanceof AnimatedNode)
-      continue;
-    invariant(
-      arr[i] >= arr[i - 1],
-      '%s must be monotonically non-decreasing. (%s)',
-      name,
-      arr
-    );
-  }
-}
-
-function checkMinElements(name, arr) {
-  invariant(
-    arr.length >= 2,
-    '%s must have at least 2 elements. (%s)',
-    name,
-    arr
-  );
-}
-
-function checkValidNumbers(name, arr) {
-  for (let i = 0; i < arr.length; i++) {
-    // We can't validate animated nodes in JS.
-    if (arr[i] instanceof AnimatedNode || typeof arr[i] !== 'number') continue;
-    invariant(
-      Number.isFinite(arr[i]),
-      '%s cannot include %s. (%s)',
-      name,
-      arr[i],
-      arr
-    );
-  }
-}
-
-function convertToRadians(outputRange) {
-  for (const [i, value] of outputRange.entries()) {
-    if (typeof value === 'string' && value.endsWith('deg')) {
-      outputRange[i] = parseFloat(value) * (Math.PI / 180);
-    } else if (typeof value === 'string' && value.endsWith('rad')) {
-      outputRange[i] = parseFloat(value);
-    }
-  }
-}
-
-export default function interpolate(value, config) {
-  const {
-    inputRange,
-    outputRange,
-    extrapolate = Extrapolate.EXTEND,
-    extrapolateLeft,
-    extrapolateRight,
-  } = config;
-
-  checkMinElements('inputRange', inputRange);
-  checkValidNumbers('inputRange', inputRange);
-  checkMinElements('outputRange', outputRange);
-  checkValidNumbers('outputRange', outputRange);
-  checkNonDecreasing('inputRange', inputRange);
-  invariant(
-    inputRange.length === outputRange.length,
-    'inputRange and outputRange must be the same length.'
-  );
-
-  convertToRadians(outputRange);
-  const left = extrapolateLeft || extrapolate;
-  const right = extrapolateRight || extrapolate;
-  let output = interpolateInternal(value, inputRange, outputRange);
-
-  if (left === Extrapolate.CLAMP) {
-    output = cond(lessThan(value, inputRange[0]), outputRange[0], output);
-  } else if (left === Extrapolate.IDENTITY) {
-    output = cond(lessThan(value, inputRange[0]), value, output);
-  }
-
-  if (right === Extrapolate.CLAMP) {
-    output = cond(
-      greaterThan(value, inputRange[inputRange.length - 1]),
-      outputRange[outputRange.length - 1],
-      output
-    );
-  } else if (right === Extrapolate.IDENTITY) {
-    output = cond(
-      greaterThan(value, inputRange[inputRange.length - 1]),
-      value,
-      output
-    );
-  }
-
-  return output;
-}

package/lib/reanimated1/derived/interpolateColors.js

@@ -1,62 +0,0 @@
-import { processColor } from 'react-native';
-import { round } from '../base';
-import color from './color';
-import interpolate, { Extrapolate } from './interpolate';
-
-function red(c) {
-  return (c >> 16) & 255;
-}
-function green(c) {
-  return (c >> 8) & 255;
-}
-function blue(c) {
-  return c & 255;
-}
-function opacity(c) {
-  return ((c >> 24) & 255) / 255;
-}
-
-/**
- * Use this if you want to interpolate an `Animated.Value` into color values.
- *
- * #### Why is this needed?
- *
- * Unfortunately, if you'll pass color values directly into the `outputRange` option
- * of `interpolate()` function, that won't really work (at least at the moment).
- * See https://github.com/software-mansion/react-native-reanimated/issues/181 .
- *
- * So, for now you can just use this helper instead.
- */
-export default function interpolateColors(animationValue, options) {
-  const { inputRange, outputColorRange } = options;
-  const colors = outputColorRange.map(processColor);
-
-  const r = round(
-    interpolate(animationValue, {
-      inputRange,
-      outputRange: colors.map(red),
-      extrapolate: Extrapolate.CLAMP,
-    })
-  );
-  const g = round(
-    interpolate(animationValue, {
-      inputRange,
-      outputRange: colors.map(green),
-      extrapolate: Extrapolate.CLAMP,
-    })
-  );
-  const b = round(
-    interpolate(animationValue, {
-      inputRange,
-      outputRange: colors.map(blue),
-      extrapolate: Extrapolate.CLAMP,
-    })
-  );
-  const a = interpolate(animationValue, {
-    inputRange,
-    outputRange: colors.map(opacity),
-    extrapolate: Extrapolate.CLAMP,
-  });
-
-  return color(r, g, b, a);
-}

package/lib/reanimated1/derived/onChange.js

@@ -1,14 +0,0 @@
-import { block, cond, defined, neq, not, set, proc } from '../base';
-import AnimatedValue from '../core/InternalAnimatedValue';
-
-const procOnChange = proc(function (value, action, prevValue) {
-  return block([
-    cond(not(defined(prevValue)), set(prevValue, value)),
-    cond(neq(value, prevValue), [set(prevValue, value), action]),
-  ]);
-});
-
-export default function onChange(value, action) {
-  const prevValue = new AnimatedValue();
-  return procOnChange(value, action, prevValue);
-}

package/lib/reanimated1/derived/useCode.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import { always, block } from '../base';
-
-/**
- * @callback NodeFactory
- * Function to create a node or an array of nodes.
- * @returns {(Node[] | Node | null | undefined | Boolean)}
- */
-
-/**
- * React hook to run a node.
- * @param {NodeFactory} nodeFactory Function to build the node to run.
- * @param dependencies Array of dependencies. Refresh the node on changes.
- */
-export default function useCode(nodeFactory, dependencies) {
-  if (!(React.useEffect instanceof Function)) return;
-
-  React.useEffect(() => {
-    // check and correct 1st parameter
-    if (!(nodeFactory instanceof Function)) {
-      console.warn(
-        'useCode() first argument should be a function that returns an animation node.'
-      );
-
-      const node = nodeFactory;
-      nodeFactory = () => node;
-    }
-
-    let node = nodeFactory();
-    if (node) {
-      // allow factory to return array
-      if (node instanceof Array) node = block(node);
-
-      const animatedAlways = always(node);
-      animatedAlways.__attach();
-
-      // return undo function
-      return () => animatedAlways.__detach();
-    }
-  }, dependencies);
-}

package/lib/reanimated1/index.js

@@ -1,53 +0,0 @@
-import EasingNode from './Easing';
-import AnimatedClock from './core/AnimatedClock';
-import AnimatedValue from './core/AnimatedValue';
-import AnimatedNode from './core/AnimatedNode';
-import AnimatedCode from './core/AnimatedCode';
-import decay from './animations/decay';
-import timing from './animations/timing';
-import spring from './animations/spring';
-import Animation from './animations/Animation';
-import {
-  Transition,
-  Transitioning,
-  createTransitioningComponent,
-} from './Transitioning';
-import SpringUtils from './animations/SpringUtils';
-import useValue from './useValue';
-import backwardCompatibleAnimWrapper from './animations/backwardCompatibleAnimWrapper';
-
-const decayWrapper = backwardCompatibleAnimWrapper(
-  decay,
-  Animation.decayDefaultState
-);
-const timingWrapper = backwardCompatibleAnimWrapper(
-  timing,
-  Animation.timingDefaultState
-);
-const springWrapper = backwardCompatibleAnimWrapper(
-  spring,
-  Animation.springDefaultState
-);
-
-// operations
-export * from './base';
-export * from './derived';
-export {
-  AnimatedCode as Code,
-  // transitions
-  EasingNode,
-  Transitioning,
-  Transition,
-  createTransitioningComponent,
-  // nodes
-  AnimatedClock as Clock,
-  AnimatedValue as Value,
-  AnimatedNode as Node,
-  // animations
-  decayWrapper as decay,
-  timingWrapper as timing,
-  springWrapper as spring,
-  SpringUtils,
-  // hooks
-  useValue,
-};

package/lib/reanimated1/operators.js

@@ -1,35 +0,0 @@
-import { createAnimatedOperator } from './core/AnimatedOperator';
-
-const operator = createAnimatedOperator;
-
-export const add = operator('add');
-export const sub = operator('sub');
-export const multiply = operator('multiply');
-export const divide = operator('divide');
-export const pow = operator('pow');
-export const modulo = operator('modulo');
-export const sqrt = operator('sqrt');
-export const log = operator('log');
-export const sin = operator('sin');
-export const cos = operator('cos');
-export const exp = operator('exp');
-export const round = operator('round');
-export const lessThan = operator('lessThan');
-export const eq = operator('eq');
-export const greaterThan = operator('greaterThan');
-export const lessOrEq = operator('lessOrEq');
-export const greaterOrEq = operator('greaterOrEq');
-export const neq = operator('neq');
-export const and = operator('and');
-export const or = operator('or');
-export const defined = operator('defined');
-export const not = operator('not');
-export const tan = operator('tan');
-export const acos = operator('acos');
-export const asin = operator('asin');
-export const atan = operator('atan');
-export const abs = operator('abs');
-export const ceil = operator('ceil');
-export const floor = operator('floor');
-export const max = operator('max');
-export const min = operator('min');

package/lib/reanimated1/useValue.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import AnimatedValue from './core/AnimatedValue';
-
-export default function useValue(initialValue) {
-  const ref = React.useRef(null);
-  if (ref.current === null) {
-    ref.current = new AnimatedValue(initialValue);
-  }
-  return ref.current;
-}

package/lib/reanimated1/val.js

@@ -1,3 +0,0 @@
-export function val(v) {
-  return v && v.__getValue ? v.__getValue() : v || 0;
-}

package/lib/types/react-native-reanimated-tests.d.ts

@@ -1 +0,0 @@
-export {};

package/src/reanimated1/Easing.js

@@ -1,231 +0,0 @@
-import {
-  cond,
-  lessThan,
-  multiply,
-  pow,
-  cos,
-  sqrt,
-  sub,
-  add,
-  divide,
-} from './base';
-import AnimatedBezier from './core/AnimatedBezier';
-
-/**
- * The `Easing` module implements common easing functions. This module is used
- * by [Animate.timing()](docs/animate.html#timing) to convey physically
- * believable motion in animations.
- *
- * You can find a visualization of some common easing functions at
- * http://easings.net/
- *
- * ### Predefined animations
- *
- * The `Easing` module provides several predefined animations through the
- * following methods:
- *
- * - [`back`](docs/easing.html#back) provides a simple animation where the
- *   object goes slightly back before moving forward
- * - [`bounce`](docs/easing.html#bounce) provides a bouncing animation
- * - [`ease`](docs/easing.html#ease) provides a simple inertial animation
- * - [`elastic`](docs/easing.html#elastic) provides a simple spring interaction
- *
- * ### Standard functions
- *
- * Three standard easing functions are provided:
- *
- * - [`linear`](docs/easing.html#linear)
- * - [`quad`](docs/easing.html#quad)
- * - [`cubic`](docs/easing.html#cubic)
- *
- * The [`poly`](docs/easing.html#poly) function can be used to implement
- * quartic, quintic, and other higher power functions.
- *
- * ### Additional functions
- *
- * Additional mathematical functions are provided by the following methods:
- *
- * - [`bezier`](docs/easing.html#bezier) provides a cubic bezier curve
- * - [`circle`](docs/easing.html#circle) provides a circular function
- * - [`sin`](docs/easing.html#sin) provides a sinusoidal function
- * - [`exp`](docs/easing.html#exp) provides an exponential function
- *
- * The following helpers are used to modify other easing functions.
- *
- * - [`in`](docs/easing.html#in) runs an easing function forwards
- * - [`inOut`](docs/easing.html#inout) makes any easing function symmetrical
- * - [`out`](docs/easing.html#out) runs an easing function backwards
- */
-export default class Easing {
-  /**
-   * A linear function, `f(t) = t`. Position correlates to elapsed time one to
-   * one.
-   *
-   * http://cubic-bezier.com/#0,0,1,1
-   */
-  static linear(t) {
-    return t;
-  }
-
-  /**
-   * A simple inertial interaction, similar to an object slowly accelerating to
-   * speed.
-   *
-   * http://cubic-bezier.com/#.42,0,1,1
-   */
-  static ease(t) {
-    return new AnimatedBezier(t, 0.42, 0, 1, 1);
-  }
-
-  /**
-   * A quadratic function, `f(t) = t * t`. Position equals the square of elapsed
-   * time.
-   *
-   * http://easings.net/#easeInQuad
-   */
-  static quad(t) {
-    return multiply(t, t);
-  }
-
-  /**
-   * A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed
-   * time.
-   *
-   * http://easings.net/#easeInCubic
-   */
-  static cubic(t) {
-    return multiply(t, t, t);
-  }
-
-  /**
-   * A power function. Position is equal to the Nth power of elapsed time.
-   *
-   * n = 4: http://easings.net/#easeInQuart
-   * n = 5: http://easings.net/#easeInQuint
-   */
-  static poly(n) {
-    return (t) => pow(t, n);
-  }
-
-  /**
-   * A sinusoidal function.
-   *
-   * http://easings.net/#easeInSine
-   */
-  static sin(t) {
-    return sub(1, cos(multiply(t, Math.PI, 0.5)));
-  }
-
-  /**
-   * A circular function.
-   *
-   * http://easings.net/#easeInCirc
-   */
-  static circle(t) {
-    return sub(1, sqrt(sub(1, multiply(t, t))));
-  }
-
-  /**
-   * An exponential function.
-   *
-   * http://easings.net/#easeInExpo
-   */
-  static exp(t) {
-    return pow(2, multiply(10, sub(t, 1)));
-  }
-
-  /**
-   * A simple elastic interaction, similar to a spring oscillating back and
-   * forth.
-   *
-   * Default bounciness is 1, which overshoots a little bit once. 0 bounciness
-   * doesn't overshoot at all, and bounciness of N > 1 will overshoot about N
-   * times.
-   *
-   * http://easings.net/#easeInElastic
-   */
-  static elastic(bounciness = 1) {
-    const p = bounciness * Math.PI;
-    return (t) =>
-      sub(
-        1,
-        multiply(pow(cos(multiply(t, Math.PI, 0.5)), 3), cos(multiply(t, p)))
-      );
-  }
-
-  /**
-   * Use with `Animated.parallel()` to create a simple effect where the object
-   * animates back slightly as the animation starts.
-   *
-   * Wolfram Plot:
-   *
-   * - http://tiny.cc/back_default (s = 1.70158, default)
-   */
-  static back(s) {
-    if (s === undefined) {
-      s = 1.70158;
-    }
-    return (t) => multiply(t, t, sub(multiply(add(s, 1), t), s));
-  }
-
-  /**
-   * Provides a simple bouncing effect.
-   *
-   * http://easings.net/#easeInBounce
-   */
-  static bounce(t) {
-    const sq = (v) => multiply(7.5625, v, v);
-    return cond(
-      lessThan(t, 1 / 2.75),
-      sq(t),
-      cond(
-        lessThan(t, 2 / 2.75),
-        add(0.75, sq(sub(t, 1.5 / 2.75))),
-        cond(
-          lessThan(t, 2.5 / 2.76),
-          add(0.9375, sq(sub(t, 2.25 / 2.75))),
-          add(0.984375, sq(sub(t, 2.625 / 2.75)))
-        )
-      )
-    );
-  }
-
-  /**
-   * Provides a cubic bezier curve, equivalent to CSS Transitions'
-   * `transition-timing-function`.
-   *
-   * A useful tool to visualize cubic bezier curves can be found at
-   * http://cubic-bezier.com/
-   */
-  static bezier(x1, y1, x2, y2) {
-    return (t) => new AnimatedBezier(t, x1, y1, x2, y2);
-  }
-
-  /**
-   * Runs an easing function forwards.
-   */
-  static in(easing) {
-    return easing;
-  }
-
-  /**
-   * Runs an easing function backwards.
-   */
-  static out(easing) {
-    return (t) => sub(1, easing(sub(1, t)));
-  }
-
-  /**
-   * Makes any easing function symmetrical. The easing function will run
-   * forwards for half of the duration, then backwards for the rest of the
-   * duration.
-   */
-  static inOut(easing) {
-    return (t) =>
-      cond(
-        lessThan(t, 0.5),
-        divide(easing(multiply(t, 2)), 2),
-        sub(1, divide(easing(multiply(sub(1, t), 2)), 2))
-      );
-  }
-}

package/src/reanimated1/SpringConfig.js

@@ -1,79 +0,0 @@
-function stiffnessFromOrigamiValue(oValue) {
-  return (oValue - 30) * 3.62 + 194;
-}
-
-function dampingFromOrigamiValue(oValue) {
-  return (oValue - 8) * 3 + 25;
-}
-
-function fromOrigamiTensionAndFriction(tension, friction) {
-  return {
-    stiffness: stiffnessFromOrigamiValue(tension),
-    damping: dampingFromOrigamiValue(friction),
-  };
-}
-
-function fromBouncinessAndSpeed(bounciness, speed) {
-  function normalize(value, startValue, endValue) {
-    return (value - startValue) / (endValue - startValue);
-  }
-
-  function projectNormal(n, start, end) {
-    return start + n * (end - start);
-  }
-
-  function linearInterpolation(t, start, end) {
-    return t * end + (1 - t) * start;
-  }
-
-  function quadraticOutInterpolation(t, start, end) {
-    return linearInterpolation(2 * t - t * t, start, end);
-  }
-
-  function b3Friction1(x) {
-    return 0.0007 * Math.pow(x, 3) - 0.031 * Math.pow(x, 2) + 0.64 * x + 1.28;
-  }
-
-  function b3Friction2(x) {
-    return 0.000044 * Math.pow(x, 3) - 0.006 * Math.pow(x, 2) + 0.36 * x + 2;
-  }
-
-  function b3Friction3(x) {
-    return (
-      0.00000045 * Math.pow(x, 3) -
-      0.000332 * Math.pow(x, 2) +
-      0.1078 * x +
-      5.84
-    );
-  }
-
-  function b3Nobounce(tension) {
-    if (tension <= 18) {
-      return b3Friction1(tension);
-    } else if (tension > 18 && tension <= 44) {
-      return b3Friction2(tension);
-    } else {
-      return b3Friction3(tension);
-    }
-  }
-
-  var b = normalize(bounciness / 1.7, 0, 20);
-  b = projectNormal(b, 0, 0.8);
-  var s = normalize(speed / 1.7, 0, 20);
-  var bouncyTension = projectNormal(s, 0.5, 200);
-  var bouncyFriction = quadraticOutInterpolation(
-    b,
-    b3Nobounce(bouncyTension),
-    0.01
-  );
-
-  return {
-    stiffness: stiffnessFromOrigamiValue(bouncyTension),
-    damping: dampingFromOrigamiValue(bouncyFriction),
-  };
-}
-
-module.exports = {
-  fromOrigamiTensionAndFriction,
-  fromBouncinessAndSpeed,
-};