react-native-reanimated 2.16.0 → 2.17.0

package/lib/reanimated1/core/AnimatedNode.js

@@ -0,0 +1,223 @@
+import ReanimatedModule from '../../ReanimatedModule';
+import { Platform } from 'react-native';
+
+const UPDATED_NODES = [];
+
+let loopID = 1;
+let propUpdatesEnqueued = null;
+let nodeCount = 0;
+let callID = '';
+
+export function getCallID() {
+  return callID;
+}
+
+export function setCallID(nextCallID) {
+  callID = nextCallID;
+}
+
+function sanitizeConfig(config) {
+  if (
+    Platform.OS === 'web' ||
+    Platform.OS === 'windows' ||
+    Platform.OS === 'macos' ||
+    ['undefined', 'string', 'function', 'boolean', 'number'].includes(
+      typeof config
+    )
+  ) {
+    return config;
+  } else if (Array.isArray(config)) {
+    return config.map(sanitizeConfig);
+  } else if (config instanceof AnimatedNode) {
+    return config.__nodeID;
+  } else if (typeof config === 'object') {
+    const output = {};
+    for (const property in config) {
+      if (property in config) {
+        output[property] = sanitizeConfig(config[property]);
+      }
+    }
+    return output;
+  }
+  // unhandled
+  return config;
+}
+
+function runPropUpdates() {
+  const visitedNodes = new Set();
+  const findAndUpdateNodes = (node) => {
+    if (!node) {
+      console.warn('findAndUpdateNodes was passed a nullish node');
+      return;
+    }
+
+    if (visitedNodes.has(node)) {
+      return;
+    } else {
+      visitedNodes.add(node);
+    }
+    if (typeof node.update === 'function') {
+      node.update();
+    } else {
+      const nodes = node.__getChildren();
+      if (nodes) {
+        for (let i = 0, l = nodes.length; i < l; i++) {
+          findAndUpdateNodes(nodes[i]);
+        }
+      }
+    }
+  };
+  for (let i = 0; i < UPDATED_NODES.length; i++) {
+    const node = UPDATED_NODES[i];
+    findAndUpdateNodes(node);
+  }
+  UPDATED_NODES.length = 0; // clear array
+  propUpdatesEnqueued = null;
+  loopID += 1;
+}
+
+const scheduleUpdates =
+  Platform.OS === 'web' ? requestAnimationFrame : setImmediate;
+
+export default class AnimatedNode {
+  __nodeID;
+  __lastLoopID = { '': -1 };
+  __memoizedValue = { '': null };
+  __children = [];
+
+  constructor(nodeConfig, inputNodes) {
+    this.__nodeID = ++nodeCount;
+    this.__nodeConfig = sanitizeConfig(nodeConfig);
+    this.__initialized = false;
+    this.__inputNodes =
+      inputNodes && inputNodes.filter((node) => node instanceof AnimatedNode);
+  }
+
+  toString() {
+    return `AnimatedNode, id: ${this.__nodeID}`;
+  }
+
+  __attach() {
+    this.__nativeInitialize();
+
+    const nodes = this.__inputNodes;
+
+    if (nodes) {
+      for (let i = 0, l = nodes.length; i < l; i++) {
+        nodes[i].__addChild(this);
+      }
+    }
+  }
+
+  __detach() {
+    const nodes = this.__inputNodes;
+
+    if (nodes) {
+      for (let i = 0, l = nodes.length; i < l; i++) {
+        nodes[i].__removeChild(this);
+      }
+    }
+
+    this.__nativeTearDown();
+  }
+
+  __getValue() {
+    if (!(callID in this.__lastLoopID) || this.__lastLoopID[callID] < loopID) {
+      this.__lastLoopID[callID] = loopID;
+      const result = this.__onEvaluate();
+      this.__memoizedValue[callID] = result;
+      return result;
+    }
+    return this.__memoizedValue[callID];
+  }
+
+  __forceUpdateCache(newValue) {
+    this.__memoizedValue[callID] = newValue;
+    this.__markUpdated();
+  }
+
+  __dangerouslyRescheduleEvaluate() {
+    this.__lastLoopID[callID] = -1;
+    this.__markUpdated();
+  }
+
+  __markUpdated() {
+    UPDATED_NODES.push(this);
+    if (!propUpdatesEnqueued) {
+      propUpdatesEnqueued = scheduleUpdates(runPropUpdates);
+    }
+  }
+
+  __nativeInitialize() {
+    if (!this.__initialized) {
+      ReanimatedModule.createNode(this.__nodeID, { ...this.__nodeConfig });
+      this.__initialized = true;
+    }
+  }
+
+  __nativeTearDown() {
+    if (this.__initialized) {
+      ReanimatedModule.dropNode(this.__nodeID);
+      this.__initialized = false;
+    }
+  }
+
+  isNativelyInitialized() {
+    return this.__initialized;
+  }
+
+  __onEvaluate() {
+    throw new Error('Missing implementation of onEvaluate');
+  }
+
+  __getProps() {
+    return this.__getValue();
+  }
+
+  __getChildren() {
+    return this.__children;
+  }
+
+  __addChild(child) {
+    if (this.__children.length === 0) {
+      this.__attach();
+    }
+    this.__children.push(child);
+    child.__nativeInitialize();
+
+    if (ReanimatedModule.connectNodes) {
+      ReanimatedModule.connectNodes(this.__nodeID, child.__nodeID);
+    } else {
+      child.__dangerouslyRescheduleEvaluate();
+    }
+  }
+
+  __removeChild(child) {
+    const index = this.__children.indexOf(child);
+    if (index === -1) {
+      console.warn("Trying to remove a child that doesn't exist");
+      return;
+    }
+
+    if (ReanimatedModule.disconnectNodes) {
+      ReanimatedModule.disconnectNodes(this.__nodeID, child.__nodeID);
+    }
+
+    this.__children.splice(index, 1);
+    if (this.__children.length === 0) {
+      this.__detach();
+    }
+  }
+
+  _connectAnimatedView(nativeViewTag) {
+    if (ReanimatedModule.connectNodeToView) {
+      ReanimatedModule.connectNodeToView(this.__nodeID, nativeViewTag);
+    } else {
+      this.__dangerouslyRescheduleEvaluate();
+    }
+  }
+
+  _disconnectAnimatedView(nativeViewTag) {
+    ReanimatedModule.disconnectNodeFromView(this.__nodeID, nativeViewTag);
+  }
+}

