react-native-windows 0.0.0 → 0.0.1-0

package/Libraries/Animated/nodes/AnimatedWithChildren.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -10,10 +10,12 @@
 
 'use strict';
 
-const AnimatedNode = require('./AnimatedNode');
-const NativeAnimatedHelper = require('../NativeAnimatedHelper');
+import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-class AnimatedWithChildren extends AnimatedNode {
+import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import AnimatedNode from './AnimatedNode';
+
+export default class AnimatedWithChildren extends AnimatedNode {
   _children: Array<AnimatedNode>;
 
   constructor() {
@@ -21,18 +23,18 @@ class AnimatedWithChildren extends AnimatedNode {
     this._children = [];
   }
 
-  __makeNative() {
+  __makeNative(platformConfig: ?PlatformConfig) {
     if (!this.__isNative) {
       this.__isNative = true;
       for (const child of this._children) {
-        child.__makeNative();
+        child.__makeNative(platformConfig);
         NativeAnimatedHelper.API.connectAnimatedNodes(
           this.__getNativeTag(),
           child.__getNativeTag(),
         );
       }
     }
-    super.__makeNative();
+    super.__makeNative(platformConfig);
   }
 
   __addChild(child: AnimatedNode): void {
@@ -42,7 +44,7 @@ class AnimatedWithChildren extends AnimatedNode {
     this._children.push(child);
     if (this.__isNative) {
       // Only accept "native" animated nodes as children
-      child.__makeNative();
+      child.__makeNative(this.__getPlatformConfig());
       NativeAnimatedHelper.API.connectAnimatedNodes(
         this.__getNativeTag(),
         child.__getNativeTag(),
@@ -68,7 +70,7 @@ class AnimatedWithChildren extends AnimatedNode {
     }
   }
 
-  __getChildren(): Array<AnimatedNode> {
+  __getChildren(): $ReadOnlyArray<AnimatedNode> {
     return this._children;
   }
 
@@ -76,6 +78,7 @@ class AnimatedWithChildren extends AnimatedNode {
     super.__callListeners(value);
     if (!this.__isNative) {
       for (const child of this._children) {
+        // $FlowFixMe[method-unbinding] added when improving typing for this parameters
         if (child.__getValue) {
           child.__callListeners(child.__getValue());
         }
@@ -83,5 +86,3 @@ class AnimatedWithChildren extends AnimatedNode {
     }
   }
 }
-
-module.exports = AnimatedWithChildren;

package/Libraries/Animated/shouldUseTurboAnimatedModule.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import Platform from '../Utilities/Platform';
+
+function shouldUseTurboAnimatedModule(): boolean {
+  return Platform.OS === 'ios' && global.RN$Bridgeless === true;
+}
+
+export default shouldUseTurboAnimatedModule;

package/Libraries/Animated/useAnimatedProps.js

@@ -0,0 +1,220 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
+import {isPublicInstance as isFabricPublicInstance} from '../ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstanceUtils';
+import useRefEffect from '../Utilities/useRefEffect';
+import {AnimatedEvent} from './AnimatedEvent';
+import NativeAnimatedHelper from './NativeAnimatedHelper';
+import AnimatedProps from './nodes/AnimatedProps';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+} from 'react';
+
+type ReducedProps<TProps> = {
+  ...TProps,
+  collapsable: boolean,
+  ...
+};
+type CallbackRef<T> = T => mixed;
+
+export default function useAnimatedProps<TProps: {...}, TInstance>(
+  props: TProps,
+): [ReducedProps<TProps>, CallbackRef<TInstance | null>] {
+  const [, scheduleUpdate] = useReducer<number, void>(count => count + 1, 0);
+  const onUpdateRef = useRef<?() => void>(null);
+  const timerRef = useRef<TimeoutID | null>(null);
+
+  // TODO: Only invalidate `node` if animated props or `style` change. In the
+  // previous implementation, we permitted `style` to override props with the
+  // same name property name as styles, so we can probably continue doing that.
+  // The ordering of other props *should* not matter.
+  const node = useMemo(
+    () => new AnimatedProps(props, () => onUpdateRef.current?.()),
+    [props],
+  );
+  const useNativePropsInFabric =
+    ReactNativeFeatureFlags.shouldUseSetNativePropsInFabric();
+  useAnimatedPropsLifecycle(node);
+
+  // TODO: This "effect" does three things:
+  //
+  //   1) Call `setNativeView`.
+  //   2) Update `onUpdateRef`.
+  //   3) Update listeners for `AnimatedEvent` props.
+  //
+  // Ideally, each of these would be separate "effects" so that they are not
+  // unnecessarily re-run when irrelevant dependencies change. For example, we
+  // should be able to hoist all `AnimatedEvent` props and only do #3 if either
+  // the `AnimatedEvent` props change or `instance` changes.
+  //
+  // But there is no way to transparently compose three separate callback refs,
+  // so we just combine them all into one for now.
+  const refEffect = useCallback(
+    (instance: TInstance) => {
+      // NOTE: This may be called more often than necessary (e.g. when `props`
+      // changes), but `setNativeView` already optimizes for that.
+      node.setNativeView(instance);
+
+      // NOTE: When using the JS animation driver, this callback is called on
+      // every animation frame. When using the native driver, this callback is
+      // called when the animation completes.
+      onUpdateRef.current = () => {
+        if (
+          process.env.NODE_ENV === 'test' ||
+          typeof instance !== 'object' ||
+          typeof instance?.setNativeProps !== 'function' ||
+          (isFabricInstance(instance) && !useNativePropsInFabric)
+        ) {
+          // Schedule an update for this component to update `reducedProps`,
+          // but do not compute it immediately. If a parent also updated, we
+          // need to merge those new props in before updating.
+          scheduleUpdate();
+        } else if (!node.__isNative) {
+          // $FlowIgnore[not-a-function] - Assume it's still a function.
+          // $FlowFixMe[incompatible-use]
+          instance.setNativeProps(node.__getAnimatedValue());
+          if (isFabricInstance(instance)) {
+            // Keeping state of Fiber tree and Shadow tree in sync.
+            //
+            // This is done by calling `scheduleUpdate` which will trigger a commit.
+            // However, React commit is not fast enough to drive animations.
+            // This is where setNativeProps comes in handy but the state between
+            // Fiber tree and Shadow tree needs to be kept in sync.
+            // The goal is to call `scheduleUpdate` as little as possible to maintain
+            // performance but frequently enough to keep state in sync.
+            // Debounce is set to 48ms, which is 3 * the duration of a frame.
+            // 3 frames was the highest value where flickering state was not observed.
+            if (timerRef.current != null) {
+              clearTimeout(timerRef.current);
+            }
+            timerRef.current = setTimeout(() => {
+              timerRef.current = null;
+              scheduleUpdate();
+            }, 48);
+          }
+        }
+      };
+
+      const target = getEventTarget(instance);
+      const events = [];
+
+      for (const propName in props) {
+        const propValue = props[propName];
+        if (propValue instanceof AnimatedEvent && propValue.__isNative) {
+          propValue.__attach(target, propName);
+          events.push([propName, propValue]);
+        }
+      }
+
+      return () => {
+        onUpdateRef.current = null;
+
+        for (const [propName, propValue] of events) {
+          propValue.__detach(target, propName);
+        }
+      };
+    },
+    [props, node, useNativePropsInFabric],
+  );
+  const callbackRef = useRefEffect<TInstance>(refEffect);
+
+  return [reduceAnimatedProps<TProps>(node), callbackRef];
+}
+
+function reduceAnimatedProps<TProps>(
+  node: AnimatedProps,
+): ReducedProps<TProps> {
+  // Force `collapsable` to be false so that the native view is not flattened.
+  // Flattened views cannot be accurately referenced by the native driver.
+  return {
+    ...node.__getValue(),
+    collapsable: false,
+  };
+}
+
+/**
+ * Manages the lifecycle of the supplied `AnimatedProps` by invoking `__attach`
+ * and `__detach`. However, this is more complicated because `AnimatedProps`
+ * uses reference counting to determine when to recursively detach its children
+ * nodes. So in order to optimize this, we avoid detaching until the next attach
+ * unless we are unmounting.
+ */
+function useAnimatedPropsLifecycle(node: AnimatedProps): void {
+  const prevNodeRef = useRef<?AnimatedProps>(null);
+  const isUnmountingRef = useRef<boolean>(false);
+
+  useEffect(() => {
+    // It is ok for multiple components to call `flushQueue` because it noops
+    // if the queue is empty. When multiple animated components are mounted at
+    // the same time. Only first component flushes the queue and the others will noop.
+    NativeAnimatedHelper.API.flushQueue();
+  });
+
+  useLayoutEffect(() => {
+    isUnmountingRef.current = false;
+    return () => {
+      isUnmountingRef.current = true;
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    node.__attach();
+    if (prevNodeRef.current != null) {
+      const prevNode = prevNodeRef.current;
+      // TODO: Stop restoring default values (unless `reset` is called).
+      prevNode.__restoreDefaultValues();
+      prevNode.__detach();
+      prevNodeRef.current = null;
+    }
+    return () => {
+      if (isUnmountingRef.current) {
+        // NOTE: Do not restore default values on unmount, see D18197735.
+        node.__detach();
+      } else {
+        prevNodeRef.current = node;
+      }
+    };
+  }, [node]);
+}
+
+function getEventTarget<TInstance>(instance: TInstance): TInstance {
+  return typeof instance === 'object' &&
+    typeof instance?.getScrollableNode === 'function'
+    ? // $FlowFixMe[incompatible-use] - Legacy instance assumptions.
+      instance.getScrollableNode()
+    : instance;
+}
+
+// $FlowFixMe[unclear-type] - Legacy instance assumptions.
+function isFabricInstance(instance: any): boolean {
+  return (
+    isFabricPublicInstance(instance) ||
+    // Some components have a setNativeProps function but aren't a host component
+    // such as lists like FlatList and SectionList. These should also use
+    // forceUpdate in Fabric since setNativeProps doesn't exist on the underlying
+    // host component. This crazy hack is essentially special casing those lists and
+    // ScrollView itself to use forceUpdate in Fabric.
+    // If these components end up using forwardRef then these hacks can go away
+    // as instance would actually be the underlying host component and the above check
+    // would be sufficient.
+    isFabricPublicInstance(instance?.getNativeScrollRef?.()) ||
+    isFabricPublicInstance(
+      instance?.getScrollResponder?.()?.getNativeScrollRef?.(),
+    )
+  );
+}

package/Libraries/Animated/useAnimatedValue.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import type {Animated} from './Animated';
+
+export function useAnimatedValue(
+  initialValue: number,
+  config?: Animated.AnimatedConfig,
+): Animated.Value;

package/Libraries/Animated/useAnimatedValue.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {AnimatedValueConfig} from './nodes/AnimatedValue';
+
+import Animated from './Animated';
+import {useRef} from 'react';
+
+export default function useAnimatedValue(
+  initialValue: number,
+  config?: ?AnimatedValueConfig,
+): Animated.Value {
+  const ref = useRef<null | Animated.Value>(null);
+  if (ref.current == null) {
+    ref.current = new Animated.Value(initialValue, config);
+  }
+  return ref.current;
+}

package/Libraries/AppState/AppState.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {NativeEventSubscription} from '../EventEmitter/RCTNativeAppEventEmitter';
+
+/**
+ * AppState can tell you if the app is in the foreground or background,
+ * and notify you when the state changes.
+ *
+ * AppState is frequently used to determine the intent and proper behavior
+ * when handling push notifications.
+ *
+ * App State Events
+ *      change - This even is received when the app state has changed.
+ *      focus [Android] - Received when the app gains focus (the user is interacting with the app).
+ *      blur [Android] - Received when the user is not actively interacting with the app.
+ *
+ * App States
+ *      active - The app is running in the foreground
+ *      background - The app is running in the background. The user is either in another app or on the home screen
+ *      inactive [iOS] - This is a transition state that happens when the app launches, is asking for permissions or when a call or SMS message is received.
+ *      unknown [iOS] - Initial value until the current app state is determined
+ *      extension [iOS] - The app is running as an app extension
+ *
+ * For more information, see Apple's documentation: https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html
+ *
+ * @see https://reactnative.dev/docs/appstate#app-states
+ */
+export type AppStateEvent = 'change' | 'memoryWarning' | 'blur' | 'focus';
+export type AppStateStatus =
+  | 'active'
+  | 'background'
+  | 'inactive'
+  | 'unknown'
+  | 'extension';
+
+export interface AppStateStatic {
+  currentState: AppStateStatus;
+  isAvailable: boolean;
+
+  /**
+   * Add a handler to AppState changes by listening to the change event
+   * type and providing the handler
+   */
+  addEventListener(
+    type: AppStateEvent,
+    listener: (state: AppStateStatus) => void,
+  ): NativeEventSubscription;
+}
+
+export const AppState: AppStateStatic;
+export type AppState = AppStateStatic;

package/Libraries/AppState/AppState.js

@@ -1,179 +1,128 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
+ * @flow strict-local
  * @format
- * @flow
  */
 
-'use strict';
-
 import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
 import logError from '../Utilities/logError';
-import EventEmitter from '../vendor/emitter/EventEmitter';
+import Platform from '../Utilities/Platform';
+import {type EventSubscription} from '../vendor/emitter/EventEmitter';
 import NativeAppState from './NativeAppState';
-import invariant from 'invariant';
+
+export type AppStateValues = 'inactive' | 'background' | 'active';
+
+type AppStateEventDefinitions = {
+  change: [AppStateValues],
+  memoryWarning: [],
+  blur: [],
+  focus: [],
+};
+
+type NativeAppStateEventDefinitions = {
+  appStateDidChange: [{app_state: AppStateValues}],
+  appStateFocusChange: [boolean],
+  memoryWarning: [],
+};
 
 /**
  * `AppState` can tell you if the app is in the foreground or background,
  * and notify you when the state changes.
  *
- * See https://reactnative.dev/docs/appstate.html
+ * See https://reactnative.dev/docs/appstate
  */
-class AppState extends NativeEventEmitter {
-  _eventHandlers: Object;
-  _supportedEvents = ['change', 'memoryWarning', 'blur', 'focus'];
-  currentState: ?string;
+class AppState {
+  currentState: ?string = null;
   isAvailable: boolean;
 
-  constructor() {
-    super(NativeAppState);
-
-    this.isAvailable = true;
-    this._eventHandlers = this._supportedEvents.reduce((handlers, key) => {
-      handlers[key] = new Map();
-      return handlers;
-    }, {});
+  _emitter: ?NativeEventEmitter<NativeAppStateEventDefinitions>;
 
-    this.currentState = NativeAppState.getConstants().initialAppState;
+  constructor() {
+    if (NativeAppState == null) {
+      this.isAvailable = false;
+    } else {
+      this.isAvailable = true;
+
+      const emitter: NativeEventEmitter<NativeAppStateEventDefinitions> =
+        new NativeEventEmitter(
+          // T88715063: NativeEventEmitter only used this parameter on iOS. Now it uses it on all platforms, so this code was modified automatically to preserve its behavior
+          // If you want to use the native module on other platforms, please remove this condition and test its behavior
+          Platform.OS !== 'ios' ? null : NativeAppState,
+        );
+      this._emitter = emitter;
 
-    let eventUpdated = false;
+      this.currentState = NativeAppState.getConstants().initialAppState;
 
-    // TODO: this is a terrible solution - in order to ensure `currentState`
-    // prop is up to date, we have to register an observer that updates it
-    // whenever the state changes, even if nobody cares. We should just
-    // deprecate the `currentState` property and get rid of this.
-    this.addListener('appStateDidChange', appStateData => {
-      eventUpdated = true;
-      this.currentState = appStateData.app_state;
-    });
+      let eventUpdated = false;
 
-    // TODO: see above - this request just populates the value of `currentState`
-    // when the module is first initialized. Would be better to get rid of the
-    // prop and expose `getCurrentAppState` method directly.
-    NativeAppState.getCurrentAppState(appStateData => {
-      // It's possible that the state will have changed here & listeners need to be notified
-      if (!eventUpdated && this.currentState !== appStateData.app_state) {
+      // TODO: this is a terrible solution - in order to ensure `currentState`
+      // prop is up to date, we have to register an observer that updates it
+      // whenever the state changes, even if nobody cares. We should just
+      // deprecate the `currentState` property and get rid of this.
+      emitter.addListener('appStateDidChange', appStateData => {
+        eventUpdated = true;
         this.currentState = appStateData.app_state;
-        this.emit('appStateDidChange', appStateData);
-      }
-    }, logError);
+      });
+
+      // TODO: see above - this request just populates the value of `currentState`
+      // when the module is first initialized. Would be better to get rid of the
+      // prop and expose `getCurrentAppState` method directly.
+      // $FlowExpectedError[incompatible-call]
+      NativeAppState.getCurrentAppState(appStateData => {
+        // It's possible that the state will have changed here & listeners need to be notified
+        if (!eventUpdated && this.currentState !== appStateData.app_state) {
+          this.currentState = appStateData.app_state;
+          // $FlowFixMe[incompatible-call]
+          emitter.emit('appStateDidChange', appStateData);
+        }
+      }, logError);
+    }
   }
 
-  // TODO: now that AppState is a subclass of NativeEventEmitter, we could
-  // deprecate `addEventListener` and `removeEventListener` and just use
-  // addListener` and `listener.remove()` directly. That will be a breaking
-  // change though, as both the method and event names are different
-  // (addListener events are currently required to be globally unique).
   /**
    * Add a handler to AppState changes by listening to the `change` event type
    * and providing the handler.
    *
-   * See https://reactnative.dev/docs/appstate.html#addeventlistener
+   * See https://reactnative.dev/docs/appstate#addeventlistener
    */
-  addEventListener(type: string, handler: Function) {
-    invariant(
-      this._supportedEvents.indexOf(type) !== -1,
-      'Trying to subscribe to unknown event: "%s"',
-      type,
-    );
-
+  addEventListener<K: $Keys<AppStateEventDefinitions>>(
+    type: K,
+    handler: (...$ElementType<AppStateEventDefinitions, K>) => void,
+  ): EventSubscription {
+    const emitter = this._emitter;
+    if (emitter == null) {
+      throw new Error('Cannot use AppState when `isAvailable` is false.');
+    }
     switch (type) {
-      case 'change': {
-        this._eventHandlers[type].set(
-          handler,
-          this.addListener('appStateDidChange', appStateData => {
-            handler(appStateData.app_state);
-          }),
-        );
-        break;
-      }
-      case 'memoryWarning': {
-        this._eventHandlers[type].set(
-          handler,
-          this.addListener('memoryWarning', handler),
-        );
-        break;
-      }
-
+      case 'change':
+        // $FlowIssue[invalid-tuple-arity] Flow cannot refine handler based on the event type
+        const changeHandler: AppStateValues => void = handler;
+        return emitter.addListener('appStateDidChange', appStateData => {
+          changeHandler(appStateData.app_state);
+        });
+      case 'memoryWarning':
+        // $FlowIssue[invalid-tuple-arity] Flow cannot refine handler based on the event type
+        const memoryWarningHandler: () => void = handler;
+        return emitter.addListener('memoryWarning', memoryWarningHandler);
       case 'blur':
-      case 'focus': {
-        this._eventHandlers[type].set(
-          handler,
-          this.addListener('appStateFocusChange', hasFocus => {
-            if (type === 'blur' && !hasFocus) {
-              handler();
-            }
-            if (type === 'focus' && hasFocus) {
-              handler();
-            }
-          }),
-        );
-      }
-    }
-  }
-
-  /**
-   * Remove a handler by passing the `change` event type and the handler.
-   *
-   * See https://reactnative.dev/docs/appstate.html#removeeventlistener
-   */
-  removeEventListener(type: string, handler: Function) {
-    invariant(
-      this._supportedEvents.indexOf(type) !== -1,
-      'Trying to remove listener for unknown event: "%s"',
-      type,
-    );
-    if (!this._eventHandlers[type].has(handler)) {
-      return;
+      case 'focus':
+        // $FlowIssue[invalid-tuple-arity] Flow cannot refine handler based on the event type
+        const focusOrBlurHandler: () => void = handler;
+        return emitter.addListener('appStateFocusChange', hasFocus => {
+          if (type === 'blur' && !hasFocus) {
+            focusOrBlurHandler();
+          }
+          if (type === 'focus' && hasFocus) {
+            focusOrBlurHandler();
+          }
+        });
     }
-    this._eventHandlers[type].get(handler).remove();
-    this._eventHandlers[type].delete(handler);
+    throw new Error('Trying to subscribe to unknown event: ' + type);
   }
 }
 
-function throwMissingNativeModule() {
-  invariant(
-    false,
-    'Cannot use AppState module when native RCTAppState is not included in the build.\n' +
-      'Either include it, or check AppState.isAvailable before calling any methods.',
-  );
-}
-
-class MissingNativeAppStateShim extends EventEmitter {
-  // AppState
-  isAvailable: boolean = false;
-  currentState: ?string = null;
-
-  addEventListener(type: string, handler: Function) {
-    throwMissingNativeModule();
-  }
-
-  removeEventListener(type: string, handler: Function) {
-    throwMissingNativeModule();
-  }
-
-  // EventEmitter
-  addListener() {
-    throwMissingNativeModule();
-  }
-
-  removeAllListeners() {
-    throwMissingNativeModule();
-  }
-
-  removeSubscription() {
-    throwMissingNativeModule();
-  }
-}
-
-// This module depends on the native `RCTAppState` module. If you don't include it,
-// `AppState.isAvailable` will return `false`, and any method calls will throw.
-// We reassign the class variable to keep the autodoc generator happy.
-const AppStateInstance: AppState | MissingNativeAppStateShim = NativeAppState
-  ? new AppState()
-  : new MissingNativeAppStateShim();
-
-module.exports = AppStateInstance;
+module.exports = (new AppState(): AppState);