react-native-reanimated 2.16.0 → 2.17.0

package/lib/reanimated1/core/AnimatedTransform.js

@@ -0,0 +1,78 @@
+import AnimatedNode from './AnimatedNode';
+
+import deepEqual from 'lodash.isequal';
+
+function sanitizeTransform(inputTransform) {
+  const outputTransform = [];
+  let hasAnimatedTransform = false;
+  inputTransform.forEach((transform) => {
+    for (const key in transform) {
+      const value = transform[key];
+      if (value instanceof AnimatedNode) {
+        hasAnimatedTransform = true;
+        outputTransform.push({
+          property: key,
+          nodeID: value.__nodeID,
+        });
+      } else {
+        outputTransform.push({
+          property: key,
+          value,
+        });
+      }
+    }
+  });
+  return hasAnimatedTransform ? outputTransform : undefined;
+}
+
+function extractAnimatedParentNodes(transform) {
+  const parents = [];
+  transform.forEach((transform) => {
+    for (const key in transform) {
+      const value = transform[key];
+      if (value instanceof AnimatedNode) {
+        parents.push(value);
+      }
+    }
+  });
+  return parents;
+}
+
+export function createOrReuseTransformNode(transform, oldNode) {
+  const config = sanitizeTransform(transform);
+  if (config === undefined) {
+    return undefined;
+  }
+  if (oldNode && deepEqual(config, oldNode._config)) {
+    return oldNode;
+  }
+  return new AnimatedTransform(transform, config);
+}
+
+class AnimatedTransform extends AnimatedNode {
+  constructor(transform, config) {
+    super(
+      { type: 'transform', transform: config },
+      extractAnimatedParentNodes(transform)
+    );
+    this._config = config;
+    this._transform = transform;
+  }
+
+  toString() {
+    return `AnimatedTransform, id: ${this.__nodeID}`;
+  }
+
+  __onEvaluate() {
+    return this._transform.map((transform) => {
+      const result = {};
+      for (const key in transform) {
+        const value = transform[key];
+        if (value instanceof AnimatedNode) {
+          result[key] = value.__getValue();
+        }
+      }
+      return result;
+    });
+  }
+}

package/lib/reanimated1/core/AnimatedValue.js

@@ -0,0 +1,38 @@
+import { createAnimatedSet as set } from '../core/AnimatedSet';
+import interpolate from '../derived/interpolate';
+import InternalAnimatedValue from './InternalAnimatedValue';
+import { Platform } from 'react-native';
+import { evaluateOnce } from '../derived/evaluateOnce';
+import ReanimatedModule from '../../ReanimatedModule';
+import { val } from '../val';
+
+// Animated value wrapped with extra methods for omit cycle of dependencies
+export default class AnimatedValue extends InternalAnimatedValue {
+  setValue(value) {
+    this.__detachAnimation(this._animation);
+    if (
+      Platform.OS === 'web' ||
+      Platform.OS === 'windows' ||
+      Platform.OS === 'macos'
+    ) {
+      this._updateValue(val(value));
+    } else {
+      if (ReanimatedModule.setValue && typeof value === 'number') {
+        // FIXME Remove it after some time
+        // For OTA-safety
+        // FIXME handle setting value with a node
+        ReanimatedModule.setValue(this.__nodeID, value);
+      } else {
+        evaluateOnce(set(this, value), this);
+      }
+    }
+  }
+
+  toString() {
+    return `AnimatedValue, id: ${this.__nodeID}`;
+  }
+
+  interpolate(config) {
+    return interpolate(this, config);
+  }
+}

package/lib/reanimated1/core/InternalAnimatedValue.js

@@ -0,0 +1,87 @@
+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/lib/reanimated1/core/__mocks__/AnimatedProps.js

@@ -0,0 +1,86 @@
+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/lib/reanimated1/core/createEventObjectProxyPolyfill.js

@@ -0,0 +1,44 @@
+// 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/lib/reanimated1/derived/__mocks__/evaluateOnce.js

@@ -0,0 +1,14 @@
+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/lib/reanimated1/derived/acc.js

@@ -0,0 +1,11 @@
+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/lib/reanimated1/derived/color.js

@@ -0,0 +1,47 @@
+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/lib/reanimated1/derived/diff.js

@@ -0,0 +1,16 @@
+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/lib/reanimated1/derived/diffClamp.js

@@ -0,0 +1,11 @@
+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/lib/reanimated1/derived/evaluateOnce.js

@@ -0,0 +1,35 @@
+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/lib/reanimated1/derived/index.js

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,152 @@
+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

@@ -0,0 +1,62 @@
+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);
+}