package/lib/reanimated1/core/AnimatedOperator.js

@@ -0,0 +1,103 @@
+import AnimatedNode from './AnimatedNode';
+import { val } from '../val';
+
+import invariant from 'invariant';
+import { adapt } from '../core/AnimatedBlock';
+
+function reduce(fn) {
+  return (input) => input.reduce((a, b) => fn(val(a), val(b)));
+}
+
+function reduceFrom(fn, initialValue) {
+  return (input) => input.reduce((a, b) => fn(val(a), val(b)), initialValue);
+}
+
+function infix(fn) {
+  return (input) => fn(val(input[0]), val(input[1]));
+}
+
+function single(fn) {
+  return (input) => fn(val(input[0]));
+}
+
+const OPERATIONS = {
+  // arithmetic
+  add: reduce((a, b) => a + b),
+  sub: reduce((a, b) => a - b),
+  multiply: reduce((a, b) => a * b),
+  divide: reduce((a, b) => a / b),
+  pow: reduce((a, b) => Math.pow(a, b)),
+  modulo: reduce((a, b) => ((a % b) + b) % b),
+  sqrt: single((a) => Math.sqrt(a)),
+  log: single((a) => Math.log(a)),
+  sin: single((a) => Math.sin(a)),
+  cos: single((a) => Math.cos(a)),
+  tan: single((a) => Math.tan(a)),
+  acos: single((a) => Math.acos(a)),
+  asin: single((a) => Math.asin(a)),
+  atan: single((a) => Math.atan(a)),
+  exp: single((a) => Math.exp(a)),
+  round: single((a) => Math.round(a)),
+  abs: single((a) => Math.abs(a)),
+  ceil: single((a) => Math.ceil(a)),
+  floor: single((a) => Math.floor(a)),
+  max: reduce((a, b) => Math.max(a, b)),
+  min: reduce((a, b) => Math.min(a, b)),
+
+  // logical
+  and: reduceFrom((a, b) => a && b, true),
+  or: reduceFrom((a, b) => a || b, false),
+  not: single((a) => !a),
+  defined: single((a) => a !== null && a !== undefined && !isNaN(a)),
+
+  // comparing
+  lessThan: infix((a, b) => a < b),
+  /* eslint-disable-next-line eqeqeq */
+  eq: infix((a, b) => a == b),
+  greaterThan: infix((a, b) => a > b),
+  lessOrEq: infix((a, b) => a <= b),
+  greaterOrEq: infix((a, b) => a >= b),
+  /* eslint-disable-next-line eqeqeq */
+  neq: infix((a, b) => a != b),
+};
+
+class AnimatedOperator extends AnimatedNode {
+  _input;
+  _op;
+  _operation;
+
+  constructor(operator, input) {
+    invariant(
+      typeof operator === 'string',
+      `Reanimated: Animated.operator node first argument should be of type String, but got: ${operator}`
+    );
+    invariant(
+      input.every(
+        (el) =>
+          el instanceof AnimatedNode ||
+          typeof el === 'string' ||
+          typeof el === 'number'
+      ),
+      `Reanimated: Animated.operator node second argument should be one or more of type AnimatedNode, String or Number but got ${input}`
+    );
+    super({ type: 'op', op: operator, input }, input);
+    this._op = operator;
+    this._input = input;
+  }
+
+  toString() {
+    return `AnimatedOperator, id: ${this.__nodeID}`;
+  }
+
+  __onEvaluate() {
+    if (!this._operation) {
+      this._operation = OPERATIONS[this._op];
+      invariant(this._operation, `Illegal operator '%s'`, this._op);
+    }
+    return this._operation(this._input);
+  }
+}
+
+export function createAnimatedOperator(name) {
+  return (...args) => new AnimatedOperator(name, args.map(adapt));
+}

