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

package/src/reanimated1/core/InternalAnimatedValue.js

@@ -1,87 +0,0 @@
-import AnimatedNode from './AnimatedNode';
-import { val } from '../val';
-import ReanimatedModule from '../../ReanimatedModule';
-import invariant from 'invariant';
-
-function sanitizeValue(value) {
-  return value === null || value === undefined || typeof value === 'string'
-    ? value
-    : Number(value);
-}
-
-const CONSTANT_VALUES = new Map();
-
-function initializeConstantValues() {
-  if (CONSTANT_VALUES.size !== 0) {
-    return;
-  }
-  [0, -1, 1, -2, 2].forEach((v) =>
-    CONSTANT_VALUES.set(v, new InternalAnimatedValue(v, true))
-  );
-}
-
-/**
- * This class has been made internal in order to omit dependencies' cycles which
- * were caused by imperative setValue and interpolate – they are currently exposed with AnimatedValue.js
- */
-export default class InternalAnimatedValue extends AnimatedNode {
-  static valueForConstant(number) {
-    initializeConstantValues();
-    return (
-      CONSTANT_VALUES.get(number) || new InternalAnimatedValue(number, true)
-    );
-  }
-
-  constructor(value, constant = false) {
-    invariant(value !== null, 'Animated.Value cannot be set to the null');
-    super({ type: 'value', value: sanitizeValue(value) });
-    this._startingValue = this._value = value;
-    this._animation = null;
-    this._constant = constant;
-  }
-
-  __detach() {
-    if (!this._constant) {
-      if (ReanimatedModule.getValue) {
-        ReanimatedModule.getValue(
-          this.__nodeID,
-          (val) => (this.__nodeConfig.value = val)
-        );
-      } else {
-        this.__nodeConfig.value = this.__getValue();
-      }
-    }
-    this.__detachAnimation(this._animation);
-    super.__detach();
-  }
-
-  __detachAnimation(animation) {
-    animation && animation.__detach();
-    if (this._animation === animation) {
-      this._animation = null;
-    }
-  }
-
-  __attachAnimation(animation) {
-    this.__detachAnimation(this._animation);
-    this._animation = animation;
-  }
-
-  __onEvaluate() {
-    if (this.__inputNodes && this.__inputNodes.length) {
-      this.__inputNodes.forEach(val);
-    }
-    return this._value;
-  }
-
-  // AnimatedValue will override this method to modify the value of a native node.
-  setValue(value) {
-    this.__detachAnimation(this._animation);
-    this._updateValue(value);
-  }
-
-  _updateValue(value) {
-    this._value = value;
-    this.__forceUpdateCache(value);
-  }
-}

package/src/reanimated1/core/__mocks__/AnimatedProps.js

@@ -1,86 +0,0 @@
-import AnimatedNode from '../AnimatedNode';
-import AnimatedEvent from '../AnimatedEvent';
-import AnimatedStyle, { createOrReuseStyleNode } from '../AnimatedStyle';
-
-import deepEqual from 'lodash.isequal';
-
-// This file has been mocked as react-native's `findNodeHandle` is returning undefined value;
-// and I became easier to mock whole this file instead of mocking RN
-
-function sanitizeProps(inputProps) {
-  const props = {};
-  for (const key in inputProps) {
-    const value = inputProps[key];
-    if (value instanceof AnimatedNode && !(value instanceof AnimatedEvent)) {
-      props[key] = value.__nodeID;
-    }
-  }
-  return props;
-}
-
-export function createOrReusePropsNode(props, callback, oldNode) {
-  if (props.style) {
-    props = {
-      ...props,
-      style: createOrReuseStyleNode(
-        props.style,
-        oldNode && oldNode._props.style
-      ),
-    };
-  }
-  const config = sanitizeProps(props);
-  if (oldNode && deepEqual(config, oldNode._config)) {
-    return oldNode;
-  }
-  return new AnimatedProps(props, config, callback);
-}
-
-class AnimatedProps extends AnimatedNode {
-  constructor(props, config, callback) {
-    super(
-      { type: 'props', props: config },
-      Object.values(props).filter((n) => !(n instanceof AnimatedEvent))
-    );
-    this._config = config;
-    this._props = props;
-    this._callback = callback;
-    this.__attach();
-  }
-
-  __getProps() {
-    const props = {};
-    for (const key in this._props) {
-      const value = this._props[key];
-      if (value instanceof AnimatedNode) {
-        if (value instanceof AnimatedStyle) {
-          props[key] = value.__getProps();
-        }
-      } else {
-        props[key] = value;
-      }
-    }
-    return props;
-  }
-
-  __onEvaluate() {
-    const props = {};
-    for (const key in this._props) {
-      const value = this._props[key];
-      if (value instanceof AnimatedNode) {
-        props[key] = value.__getValue();
-      }
-    }
-    return props;
-  }
-
-  update() {
-    this._callback();
-  }
-
-  setNativeView(animatedView) {
-    if (this._animatedView === animatedView) {
-      return;
-    }
-    this._animatedView = animatedView;
-  }
-}

package/src/reanimated1/core/createEventObjectProxyPolyfill.js

