react-native-windows 0.70.9 → 0.71.0-preview.2

package/Libraries/Components/AccessibilityInfo/NativeAccessibilityManager.js

@@ -9,6 +9,7 @@
  */
 
 import type {TurboModule} from '../../TurboModule/RCTExport';
+
 import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
 
 export interface Spec extends TurboModule {
@@ -28,6 +29,10 @@ export interface Spec extends TurboModule {
     onSuccess: (isReduceMotionEnabled: boolean) => void,
     onError: (error: Object) => void,
   ) => void;
+  +getCurrentPrefersCrossFadeTransitionsState?: (
+    onSuccess: (prefersCrossFadeTransitions: boolean) => void,
+    onError: (error: Object) => void,
+  ) => void;
   +getCurrentReduceTransparencyState: (
     onSuccess: (isReduceTransparencyEnabled: boolean) => void,
     onError: (error: Object) => void,

package/Libraries/Components/ActivityIndicator/ActivityIndicator.d.ts

@@ -0,0 +1,86 @@
+/**
+ * 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 * as React from 'react';
+import {Constructor} from '../../../types/private/Utilities';
+import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
+import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
+import {LayoutChangeEvent} from '../../Types/CoreEventTypes';
+import {ViewProps} from '../View/ViewPropTypes';
+
+/**
+ * @see https://reactnative.dev/docs/activityindicator#props
+ */
+export interface ActivityIndicatorProps extends ViewProps {
+  /**
+   * Whether to show the indicator (true, the default) or hide it (false).
+   */
+  animating?: boolean | undefined;
+
+  /**
+   * The foreground color of the spinner (default is gray).
+   */
+  color?: ColorValue | undefined;
+
+  /**
+   * Whether the indicator should hide when not animating (true by default).
+   */
+  hidesWhenStopped?: boolean | undefined;
+
+  /**
+   * Size of the indicator.
+   * Small has a height of 20, large has a height of 36.
+   *
+   * enum('small', 'large')
+   */
+  size?: number | 'small' | 'large' | undefined;
+
+  style?: StyleProp<ViewStyle> | undefined;
+}
+
+declare class ActivityIndicatorComponent extends React.Component<ActivityIndicatorProps> {}
+declare const ActivityIndicatorBase: Constructor<NativeMethods> &
+  typeof ActivityIndicatorComponent;
+export class ActivityIndicator extends ActivityIndicatorBase {}
+
+/**
+ * @see https://reactnative.dev/docs/activityindicatorios#props
+ */
+export interface ActivityIndicatorIOSProps extends ViewProps {
+  /**
+   * Whether to show the indicator (true, the default) or hide it (false).
+   */
+  animating?: boolean | undefined;
+
+  /**
+   * The foreground color of the spinner (default is gray).
+   */
+  color?: ColorValue | undefined;
+
+  /**
+   * Whether the indicator should hide when not animating (true by default).
+   */
+  hidesWhenStopped?: boolean | undefined;
+
+  /**
+   * Invoked on mount and layout changes with
+   */
+  onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
+
+  /**
+   * Size of the indicator.
+   * Small has a height of 20, large has a height of 36.
+   *
+   * enum('small', 'large')
+   */
+  size?: 'small' | 'large' | undefined;
+
+  style?: StyleProp<ViewStyle> | undefined;
+}

package/Libraries/Components/ActivityIndicator/ActivityIndicator.flow.js

@@ -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
+ * @flow
+ */
+
+'use strict';
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {ViewProps} from '../View/ViewPropTypes';
+
+import {type ColorValue} from '../../StyleSheet/StyleSheet';
+import * as React from 'react';
+
+type IndicatorSize = number | 'small' | 'large';
+
+type IOSProps = $ReadOnly<{|
+  /**
+    Whether the indicator should hide when not animating.
+
+    @platform ios
+  */
+  hidesWhenStopped?: ?boolean,
+|}>;
+
+type Props = $ReadOnly<{|
+  ...ViewProps,
+  ...IOSProps,
+
+  /**
+   	Whether to show the indicator (`true`) or hide it (`false`).
+   */
+  animating?: ?boolean,
+
+  /**
+    The foreground color of the spinner.
+
+    @default {@platform android} `null` (system accent default color)
+    @default {@platform ios} '#999999'
+  */
+  color?: ?ColorValue,
+
+  /**
+    Size of the indicator.
+
+    @type enum(`'small'`, `'large'`)
+    @type {@platform android} number
+  */
+  size?: ?IndicatorSize,
+|}>;
+
+export type ActivityIndicator = React.AbstractComponent<
+  Props,
+  HostComponent<mixed>,
+>;

package/Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -10,12 +10,13 @@
  */
 
 'use strict';
-import * as React from 'react';
-import Platform from '../../Utilities/Platform';
+import type {ViewProps} from '../View/ViewPropTypes';
+import type {ActivityIndicator as ActivityIndicatorType} from './ActivityIndicator.flow';
+
 import StyleSheet, {type ColorValue} from '../../StyleSheet/StyleSheet';
+import Platform from '../../Utilities/Platform';
 import View from '../View/View';
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
-import type {ViewProps} from '../View/ViewPropTypes';
+import * as React from 'react';
 
 const PlatformActivityIndicator =
   Platform.OS === 'android'
@@ -183,10 +184,8 @@ const ActivityIndicator = (
   ```
 */
 
-const ActivityIndicatorWithRef: React.AbstractComponent<
-  Props,
-  HostComponent<mixed>,
-> = React.forwardRef(ActivityIndicator);
+const ActivityIndicatorWithRef: ActivityIndicatorType =
+  React.forwardRef(ActivityIndicator);
 ActivityIndicatorWithRef.displayName = 'ActivityIndicator';
 
 const styles = StyleSheet.create({

package/Libraries/Components/ActivityIndicator/ActivityIndicatorViewNativeComponent.js

@@ -8,13 +8,12 @@
  * @flow strict-local
  */
 
-import type {WithDefault} from '../../Types/CodegenTypes';
-
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
+import type {WithDefault} from '../../Types/CodegenTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 
 import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 
 type NativeProps = $ReadOnly<{|
   ...ViewProps,

package/Libraries/Components/Button.d.ts

@@ -0,0 +1,42 @@
+/**
+ * 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 * as React from 'react';
+import {ColorValue} from '../StyleSheet/StyleSheet';
+import {TouchableNativeFeedbackProps} from './Touchable/TouchableNativeFeedback';
+import {TouchableOpacityProps} from './Touchable/TouchableOpacity';
+
+export interface ButtonProps
+  extends Pick<
+    TouchableNativeFeedbackProps & TouchableOpacityProps,
+    | 'accessibilityLabel'
+    | 'accessibilityState'
+    | 'hasTVPreferredFocus'
+    | 'nextFocusDown'
+    | 'nextFocusForward'
+    | 'nextFocusLeft'
+    | 'nextFocusRight'
+    | 'nextFocusUp'
+    | 'testID'
+    | 'disabled'
+    | 'onPress'
+    | 'touchSoundDisabled'
+  > {
+  /**
+   * Text to display inside the button. On Android the given title will be converted to the uppercased form.
+   */
+  title: string;
+
+  /**
+   * Color of the text (iOS), or background color of the button (Android).
+   */
+  color?: ColorValue | undefined;
+}
+
+export class Button extends React.Component<ButtonProps> {}

package/Libraries/Components/Button.flow.js

@@ -0,0 +1,265 @@
+/**
+ * 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
+ * @flow
+ * @generate-docs
+ */
+
+'use strict';
+
+import type {PressEvent} from '../Types/CoreEventTypes';
+import type {
+  AccessibilityActionEvent,
+  AccessibilityActionInfo,
+  AccessibilityState,
+} from './View/ViewAccessibility';
+
+import {type ColorValue} from '../StyleSheet/StyleSheet';
+import * as React from 'react';
+
+type ButtonProps = $ReadOnly<{|
+  /**
+    Text to display inside the button. On Android the given title will be
+    converted to the uppercased form.
+   */
+  title: string,
+
+  /**
+    Handler to be called when the user taps the button. The first function
+    argument is an event in form of [PressEvent](pressevent).
+   */
+  onPress: (event?: PressEvent) => mixed,
+
+  /**
+    If `true`, doesn't play system sound on touch.
+
+    @platform android
+
+    @default false
+   */
+  touchSoundDisabled?: ?boolean,
+
+  /**
+    Color of the text (iOS), or background color of the button (Android).
+
+    @default {@platform android} '#2196F3'
+    @default {@platform ios} '#007AFF'
+   */
+  color?: ?ColorValue,
+
+  /**
+    TV preferred focus.
+
+    @platform tv
+
+    @default false
+   */
+  hasTVPreferredFocus?: ?boolean,
+
+  /**
+    Designates the next view to receive focus when the user navigates down. See
+    the [Android documentation][android:nextFocusDown].
+
+    [android:nextFocusDown]:
+    https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown
+
+    @platform android, tv
+   */
+  nextFocusDown?: ?number,
+
+  /**
+    Designates the next view to receive focus when the user navigates forward.
+    See the [Android documentation][android:nextFocusForward].
+
+    [android:nextFocusForward]:
+    https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward
+
+    @platform android, tv
+   */
+  nextFocusForward?: ?number,
+
+  /**
+    Designates the next view to receive focus when the user navigates left. See
+    the [Android documentation][android:nextFocusLeft].
+
+    [android:nextFocusLeft]:
+    https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft
+
+    @platform android, tv
+   */
+  nextFocusLeft?: ?number,
+
+  /**
+    Designates the next view to receive focus when the user navigates right. See
+    the [Android documentation][android:nextFocusRight].
+
+    [android:nextFocusRight]:
+    https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight
+
+    @platform android, tv
+   */
+  nextFocusRight?: ?number,
+
+  /**
+    Designates the next view to receive focus when the user navigates up. See
+    the [Android documentation][android:nextFocusUp].
+
+    [android:nextFocusUp]:
+    https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp
+
+    @platform android, tv
+   */
+  nextFocusUp?: ?number,
+
+  /**
+    Text to display for blindness accessibility features.
+   */
+  accessibilityLabel?: ?string,
+  /**
+   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
+   * https://github.com/facebook/react-native/issues/34424
+   */
+  'aria-label'?: ?string,
+  /**
+    If `true`, disable all interactions for this component.
+
+    @default false
+   */
+  disabled?: ?boolean,
+
+  /**
+    Used to locate this view in end-to-end tests.
+   */
+  testID?: ?string,
+
+  /**
+   * Accessibility props.
+   */
+  accessible?: ?boolean,
+  accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
+  onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
+  accessibilityState?: ?AccessibilityState,
+
+  /**
+   * [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services.
+   */
+  importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
+  accessibilityHint?: ?string,
+  accessibilityLanguage?: ?Stringish,
+|}>;
+
+/**
+  A basic button component that should render nicely on any platform. Supports a
+  minimal level of customization.
+
+  If this button doesn't look right for your app, you can build your own button
+  using [TouchableOpacity](touchableopacity) or
+  [TouchableWithoutFeedback](touchablewithoutfeedback). For inspiration, look at
+  the [source code for this button component][button:source]. Or, take a look at
+  the [wide variety of button components built by the community]
+  [button:examples].
+
+  [button:source]:
+  https://github.com/facebook/react-native/blob/HEAD/Libraries/Components/Button.js
+
+  [button:examples]:
+  https://js.coach/?menu%5Bcollections%5D=React%20Native&page=1&query=button
+
+  ```jsx
+  <Button
+    onPress={onPressLearnMore}
+    title="Learn More"
+    color="#841584"
+    accessibilityLabel="Learn more about this purple button"
+  />
+  ```
+
+  ```SnackPlayer name=Button%20Example
+  import React from 'react';
+  import { StyleSheet, Button, View, SafeAreaView, Text, Alert } from 'react-native';
+
+  const Separator = () => (
+    <View style={styles.separator} />
+  );
+
+  const App = () => (
+    <SafeAreaView style={styles.container}>
+      <View>
+        <Text style={styles.title}>
+          The title and onPress handler are required. It is recommended to set accessibilityLabel to help make your app usable by everyone.
+        </Text>
+        <Button
+          title="Press me"
+          onPress={() => Alert.alert('Simple Button pressed')}
+        />
+      </View>
+      <Separator />
+      <View>
+        <Text style={styles.title}>
+          Adjust the color in a way that looks standard on each platform. On  iOS, the color prop controls the color of the text. On Android, the color adjusts the background color of the button.
+        </Text>
+        <Button
+          title="Press me"
+          color="#f194ff"
+          onPress={() => Alert.alert('Button with adjusted color pressed')}
+        />
+      </View>
+      <Separator />
+      <View>
+        <Text style={styles.title}>
+          All interaction for the component are disabled.
+        </Text>
+        <Button
+          title="Press me"
+          disabled
+          onPress={() => Alert.alert('Cannot press this one')}
+        />
+      </View>
+      <Separator />
+      <View>
+        <Text style={styles.title}>
+          This layout strategy lets the title define the width of the button.
+        </Text>
+        <View style={styles.fixToText}>
+          <Button
+            title="Left button"
+            onPress={() => Alert.alert('Left button pressed')}
+          />
+          <Button
+            title="Right button"
+            onPress={() => Alert.alert('Right button pressed')}
+          />
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'center',
+      marginHorizontal: 16,
+    },
+    title: {
+      textAlign: 'center',
+      marginVertical: 8,
+    },
+    fixToText: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    separator: {
+      marginVertical: 8,
+      borderBottomColor: '#737373',
+      borderBottomWidth: StyleSheet.hairlineWidth,
+    },
+  });
+
+  export default App;
+  ```
+ */
+export type Button = React.ComponentType<ButtonProps>;

package/Libraries/Components/Button.js

@@ -11,21 +11,22 @@
 
 'use strict';
 
-import * as React from 'react';
-import Platform from '../Utilities/Platform';
+import type {PressEvent} from '../Types/CoreEventTypes';
+import type {Button as ButtonType} from './Button.flow';
+import type {
+  AccessibilityActionEvent,
+  AccessibilityActionInfo,
+  AccessibilityState,
+} from './View/ViewAccessibility';
+
 import StyleSheet, {type ColorValue} from '../StyleSheet/StyleSheet';
 import Text from '../Text/Text';
+import Platform from '../Utilities/Platform';
 import TouchableNativeFeedback from './Touchable/TouchableNativeFeedback';
 import TouchableOpacity from './Touchable/TouchableOpacity';
 import View from './View/View';
 import invariant from 'invariant';
-
-import type {
-  AccessibilityState,
-  AccessibilityActionEvent,
-  AccessibilityActionInfo,
-} from './View/ViewAccessibility';
-import type {PressEvent} from '../Types/CoreEventTypes';
+import * as React from 'react';
 
 type ButtonProps = $ReadOnly<{|
   /**
@@ -125,7 +126,11 @@ type ButtonProps = $ReadOnly<{|
     Text to display for blindness accessibility features.
    */
   accessibilityLabel?: ?string,
-
+  /**
+   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
+   * https://github.com/facebook/react-native/issues/34424
+   */
+  'aria-label'?: ?string,
   /**
     If `true`, disable all interactions for this component.
 
@@ -145,6 +150,22 @@ type ButtonProps = $ReadOnly<{|
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
   accessibilityState?: ?AccessibilityState,
+
+  /**
+   * alias for accessibilityState
+   *
+   * see https://reactnative.dev/docs/accessibility#accessibilitystate
+   */
+  'aria-busy'?: ?boolean,
+  'aria-checked'?: ?boolean | 'mixed',
+  'aria-disabled'?: ?boolean,
+  'aria-expanded'?: ?boolean,
+  'aria-selected'?: ?boolean,
+
+  /**
+   * [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services.
+   */
+  importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
   accessibilityHint?: ?string,
   accessibilityLanguage?: ?Stringish,
 |}>;
@@ -264,6 +285,14 @@ class Button extends React.Component<ButtonProps> {
   render(): React.Node {
     const {
       accessibilityLabel,
+      accessibilityState,
+      'aria-busy': ariaBusy,
+      'aria-checked': ariaChecked,
+      'aria-disabled': ariaDisabled,
+      'aria-expanded': ariaExpanded,
+      'aria-label': ariaLabel,
+      'aria-selected': ariaSelected,
+      importantForAccessibility,
       color,
       onPress,
       touchSoundDisabled,
@@ -291,15 +320,23 @@ class Button extends React.Component<ButtonProps> {
       }
     }
 
+    let _accessibilityState = {
+      busy: ariaBusy ?? accessibilityState?.busy,
+      checked: ariaChecked ?? accessibilityState?.checked,
+      disabled: ariaDisabled ?? accessibilityState?.disabled,
+      expanded: ariaExpanded ?? accessibilityState?.expanded,
+      selected: ariaSelected ?? accessibilityState?.selected,
+    };
+
     const disabled =
       this.props.disabled != null
         ? this.props.disabled
-        : this.props.accessibilityState?.disabled;
+        : _accessibilityState?.disabled;
 
-    const accessibilityState =
-      disabled !== this.props.accessibilityState?.disabled
-        ? {...this.props.accessibilityState, disabled}
-        : this.props.accessibilityState;
+    _accessibilityState =
+      disabled !== _accessibilityState?.disabled
+        ? {..._accessibilityState, disabled}
+        : _accessibilityState;
 
     if (disabled) {
       buttonStyles.push(styles.buttonDisabled);
@@ -315,16 +352,23 @@ class Button extends React.Component<ButtonProps> {
     const Touchable =
       Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
 
+    // If `no` is specified for `importantForAccessibility`, it will be changed to `no-hide-descendants` because the text inside should not be focused.
+    const _importantForAccessibility =
+      importantForAccessibility === 'no'
+        ? 'no-hide-descendants'
+        : importantForAccessibility;
+
     return (
       <Touchable
         accessible={accessible}
         accessibilityActions={accessibilityActions}
         onAccessibilityAction={onAccessibilityAction}
-        accessibilityLabel={accessibilityLabel}
+        accessibilityLabel={ariaLabel || accessibilityLabel}
         accessibilityHint={accessibilityHint}
         accessibilityLanguage={accessibilityLanguage}
         accessibilityRole="button"
-        accessibilityState={accessibilityState}
+        accessibilityState={_accessibilityState}
+        importantForAccessibility={_importantForAccessibility}
         hasTVPreferredFocus={hasTVPreferredFocus}
         nextFocusDown={nextFocusDown}
         nextFocusForward={nextFocusForward}
@@ -387,4 +431,4 @@ const styles = StyleSheet.create({
   }),
 });
 
-module.exports = Button;
+module.exports = (Button: ButtonType);