package/lib/reanimated1/core/AnimatedParam.js

@@ -0,0 +1,88 @@
+import invariant from 'invariant';
+import AnimatedNode, { getCallID, setCallID } from './AnimatedNode';
+import AnimatedClock from './AnimatedClock';
+import { val } from '../val';
+
+export class AnimatedParam extends AnimatedNode {
+  argsStack = [];
+  _prevCallID;
+
+  constructor() {
+    super({ type: 'param' }, []);
+    this.__attach();
+  }
+
+  beginContext(ref, prevCallID) {
+    this._prevCallID = prevCallID;
+    this.argsStack.push(ref);
+  }
+
+  endContext() {
+    this.argsStack.pop();
+  }
+
+  _getTopNode() {
+    if (this.argsStack.length === 0)
+      throw new Error(`param: Invocation failed because argsStack is empty`);
+    const top = this.argsStack[this.argsStack.length - 1];
+    return top;
+  }
+
+  setValue(value) {
+    const top = this._getTopNode();
+    if (top.setValue) {
+      const callID = getCallID();
+      setCallID(this._prevCallID);
+      top.setValue(value);
+      setCallID(callID);
+    } else {
+      throw new Error(
+        `param: setValue(${value}) failed because the top element has no known method for updating it's current value.`
+      );
+    }
+  }
+
+  __onEvaluate() {
+    const callID = getCallID();
+    setCallID(this._prevCallID);
+    const top = this._getTopNode();
+    const value = val(top);
+    setCallID(callID);
+    return value;
+  }
+
+  start() {
+    const node = this._getTopNode();
+    invariant(
+      node instanceof AnimatedClock || node instanceof AnimatedParam,
+      `param: top node should be of type AnimatedClock but got ${node}`
+    );
+    node.start();
+  }
+
+  stop() {
+    const node = this._getTopNode();
+    invariant(
+      node instanceof AnimatedClock || node instanceof AnimatedParam,
+      `param: top node should be of type AnimatedClock but got ${node}`
+    );
+    node.stop();
+  }
+
+  isRunning() {
+    const node = this._getTopNode();
+
+    if (node instanceof AnimatedParam) {
+      return node.isRunning();
+    }
+    invariant(
+      node instanceof AnimatedClock,
+      `param: top node should be of type AnimatedClock but got ${node}`
+    );
+    return node.isStarted();
+  }
+}
+
+export function createAnimatedParam() {
+  return new AnimatedParam();
+}

