react-native-tvos 0.86.2-0 → 0.87.0-0

package/Libraries/Components/Button.js

@@ -27,133 +27,125 @@ import View from './View/View';
 import invariant from 'invariant';
 import * as React from 'react';
 
+/** @build-types emit-as-interface Uniwind compatibility */
 export type ButtonProps = Readonly<{
   /**
-    Text to display inside the button. On Android the given title will be
-    converted to the uppercased form.
+   * 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 [GestureResponderEvent](pressevent).
+   * Handler called when the user taps the button.
    */
   onPress?: (event?: GestureResponderEvent) => unknown,
 
   /**
-    If `true`, doesn't play system sound on touch.
-
-    @platform android
-
-    @default false
+   * 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 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
+   * May be set to true to force the focus engine to move focus to this view.
+   *
+   * @platform tv
+   *
    */
   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
+   * 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
+   * 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
+   * 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
+   * 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
+   * 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.
+   * Text to display for blindness accessibility features.
    */
   accessibilityLabel?: ?string,
+
   /**
-   * Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel
-   * https://github.com/react/react-native/issues/34424
+   * Alias for `accessibilityLabel`.
    */
   'aria-label'?: ?string,
-  /**
-    If `true`, disable all interactions for this component.
 
-    @default false
+  /**
+   * 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) => unknown,
   accessibilityState?: ?AccessibilityState,
 
   /**
-   * alias for accessibilityState
-   *
-   * see https://reactnative.dev/docs/accessibility#accessibilitystate
+   * Alias for `accessibilityState`.
    */
   'aria-busy'?: ?boolean,
   'aria-checked'?: ?boolean | 'mixed',
@@ -161,133 +153,55 @@ export type ButtonProps = Readonly<{
   '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,
+
+  /**
+   * A BCP 47 language tag for the screen reader to use when reading text
+   * content.
+   *
+   * @platform ios
+   */
   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/react/react-native/blob/HEAD/Libraries/Components/Button.js
-
-  ```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;
-  ```
- */
-
 const NativeTouchable:
   | typeof TouchableNativeFeedback
   | typeof TouchableOpacity =
   Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
 
-type ButtonRef = React.ElementRef<typeof NativeTouchable>;
+export type ButtonInstance = React.ElementRef<typeof NativeTouchable>;
 
+/**
+ * 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 `Pressable`.
+ *
+ * Example:
+ *
+ * ```tsx
+ * <Button
+ *   onPress={onPressLearnMore}
+ *   title="Learn More"
+ *   color="#841584"
+ *   accessibilityLabel="Learn more about this purple button"
+ * />
+ * ```
+ *
+ * @see https://reactnative.dev/docs/button
+ */
 const Button: component(
-  ref?: React.RefSetter<ButtonRef>,
+  ref?: React.RefSetter<ButtonInstance>,
   ...props: ButtonProps
-) = ({ref, ...props}: {ref?: React.RefSetter<ButtonRef>, ...ButtonProps}) => {
+) = ({
+  ref,
+  ...props
+}: {
+  ref?: React.RefSetter<ButtonInstance>,
+  ...ButtonProps,
+}) => {
   const {
     accessibilityLabel,
     accessibilityState,

package/Libraries/Components/Clipboard/Clipboard.js

@@ -12,6 +12,11 @@ import NativeClipboard from './NativeClipboard';
 
 /**
  * `Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android
+ *
+ * Clipboard has been extracted from react-native core and will be removed in a future release.
+ * It can now be installed and imported from `@react-native-clipboard/clipboard` instead of 'react-native'.
+ * @see https://github.com/react-native-clipboard/clipboard
+ * @deprecated
  */
 export default {
   /**

package/Libraries/Components/DrawerAndroid/AndroidDrawerLayoutNativeComponent.js

@@ -8,5 +8,5 @@
  * @format
  */
 
-export * from '../../../src/private/specs_DEPRECATED/components/AndroidDrawerLayoutNativeComponent';
-export {default} from '../../../src/private/specs_DEPRECATED/components/AndroidDrawerLayoutNativeComponent';
+export * from '../../../src/private/components/drawerlayoutandroid/specs/AndroidDrawerLayoutNativeComponent';
+export {default} from '../../../src/private/components/drawerlayoutandroid/specs/AndroidDrawerLayoutNativeComponent';

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -33,35 +33,14 @@ import {createRef} from 'react';
 const DRAWER_STATES = ['Idle', 'Dragging', 'Settling'] as const;
 
 /**
- * React component that wraps the platform `DrawerLayout` (Android only). The
- * Drawer (typically used for navigation) is rendered with `renderNavigationView`
- * and direct children are the main view (where your content goes). The navigation
- * view is initially not visible on the screen, but can be pulled in from the
- * side of the window specified by the `drawerPosition` prop and its width can
- * be set by the `drawerWidth` prop.
+ * React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view. The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop.
  *
- * Example:
+ * DrawerLayoutAndroid is deprecated and will be removed in a future release.
+ * Use `react-native-drawer-layout` instead.
  *
- * ```
- * render: function() {
- *   var navigationView = (
- *     <View style={{flex: 1, backgroundColor: '#fff'}}>
- *       <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
- *     </View>
- *   );
- *   return (
- *     <DrawerLayoutAndroid
- *       drawerWidth={300}
- *       drawerPosition="left"
- *       renderNavigationView={() => navigationView}>
- *       <View style={{flex: 1, alignItems: 'center'}}>
- *         <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
- *         <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
- *       </View>
- *     </DrawerLayoutAndroid>
- *   );
- * },
- * ```
+ * @see https://reactnavigation.org/docs/drawer-layout/
+ * @platform android
+ * @deprecated
  */
 class DrawerLayoutAndroid
   extends React.Component<DrawerLayoutAndroidProps, DrawerLayoutAndroidState>
@@ -110,12 +89,6 @@ class DrawerLayoutAndroid
     );
     const childrenWrapper = (
       <View style={styles.mainSubview} collapsable={false}>
-        {drawStatusBar && (
-          <StatusBar
-            translucent
-            backgroundColor={this.props.statusBarBackgroundColor}
-          />
-        )}
         {drawStatusBar && (
           <View
             style={[
@@ -200,42 +173,6 @@ class DrawerLayoutAndroid
     Commands.closeDrawer(nullthrows(this._nativeRef.current));
   }
 
-  /**
-   * Closing and opening example
-   * Note: To access the drawer you have to give it a ref
-   *
-   * Class component:
-   *
-   * render () {
-   *   this.openDrawer = () => {
-   *     this.refs.DRAWER.openDrawer()
-   *   }
-   *   this.closeDrawer = () => {
-   *     this.refs.DRAWER.closeDrawer()
-   *   }
-   *   return (
-   *     <DrawerLayoutAndroid ref={'DRAWER'}>
-   *      {children}
-   *     </DrawerLayoutAndroid>
-   *   )
-   * }
-   *
-   * Function component:
-   *
-   * const drawerRef = useRef()
-   * const openDrawer = () => {
-   *   drawerRef.current.openDrawer()
-   * }
-   * const closeDrawer = () => {
-   *   drawerRef.current.closeDrawer()
-   * }
-   * return (
-   *   <DrawerLayoutAndroid ref={drawerRef}>
-   *     {children}
-   *   </DrawerLayoutAndroid>
-   * )
-   */
-
   /**
    * Native methods
    */
@@ -302,4 +239,6 @@ const styles = StyleSheet.create({
   },
 });
 
+export type DrawerLayoutAndroidInstance = DrawerLayoutAndroid;
+
 export default DrawerLayoutAndroid as $FlowFixMe;

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.d.ts

@@ -21,7 +21,10 @@ export interface DrawerSlideEvent
   extends NativeSyntheticEvent<NativeTouchEvent> {}
 
 /**
- * @see DrawerLayoutAndroid.android.js
+ * DrawerLayoutAndroid is deprecated and will be removed in a future release.
+ * Use `react-native-drawer-layout` instead.
+ * @see https://reactnavigation.org/docs/drawer-layout/
+ * @deprecated
  */
 export interface DrawerLayoutAndroidProps extends ViewProps {
   /**
@@ -123,6 +126,12 @@ interface DrawerPosition {
 declare class DrawerLayoutAndroidComponent extends React.Component<DrawerLayoutAndroidProps> {}
 declare const DrawerLayoutAndroidBase: Constructor<HostInstance> &
   typeof DrawerLayoutAndroidComponent;
+/**
+ * DrawerLayoutAndroid is deprecated and will be removed in a future release.
+ * Use `react-native-drawer-layout` instead.
+ * @see https://reactnavigation.org/docs/drawer-layout/
+ * @deprecated
+ */
 export class DrawerLayoutAndroid extends DrawerLayoutAndroidBase {
   /**
    * drawer's positions.

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.ios.js

@@ -12,4 +12,6 @@
 
 import DrawerLayoutAndroidFallback from './DrawerLayoutAndroidFallback';
 
+export type DrawerLayoutAndroidInstance = DrawerLayoutAndroidFallback;
+
 export default DrawerLayoutAndroidFallback;

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroidTypes.js

@@ -27,82 +27,75 @@ export type DrawerSlideEvent = NativeSyntheticEvent<
   }>,
 >;
 
+/**
+ * DrawerLayoutAndroid is deprecated and will be removed in a future release.
+ * Use `react-native-drawer-layout` instead.
+ * @see https://reactnavigation.org/docs/drawer-layout/
+ * @deprecated
+ */
 export type DrawerLayoutAndroidProps = Readonly<{
   ...ViewProps,
 
   /**
-   * Determines whether the keyboard gets dismissed in response to a drag.
-   *   - 'none' (the default), drags do not dismiss the keyboard.
-   *   - 'on-drag', the keyboard is dismissed when a drag begins.
+   * Whether the keyboard is dismissed in response to a drag.
+   *
+   * @default `'none'`
    */
   keyboardDismissMode?: ?('none' | 'on-drag'),
 
   /**
-   * Specifies the background color of the drawer. The default value is white.
-   * If you want to set the opacity of the drawer, use rgba. Example:
+   * Background color of the drawer.
    *
-   * ```
-   * return (
-   *   <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)">
-   *   </DrawerLayoutAndroid>
-   * );
-   * ```
+   * @default `'white'`
    */
   drawerBackgroundColor?: ?ColorValue,
 
   /**
-   * Specifies the side of the screen from which the drawer will slide in.
+   * Side of the screen from which the drawer slides in.
+   *
+   * @default `'left'`
    */
   drawerPosition: ?('left' | 'right'),
 
   /**
-   * Specifies the width of the drawer, more precisely the width of the view that be pulled in
-   * from the edge of the window.
+   * Width of the drawer view.
    */
   drawerWidth?: ?number,
 
   /**
-   * Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
-   * - unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
-   * - locked-closed, meaning that the drawer will stay closed and not respond to gestures.
-   * - locked-open, meaning that the drawer will stay opened and not respond to gestures.
-   * The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
+   * Lock mode of the drawer. `'unlocked'` responds to touch gestures, `'locked-closed'` stays closed, `'locked-open'` stays open.
+   *
+   * @default `'unlocked'`
    */
   drawerLockMode?: ?('unlocked' | 'locked-closed' | 'locked-open'),
 
   /**
-   * Function called whenever there is an interaction with the navigation view.
+   * Called when there is an interaction with the navigation view.
    */
   onDrawerSlide?: ?(event: DrawerSlideEvent) => unknown,
 
   /**
-   * Function called when the drawer state has changed. The drawer can be in 3 states:
-   * - Idle, meaning there is no interaction with the navigation view happening at the time
-   * - Dragging, meaning there is currently an interaction with the navigation view
-   * - Settling, meaning that there was an interaction with the navigation view, and the
-   * navigation view is now finishing its closing or opening animation
+   * Called when the drawer state changes. States: idle, dragging, settling.
    */
   onDrawerStateChanged?: ?(state: DrawerStates) => unknown,
 
   /**
-   * Function called whenever the navigation view has been opened.
+   * Called when the navigation view has been opened.
    */
   onDrawerOpen?: ?() => unknown,
 
   /**
-   * Function called whenever the navigation view has been closed.
+   * Called when the navigation view has been closed.
    */
   onDrawerClose?: ?() => unknown,
 
   /**
-   * The navigation view that will be rendered to the side of the screen and can be pulled in.
+   * The navigation view that will be rendered to the side of the screen.
    */
   renderNavigationView: () => React.MixedElement,
 
   /**
-   * Make the drawer take the entire screen and draw the background of the
-   * status bar to allow it to open over the status bar. It will only have an
-   * effect on API 21+.
+   * Makes the drawer take the entire screen and draws the background of the status bar to allow it to open over the status bar. Only has effect on API 21+.
    */
   statusBarBackgroundColor?: ?ColorValue,
 }>;
@@ -136,3 +129,5 @@ export interface DrawerLayoutAndroidMethods {
   ): void;
   setNativeProps(nativeProps: Object): void;
 }
+
+export type DrawerLayoutAndroidInstance = DrawerLayoutAndroidMethods;