react-native-windows 0.76.3 → 0.77.0-preview.1

package/Libraries/Animated/animations/SpringAnimation.js

@@ -4,25 +4,22 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
-'use strict';
-
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type AnimatedInterpolation from '../nodes/AnimatedInterpolation';
 import type AnimatedValue from '../nodes/AnimatedValue';
 import type AnimatedValueXY from '../nodes/AnimatedValueXY';
 import type {AnimationConfig, EndCallback} from './Animation';
 
-import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedColor from '../nodes/AnimatedColor';
 import * as SpringConfig from '../SpringConfig';
 import Animation from './Animation';
 import invariant from 'invariant';
 
-export type SpringAnimationConfig = {
+export type SpringAnimationConfig = $ReadOnly<{
   ...AnimationConfig,
   toValue:
     | number
@@ -47,11 +44,11 @@ export type SpringAnimationConfig = {
   restSpeedThreshold?: number,
   velocity?:
     | number
-    | {
+    | $ReadOnly<{
         x: number,
         y: number,
         ...
-      },
+      }>,
   bounciness?: number,
   speed?: number,
   tension?: number,
@@ -60,9 +57,10 @@ export type SpringAnimationConfig = {
   damping?: number,
   mass?: number,
   delay?: number,
-};
+  ...
+}>;
 
-export type SpringAnimationConfigSingle = {
+export type SpringAnimationConfigSingle = $ReadOnly<{
   ...AnimationConfig,
   toValue: number,
   overshootClamping?: boolean,
@@ -77,7 +75,14 @@ export type SpringAnimationConfigSingle = {
   damping?: number,
   mass?: number,
   delay?: number,
-};
+  ...
+}>;
+
+opaque type SpringAnimationInternalState = $ReadOnly<{
+  lastPosition: number,
+  lastVelocity: number,
+  lastTime: number,
+}>;
 
 export default class SpringAnimation extends Animation {
   _overshootClamping: boolean;
@@ -93,17 +98,16 @@ export default class SpringAnimation extends Animation {
   _mass: number;
   _initialVelocity: number;
   _delay: number;
-  _timeout: any;
+  _timeout: ?TimeoutID;
   _startTime: number;
   _lastTime: number;
   _frameTime: number;
   _onUpdate: (value: number) => void;
-  _animationFrame: any;
-  _useNativeDriver: boolean;
+  _animationFrame: ?AnimationFrameID;
   _platformConfig: ?PlatformConfig;
 
   constructor(config: SpringAnimationConfigSingle) {
-    super();
+    super(config);
 
     this._overshootClamping = config.overshootClamping ?? false;
     this._restDisplacementThreshold = config.restDisplacementThreshold ?? 0.001;
@@ -112,10 +116,7 @@ export default class SpringAnimation extends Animation {
     this._lastVelocity = config.velocity ?? 0;
     this._toValue = config.toValue;
     this._delay = config.delay ?? 0;
-    this._useNativeDriver = NativeAnimatedHelper.shouldUseNativeDriver(config);
     this._platformConfig = config.platformConfig;
-    this.__isInteraction = config.isInteraction ?? !this._useNativeDriver;
-    this.__iterations = config.iterations ?? 1;
 
     if (
       config.stiffness !== undefined ||
@@ -167,7 +168,7 @@ export default class SpringAnimation extends Animation {
     invariant(this._mass > 0, 'Mass value must be greater than 0');
   }
 
-  __getNativeAnimationConfig(): {|
+  __getNativeAnimationConfig(): $ReadOnly<{
     damping: number,
     initialVelocity: number,
     iterations: number,
@@ -177,9 +178,10 @@ export default class SpringAnimation extends Animation {
     restDisplacementThreshold: number,
     restSpeedThreshold: number,
     stiffness: number,
-    toValue: any,
-    type: $TEMPORARY$string<'spring'>,
-  |} {
+    toValue: number,
+    type: 'spring',
+    ...
+  }> {
     return {
       type: 'spring',
       overshootClamping: this._overshootClamping,
@@ -202,12 +204,12 @@ export default class SpringAnimation extends Animation {
     previousAnimation: ?Animation,
     animatedValue: AnimatedValue,
   ): void {
-    this.__active = true;
+    super.start(fromValue, onUpdate, onEnd, previousAnimation, animatedValue);
+
     this._startPosition = fromValue;
     this._lastPosition = this._startPosition;
 
     this._onUpdate = onUpdate;
-    this.__onEnd = onEnd;
     this._lastTime = Date.now();
     this._frameTime = 0.0;
 
@@ -221,17 +223,8 @@ export default class SpringAnimation extends Animation {
     }
 
     const start = () => {
-      if (!this._useNativeDriver && animatedValue.__isNative === true) {
-        throw new Error(
-          'Attempting to run JS driven animation on animated node ' +
-            'that has been moved to "native" earlier by starting an ' +
-            'animation with `useNativeDriver: true`',
-        );
-      }
-
-      if (this._useNativeDriver) {
-        this.__startNativeAnimation(animatedValue);
-      } else {
+      const useNativeDriver = this.__startAnimationIfNative(animatedValue);
+      if (!useNativeDriver) {
         this.onUpdate();
       }
     };
@@ -244,7 +237,7 @@ export default class SpringAnimation extends Animation {
     }
   }
 
-  getInternalState(): Object {
+  getInternalState(): SpringAnimationInternalState {
     return {
       lastPosition: this._lastPosition,
       lastVelocity: this._lastVelocity,
@@ -361,7 +354,7 @@ export default class SpringAnimation extends Animation {
         this._onUpdate(this._toValue);
       }
 
-      this.__debouncedOnEnd({finished: true});
+      this.__notifyAnimationEnd({finished: true});
       return;
     }
     // $FlowFixMe[method-unbinding] added when improving typing for this parameters
@@ -370,9 +363,10 @@ export default class SpringAnimation extends Animation {
 
   stop(): void {
     super.stop();
-    this.__active = false;
     clearTimeout(this._timeout);
-    global.cancelAnimationFrame(this._animationFrame);
-    this.__debouncedOnEnd({finished: false});
+    if (this._animationFrame != null) {
+      global.cancelAnimationFrame(this._animationFrame);
+    }
+    this.__notifyAnimationEnd({finished: false});
   }
 }

package/Libraries/Animated/animations/TimingAnimation.js

@@ -4,12 +4,10 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
-'use strict';
-
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type {RgbaValue} from '../nodes/AnimatedColor';
 import type AnimatedInterpolation from '../nodes/AnimatedInterpolation';
@@ -17,7 +15,6 @@ import type AnimatedValue from '../nodes/AnimatedValue';
 import type AnimatedValueXY from '../nodes/AnimatedValueXY';
 import type {AnimationConfig, EndCallback} from './Animation';
 
-import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedColor from '../nodes/AnimatedColor';
 import Animation from './Animation';
 
@@ -26,11 +23,11 @@ export type TimingAnimationConfig = $ReadOnly<{
   toValue:
     | number
     | AnimatedValue
-    | {
+    | $ReadOnly<{
         x: number,
         y: number,
         ...
-      }
+      }>
     | AnimatedValueXY
     | RgbaValue
     | AnimatedColor
@@ -38,6 +35,7 @@ export type TimingAnimationConfig = $ReadOnly<{
   easing?: (value: number) => number,
   duration?: number,
   delay?: number,
+  ...
 }>;
 
 export type TimingAnimationConfigSingle = $ReadOnly<{
@@ -46,6 +44,7 @@ export type TimingAnimationConfigSingle = $ReadOnly<{
   easing?: (value: number) => number,
   duration?: number,
   delay?: number,
+  ...
 }>;
 
 let _easeInOut;
@@ -65,25 +64,28 @@ export default class TimingAnimation extends Animation {
   _delay: number;
   _easing: (value: number) => number;
   _onUpdate: (value: number) => void;
-  _animationFrame: any;
-  _timeout: any;
-  _useNativeDriver: boolean;
+  _animationFrame: ?AnimationFrameID;
+  _timeout: ?TimeoutID;
   _platformConfig: ?PlatformConfig;
 
   constructor(config: TimingAnimationConfigSingle) {
-    super();
+    super(config);
+
     this._toValue = config.toValue;
     this._easing = config.easing ?? easeInOut();
     this._duration = config.duration ?? 500;
     this._delay = config.delay ?? 0;
-    this.__iterations = config.iterations ?? 1;
-    this._useNativeDriver = NativeAnimatedHelper.shouldUseNativeDriver(config);
     this._platformConfig = config.platformConfig;
-    this.__isInteraction = config.isInteraction ?? !this._useNativeDriver;
-    this.__isLooping = config.isLooping;
   }
 
-  __getNativeAnimationConfig(): any {
+  __getNativeAnimationConfig(): $ReadOnly<{
+    type: 'frames',
+    frames: $ReadOnlyArray<number>,
+    toValue: number,
+    iterations: number,
+    platformConfig: ?PlatformConfig,
+    ...
+  }> {
     const frameDuration = 1000.0 / 60.0;
     const frames = [];
     const numFrames = Math.round(this._duration / frameDuration);
@@ -107,35 +109,24 @@ export default class TimingAnimation extends Animation {
     previousAnimation: ?Animation,
     animatedValue: AnimatedValue,
   ): void {
-    this.__active = true;
+    super.start(fromValue, onUpdate, onEnd, previousAnimation, animatedValue);
+
     this._fromValue = fromValue;
     this._onUpdate = onUpdate;
-    this.__onEnd = onEnd;
 
     const start = () => {
-      if (!this._useNativeDriver && animatedValue.__isNative === true) {
-        throw new Error(
-          'Attempting to run JS driven animation on animated node ' +
-            'that has been moved to "native" earlier by starting an ' +
-            'animation with `useNativeDriver: true`',
-        );
-      }
+      this._startTime = Date.now();
 
-      // Animations that sometimes have 0 duration and sometimes do not
-      // still need to use the native driver when duration is 0 so as to
-      // not cause intermixed JS and native animations.
-      if (this._duration === 0 && !this._useNativeDriver) {
-        this._onUpdate(this._toValue);
-        this.__debouncedOnEnd({finished: true});
-      } else {
-        this._startTime = Date.now();
-        if (this._useNativeDriver) {
-          this.__startNativeAnimation(animatedValue);
+      const useNativeDriver = this.__startAnimationIfNative(animatedValue);
+      if (!useNativeDriver) {
+        // Animations that sometimes have 0 duration and sometimes do not
+        // still need to use the native driver when duration is 0 so as to
+        // not cause intermixed JS and native animations.
+        if (this._duration === 0) {
+          this._onUpdate(this._toValue);
+          this.__notifyAnimationEnd({finished: true});
         } else {
-          this._animationFrame = requestAnimationFrame(
-            // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-            this.onUpdate.bind(this),
-          );
+          this._animationFrame = requestAnimationFrame(() => this.onUpdate());
         }
       }
     };
@@ -156,7 +147,7 @@ export default class TimingAnimation extends Animation {
           this._fromValue + this._easing(1) * (this._toValue - this._fromValue),
         );
       }
-      this.__debouncedOnEnd({finished: true});
+      this.__notifyAnimationEnd({finished: true});
       return;
     }
 
@@ -173,9 +164,10 @@ export default class TimingAnimation extends Animation {
 
   stop(): void {
     super.stop();
-    this.__active = false;
     clearTimeout(this._timeout);
-    global.cancelAnimationFrame(this._animationFrame);
-    this.__debouncedOnEnd({finished: false});
+    if (this._animationFrame != null) {
+      global.cancelAnimationFrame(this._animationFrame);
+    }
+    this.__notifyAnimationEnd({finished: false});
   }
 }

package/Libraries/Animated/components/AnimatedFlatList.js

@@ -16,5 +16,5 @@ import * as React from 'react';
 
 export default (createAnimatedComponent(FlatList): AnimatedComponentType<
   React.ElementConfig<typeof FlatList>,
-  React.ElementRef<typeof FlatList>,
+  FlatList<mixed>,
 >);

package/Libraries/Animated/components/AnimatedSectionList.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {SectionBase} from '../../Lists/SectionList';
 import type {AnimatedComponentType} from '../createAnimatedComponent';
 
 import SectionList from '../../Lists/SectionList';
@@ -16,5 +17,6 @@ import * as React from 'react';
 
 export default (createAnimatedComponent(SectionList): AnimatedComponentType<
   React.ElementConfig<typeof SectionList>,
-  React.ElementRef<typeof SectionList>,
+  // $FlowExpectedError[unclear-type]
+  SectionList<SectionBase<any>>,
 >);

package/Libraries/Animated/createAnimatedComponent.js

@@ -8,6 +8,8 @@
  * @format
  */
 
+import type {AnimatedPropsAllowlist} from './nodes/AnimatedProps';
+
 import composeStyles from '../../src/private/styles/composeStyles';
 import View from '../Components/View/View';
 import useMergeRefs from '../Utilities/useMergeRefs';
@@ -25,46 +27,71 @@ export type AnimatedProps<Props: {...}> = {
       }>)]: any,
 };
 
-export type AnimatedComponentType<
+// We could use a mapped type here to introduce acceptable Animated variants
+// of properties, instead of doing so in the core StyleSheetTypes
+// Inexact Props are not supported, they'll be made exact here.
+export type StrictAnimatedProps<Props: {...}> = $ReadOnly<{
+  ...$Exact<Props>,
+  passthroughAnimatedPropExplicitValues?: ?Props,
+}>;
+
+export type AnimatedComponentType<Props: {...}, +Instance = mixed> = component(
+  ref: React.RefSetter<Instance>,
+  ...AnimatedProps<Props>
+);
+
+export type StrictAnimatedComponentType<
   Props: {...},
   +Instance = mixed,
-> = React.AbstractComponent<AnimatedProps<Props>, Instance>;
+> = component(ref: React.RefSetter<Instance>, ...StrictAnimatedProps<Props>);
 
 export default function createAnimatedComponent<TProps: {...}, TInstance>(
-  Component: React.AbstractComponent<TProps, TInstance>,
+  Component: component(ref: React.RefSetter<TInstance>, ...TProps),
 ): AnimatedComponentType<TProps, TInstance> {
-  const AnimatedComponent = React.forwardRef<AnimatedProps<TProps>, TInstance>(
-    (props, forwardedRef) => {
-      const [reducedProps, callbackRef] = useAnimatedProps<TProps, TInstance>(
-        // $FlowFixMe[incompatible-call]
-        props,
-      );
-      const ref = useMergeRefs<TInstance>(callbackRef, forwardedRef);
+  return unstable_createAnimatedComponentWithAllowlist(Component, null);
+}
+
+export function unstable_createAnimatedComponentWithAllowlist<
+  TProps: {...},
+  TInstance,
+>(
+  Component: component(ref: React.RefSetter<TInstance>, ...TProps),
+  allowlist: ?AnimatedPropsAllowlist,
+): StrictAnimatedComponentType<TProps, TInstance> {
+  const AnimatedComponent = React.forwardRef<
+    StrictAnimatedProps<TProps>,
+    TInstance,
+  >((props, forwardedRef) => {
+    const [reducedProps, callbackRef] = useAnimatedProps<TProps, TInstance>(
+      // $FlowFixMe[incompatible-call]
+      props,
+      allowlist,
+    );
+    const ref = useMergeRefs<TInstance>(callbackRef, forwardedRef);
 
-      // Some components require explicit passthrough values for animation
-      // to work properly. For example, if an animated component is
-      // transformed and Pressable, onPress will not work after transform
-      // without these passthrough values.
-      // $FlowFixMe[prop-missing]
-      const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
-      const passthroughStyle = passthroughAnimatedPropExplicitValues?.style;
-      const mergedStyle = useMemo(
-        () => composeStyles(style, passthroughStyle),
-        [passthroughStyle, style],
-      );
+    // Some components require explicit passthrough values for animation
+    // to work properly. For example, if an animated component is
+    // transformed and Pressable, onPress will not work after transform
+    // without these passthrough values.
+    // $FlowFixMe[prop-missing]
+    const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
+    const passthroughStyle = passthroughAnimatedPropExplicitValues?.style;
+    const mergedStyle = useMemo(
+      () => composeStyles(style, passthroughStyle),
+      [passthroughStyle, style],
+    );
 
-      // NOTE: It is important that `passthroughAnimatedPropExplicitValues` is
-      // spread after `reducedProps` but before `style`.
-      return (
-        <Component
-          {...reducedProps}
-          {...passthroughAnimatedPropExplicitValues}
-          style={mergedStyle}
-          ref={ref}
-        />
-      );
-    },
-  );
+    // NOTE: It is important that `passthroughAnimatedPropExplicitValues` is
+    // spread after `reducedProps` but before `style`.
+    return (
+      <Component
+        {...reducedProps}
+        {...passthroughAnimatedPropExplicitValues}
+        style={mergedStyle}
+        ref={ref}
+      />
+    );
+  });
 
   AnimatedComponent.displayName = `Animated(${
     Component.displayName || 'Anonymous'

package/Libraries/Animated/nodes/AnimatedColor.js

@@ -15,9 +15,9 @@ import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {NativeColorValue} from '../../StyleSheet/StyleSheetTypes';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import normalizeColor from '../../StyleSheet/normalizeColor';
 import {processColorObject} from '../../StyleSheet/PlatformColorValueTypes';
-import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedValue, {flushValue} from './AnimatedValue';
 import AnimatedWithChildren from './AnimatedWithChildren';
 

package/Libraries/Animated/nodes/AnimatedInterpolation.js

@@ -15,11 +15,11 @@
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type AnimatedNode from './AnimatedNode';
 
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import {validateInterpolation} from '../../../src/private/animated/NativeAnimatedValidation';
 import normalizeColor from '../../StyleSheet/normalizeColor';
 import processColor from '../../StyleSheet/processColor';
 import Easing from '../Easing';
-import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedWithChildren from './AnimatedWithChildren';
 import invariant from 'invariant';
 

package/Libraries/Animated/nodes/AnimatedNode.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
@@ -29,12 +27,11 @@ let _assertNativeAnimatedModule: ?() => void = () => {
   _assertNativeAnimatedModule = null;
 };
 
-// Note(vjeux): this would be better as an interface but flow doesn't
-// support them yet
 export default class AnimatedNode {
   #listeners: Map<string, ValueListenerCallback> = new Map();
+  #updateSubscription: ?EventSubscription = null;
+
   _platformConfig: ?PlatformConfig = undefined;
-  __nativeAnimatedValueListener: ?EventSubscription = null;
   __attach(): void {}
   __detach(): void {
     this.removeAllListeners();
@@ -56,16 +53,17 @@ export default class AnimatedNode {
   /* Methods and props used by native Animated impl */
   __isNative: boolean = false;
   __nativeTag: ?number = undefined;
-  __shouldUpdateListenersForNewNativeTag: boolean = false;
 
   __makeNative(platformConfig: ?PlatformConfig): void {
-    if (!this.__isNative) {
-      throw new Error('This node cannot be made a "native" animated node');
-    }
+    // Subclasses are expected to set `__isNative` to true before this.
+    invariant(
+      this.__isNative,
+      'This node cannot be made a "native" animated node',
+    );
 
     this._platformConfig = platformConfig;
     if (this.#listeners.size > 0) {
-      this._startListeningToNativeValueUpdates();
+      this.#ensureUpdateSubscriptionExists();
     }
   }
 
@@ -80,7 +78,7 @@ export default class AnimatedNode {
     const id = String(_uniqueId++);
     this.#listeners.set(id, callback);
     if (this.__isNative) {
-      this._startListeningToNativeValueUpdates();
+      this.#ensureUpdateSubscriptionExists();
     }
     return id;
   }
@@ -94,7 +92,7 @@ export default class AnimatedNode {
   removeListener(id: string): void {
     this.#listeners.delete(id);
     if (this.__isNative && this.#listeners.size === 0) {
-      this._stopListeningForNativeValueUpdates();
+      this.#updateSubscription?.remove();
     }
   }
 
@@ -106,7 +104,7 @@ export default class AnimatedNode {
   removeAllListeners(): void {
     this.#listeners.clear();
     if (this.__isNative) {
-      this._stopListeningForNativeValueUpdates();
+      this.#updateSubscription?.remove();
     }
   }
 
@@ -114,33 +112,36 @@ export default class AnimatedNode {
     return this.#listeners.size > 0;
   }
 
-  _startListeningToNativeValueUpdates() {
-    if (
-      this.__nativeAnimatedValueListener &&
-      !this.__shouldUpdateListenersForNewNativeTag
-    ) {
+  #ensureUpdateSubscriptionExists(): void {
+    if (this.#updateSubscription != null) {
       return;
     }
-
-    if (this.__shouldUpdateListenersForNewNativeTag) {
-      this.__shouldUpdateListenersForNewNativeTag = false;
-      this._stopListeningForNativeValueUpdates();
-    }
-
-    startListeningToAnimatedNodeValue(this.__getNativeTag());
-    this.__nativeAnimatedValueListener =
+    const nativeTag = this.__getNativeTag();
+    startListeningToAnimatedNodeValue(nativeTag);
+    const subscription: EventSubscription =
       NativeAnimatedHelper.nativeEventEmitter.addListener(
         'onAnimatedValueUpdate',
         data => {
-          if (data.tag !== this.__getNativeTag()) {
-            return;
+          if (data.tag === nativeTag) {
+            this.__onAnimatedValueUpdateReceived(data.value);
           }
-          this.__onAnimatedValueUpdateReceived(data.value);
         },
       );
+
+    this.#updateSubscription = {
+      remove: () => {
+        // Only this function assigns to `this.#updateSubscription`.
+        if (this.#updateSubscription == null) {
+          return;
+        }
+        this.#updateSubscription = null;
+        subscription.remove();
+        stopListeningToAnimatedNodeValue(nativeTag);
+      },
+    };
   }
 
-  __onAnimatedValueUpdateReceived(value: number) {
+  __onAnimatedValueUpdateReceived(value: number): void {
     this.__callListeners(value);
   }
 
@@ -151,16 +152,6 @@ export default class AnimatedNode {
     });
   }
 
-  _stopListeningForNativeValueUpdates() {
-    if (!this.__nativeAnimatedValueListener) {
-      return;
-    }
-
-    this.__nativeAnimatedValueListener.remove();
-    this.__nativeAnimatedValueListener = null;
-    stopListeningToAnimatedNodeValue(this.__getNativeTag());
-  }
-
   __getNativeTag(): number {
     let nativeTag = this.__nativeTag;
     if (nativeTag == null) {
@@ -181,7 +172,6 @@ export default class AnimatedNode {
         config.platformConfig = this._platformConfig;
       }
       NativeAnimatedHelper.API.createAnimatedNode(nativeTag, config);
-      this.__shouldUpdateListenersForNewNativeTag = true;
     }
     return nativeTag;
   }
@@ -192,10 +182,6 @@ export default class AnimatedNode {
     );
   }
 
-  toJSON(): any {
-    return this.__getValue();
-  }
-
   __getPlatformConfig(): ?PlatformConfig {
     return this._platformConfig;
   }
@@ -203,4 +189,12 @@ export default class AnimatedNode {
   __setPlatformConfig(platformConfig: ?PlatformConfig) {
     this._platformConfig = platformConfig;
   }
+
+  /**
+   * NOTE: This is intended to prevent `JSON.stringify` from throwing "cyclic
+   * structure" errors in React DevTools. Avoid depending on this!
+   */
+  toJSON(): mixed {
+    return this.__getValue();
+  }
 }