package/lib/reanimated1/core/AnimatedProps.js

@@ -0,0 +1,108 @@
+import { findNodeHandle } from 'react-native';
+
+import AnimatedNode from './AnimatedNode';
+import AnimatedEvent from './AnimatedEvent';
+import { createOrReuseStyleNode } from './AnimatedStyle';
+
+import invariant from 'invariant';
+import deepEqual from 'lodash.isequal';
+import { val } from '../val';
+
+function sanitizeProps(inputProps) {
+  let props;
+  for (const key in inputProps) {
+    const value = inputProps[key];
+    if (value instanceof AnimatedNode && !(value instanceof AnimatedEvent)) {
+      if (props === undefined) {
+        props = {};
+      }
+      props[key] = value.__nodeID;
+    }
+  }
+  return props;
+}
+
+export function createOrReusePropsNode(props, callback, oldNode) {
+  if (props.style) {
+    const style = createOrReuseStyleNode(
+      props.style,
+      oldNode && oldNode._props.style
+    );
+    if (style) {
+      props = {
+        ...props,
+        style,
+      };
+    }
+  }
+  const config = sanitizeProps(props);
+  if (config === undefined) {
+    return undefined;
+  }
+  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();
+  }
+
+  toString() {
+    return `AnimatedProps, id: ${this.__nodeID}`;
+  }
+
+  __onEvaluate() {
+    const props = {};
+    for (const key in this._props) {
+      const value = this._props[key];
+      if (value instanceof AnimatedNode) {
+        props[key] = value.__getValue();
+      }
+    }
+    return props;
+  }
+
+  __detach() {
+    const nativeViewTag = findNodeHandle(this._animatedView);
+    invariant(
+      nativeViewTag != null,
+      'Unable to locate attached view in the native tree'
+    );
+    this._disconnectAnimatedView(nativeViewTag);
+    super.__detach();
+  }
+
+  update() {
+    this._callback();
+
+    if (!this._animatedView) {
+      return;
+    }
+
+    val(this);
+  }
+
+  setNativeView(animatedView) {
+    if (this._animatedView === animatedView) {
+      return;
+    }
+    this._animatedView = animatedView;
+
+    const nativeViewTag = findNodeHandle(this._animatedView);
+    invariant(
+      nativeViewTag != null,
+      'Unable to locate attached view in the native tree'
+    );
+    this._connectAnimatedView(nativeViewTag);
+  }
+}

package/lib/reanimated1/core/AnimatedSet.js

@@ -0,0 +1,38 @@
+import AnimatedNode from './AnimatedNode';
+import invariant from 'invariant';
+import { val } from '../val';
+import { adapt } from '../core/AnimatedBlock';
+
+class AnimatedSet extends AnimatedNode {
+  _what;
+  _value;
+
+  constructor(what, value) {
+    invariant(
+      what instanceof AnimatedNode,
+      `Reanimated: Animated.set first argument should be of type AnimatedNode but got ${what}`
+    );
+    invariant(
+      value instanceof AnimatedNode,
+      `Reanimated: Animated.set second argument should be of type AnimatedNode, String or Number but got ${value}`
+    );
+    super({ type: 'set', what, value }, [value]);
+    invariant(!what._constant, 'Value to be set cannot be constant');
+    this._what = what;
+    this._value = value;
+  }
+
+  toString() {
+    return `AnimatedSet, id: ${this.__nodeID}`;
+  }
+
+  __onEvaluate() {
+    const newValue = val(this._value);
+    this._what.setValue(newValue);
+    return newValue;
+  }
+}
+
+export function createAnimatedSet(what, value) {
+  return new AnimatedSet(what, adapt(value));
+}

package/lib/reanimated1/core/AnimatedStartClock.js