@@ -1,44 +0,0 @@
-// JSC on Android and iOS 8 & 9 does not support proxies.
-// The below workaround provides a proxy-like functionality for event data by
-// creating an object which contains predefined fields for the most commonly
-// used event attributes. If your app uses even attribute which is not listed
-// here please submit a PR to add that and we will merge it right away
-export default function createEventObjectProxyPolyfill() {
-  const nodesMap = {
-    // Gesture handlers-related event
-    translationX: {},
-    translationY: {},
-    state: {},
-    oldState: {},
-    absoluteX: {},
-    absoluteY: {},
-    x: {},
-    y: {},
-    velocityX: {},
-    velocityY: {},
-    scale: {},
-    focalX: {},
-    focalY: {},
-    rotation: {},
-    anchorX: {},
-    anchorY: {},
-    velocity: {},
-    numberOfPointers: {},
-    // onLayour-related event
-    layout: { x: {}, y: {}, width: {}, height: {} },
-    // ScrollView event
-    contentOffset: { y: {}, x: {} },
-    layoutMeasurement: { width: {}, height: {} },
-    contentSize: { width: {}, height: {} },
-    zoomScale: {},
-    contentInset: { right: {}, top: {}, left: {}, bottom: {} },
-  };
-  const traverse = (obj) => {
-    for (const key in obj) {
-      traverse(obj[key]);
-      Object.assign(obj[key], { __isProxy: true });
-    }
-  };
-  traverse(nodesMap);
-  return nodesMap;
-}

package/src/reanimated1/derived/__mocks__/evaluateOnce.js

@@ -1,14 +0,0 @@
-import { always } from '../../base';
-export function evaluateOnce(node, children = [], callback) {
-  if (!Array.isArray(children)) {
-    children = [children];
-  }
-  const alwaysNode = always(node);
-  for (let i = 0; i < children.length; i++) {
-    alwaysNode.__addChild(children[i]);
-  }
-  for (let i = 0; i < children.length; i++) {
-    alwaysNode.__removeChild(children[i]);
-  }
-  callback && callback();
-}

package/src/reanimated1/derived/acc.js

@@ -1,11 +0,0 @@
-import { set, add, proc } from '../base';
-import AnimatedValue from '../core/InternalAnimatedValue';
-
-const procAcc = proc(function (v, acc) {
-  return set(acc, add(acc, v));
-});
-
-export default function acc(v) {
-  const acc = new AnimatedValue(0);
-  return procAcc(v, acc);
-}

package/src/reanimated1/derived/color.js

@@ -1,47 +0,0 @@
-import { Platform } from 'react-native';
-
-import {
-  add,
-  cond,
-  concat,
-  lessThan,
-  multiply,
-  round,
-  sub,
-  proc,
-} from '../base';
-import AnimatedNode from '../core/AnimatedNode';
-
-const procColor = proc(function (r, g, b, a) {
-  const color = add(
-    multiply(a, 1 << 24),
-    multiply(round(r), 1 << 16),
-    multiply(round(g), 1 << 8),
-    round(b)
-  );
-
-  if (Platform.OS === 'android') {
-    // on Android color is represented as signed 32 bit int
-    return cond(
-      lessThan(color, (1 << 31) >>> 0),
-      color,
-      sub(color, Math.pow(2, 32))
-    );
-  }
-  return color;
-});
-
-export default function color(r, g, b, a = 1) {
-  if (Platform.OS === 'web') {
-    // doesn't support bit shifting
-    return concat('rgba(', r, ',', g, ',', b, ',', a, ')');
-  }
-
-  if (a instanceof AnimatedNode) {
-    a = round(multiply(a, 255));
-  } else {
-    a = Math.round(a * 255);
-  }
-
-  return procColor(r, g, b, a);
-}

package/src/reanimated1/derived/diff.js

@@ -1,16 +0,0 @@
-import { cond, block, defined, sub, set, proc } from '../base';
-import AnimatedValue from '../core/InternalAnimatedValue';
-
-const procDiff = proc(function (v, stash, prev) {
-  return block([
-    set(stash, cond(defined(prev), sub(v, prev), 0)),
-    set(prev, v),
-    stash,
-  ]);
-});
-
-export default function diff(v) {
-  const stash = new AnimatedValue(0);
-  const prev = new AnimatedValue();
-  return procDiff(v, stash, prev);
-}

package/src/reanimated1/derived/diffClamp.js

@@ -1,11 +0,0 @@
-import { cond, defined, set, add, min, max } from '../base';
-import AnimatedValue from '../core/InternalAnimatedValue';
-import diff from './diff';
-
-export default function diffClamp(a, minVal, maxVal) {
-  const value = new AnimatedValue();
-  return set(
-    value,
-    min(max(add(cond(defined(value), value, a), diff(a)), minVal), maxVal)
-  );
-}

package/src/reanimated1/derived/evaluateOnce.js

@@ -1,35 +0,0 @@
-import AnimatedValue from '../core/InternalAnimatedValue';
-import { createAnimatedSet as set } from '../core/AnimatedSet';
-import { createAnimatedCall as call } from '../core/AnimatedCall';
-import { createAnimatedAlways as always } from '../core/AnimatedAlways';
-import { createAnimatedCond as cond } from '../core/AnimatedCond';
-
-/**
- * evaluate given node and notify children
- * @param node - node to be evaluated
- * @param input - nodes (or one node) representing values which states input for node.
- * @param callback - after callback
- */
-
-export function evaluateOnce(node, input = [], callback) {
-  if (!Array.isArray(input)) {
-    input = [input];
-  }
-  const done = new AnimatedValue(0);
-  const evalNode = cond(
-    done,
-    0,
-    call([node, set(done, 1)], () => {
-      callback && callback();
-      for (let i = 0; i < input.length; i++) {
-        input[i].__removeChild(alwaysNode);
-        alwaysNode.__detach();
-      }
-    })
-  );
-  const alwaysNode = always(evalNode);
-  for (let i = 0; i < input.length; i++) {
-    input[i].__addChild(alwaysNode);
-    alwaysNode.__attach();
-  }
-}

package/src/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/src/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/src/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/src/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/src/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/src/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,
-};