@@ -0,0 +1,30 @@
+import AnimatedNode from './AnimatedNode';
+import AnimatedClock from './AnimatedClock';
+import { AnimatedParam } from './AnimatedParam';
+import invariant from 'invariant';
+
+class AnimatedStartClock extends AnimatedNode {
+  _clockNode;
+
+  constructor(clockNode) {
+    invariant(
+      clockNode instanceof AnimatedClock || clockNode instanceof AnimatedParam,
+      `Reanimated: Animated.startClock argument should be of type AnimatedClock but got ${clockNode}`
+    );
+    super({ type: 'clockStart', clock: clockNode });
+    this._clockNode = clockNode;
+  }
+
+  toString() {
+    return `AnimatedStartClock, id: ${this.__nodeID}`;
+  }
+
+  __onEvaluate() {
+    this._clockNode.start();
+    return 0;
+  }
+}
+
+export function createAnimatedStartClock(clock) {
+  return new AnimatedStartClock(clock);
+}

package/lib/reanimated1/core/AnimatedStopClock.js

@@ -0,0 +1,30 @@
+import AnimatedNode from './AnimatedNode';
+import AnimatedClock from './AnimatedClock';
+import { AnimatedParam } from './AnimatedParam';
+import invariant from 'invariant';
+
+class AnimatedStopClock extends AnimatedNode {
+  _clockNode;
+
+  constructor(clockNode) {
+    invariant(
+      clockNode instanceof AnimatedClock || clockNode instanceof AnimatedParam,
+      `Reanimated: Animated.stopClock argument should be of type AnimatedClock but got ${clockNode}`
+    );
+    super({ type: 'clockStop', clock: clockNode });
+    this._clockNode = clockNode;
+  }
+
+  toString() {
+    return `AnimatedStopClock, id: ${this.__nodeID}`;
+  }
+
+  __onEvaluate() {
+    this._clockNode.stop();
+    return 0;
+  }
+}
+
+export function createAnimatedStopClock(clock) {
+  return new AnimatedStopClock(clock);
+}

package/lib/reanimated1/core/AnimatedStyle.js

@@ -0,0 +1,78 @@
+import { StyleSheet } from 'react-native';
+
+import AnimatedNode from './AnimatedNode';
+import { createOrReuseTransformNode } from './AnimatedTransform';
+
+import deepEqual from 'lodash.isequal';
+
+function sanitizeStyle(inputStyle) {
+  let style;
+  for (const key in inputStyle) {
+    const value = inputStyle[key];
+    if (value instanceof AnimatedNode) {
+      if (style === undefined) {
+        style = {};
+      }
+      style[key] = value.__nodeID;
+    }
+  }
+  return style;
+}
+
+export function createOrReuseStyleNode(style, oldNode) {
+  style = StyleSheet.flatten(style) || {};
+  if (style.transform) {
+    const transform = createOrReuseTransformNode(
+      style.transform,
+      oldNode && oldNode._style.transform
+    );
+    if (transform) {
+      style = {
+        ...style,
+        transform,
+      };
+    }
+  }
+  const config = sanitizeStyle(style);
+  if (config === undefined) {
+    return undefined;
+  }
+  if (oldNode && deepEqual(config, oldNode._config)) {
+    return oldNode;
+  }
+  return new AnimatedStyle(style, config);
+}
+
+/**
+ * AnimatedStyle should never be directly instantiated, use createOrReuseStyleNode
+ * in order to make a new instance of this node.
+ */
+export default class AnimatedStyle extends AnimatedNode {
+  constructor(style, config) {
+    super({ type: 'style', style: config }, Object.values(style));
+    this._config = config;
+    this._style = style;
+  }
+
+  toString() {
+    return `AnimatedStyle, id: ${this.__nodeID}`;
+  }
+
+  _walkStyleAndGetAnimatedValues(style) {
+    const updatedStyle = {};
+    for (const key in style) {
+      const value = style[key];
+      if (value instanceof AnimatedNode) {
+        updatedStyle[key] = value.__getValue();
+      } else if (value && !Array.isArray(value) && typeof value === 'object') {
+        // Support animating nested values (for example: shadowOffset.height)
+        updatedStyle[key] = this._walkStyleAndGetAnimatedValues(value);
+      }
+    }
+    return updatedStyle;
+  }
+
+  __onEvaluate() {
+    return this._walkStyleAndGetAnimatedValues(this._style);
+  }
+}