react-native-tvos 0.86.0-2 → 0.87.0-0

package/Libraries/Components/Switch/Switch.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {NativeSyntheticEvent} from '../../Types/CoreEventTypes';
 import type {AccessibilityState} from '../View/ViewAccessibility';
@@ -25,6 +26,8 @@ import SwitchNativeComponent, {
 import * as React from 'react';
 import {useLayoutEffect, useRef, useState} from 'react';
 
+export type SwitchInstance = HostInstance;
+
 export type SwitchPropsIOS = {
   /**
    * Background color when the switch is turned on.
@@ -57,58 +60,58 @@ export type SwitchChangeEvent = NativeSyntheticEvent<SwitchChangeEventData>;
 
 type SwitchPropsBase = {
   /**
-    If true the user won't be able to toggle the switch.
-
-    @default false
+   * If true, the user won't be able to toggle the switch.
+   *
+   * @default `false`
    */
   disabled?: ?boolean,
 
   /**
-      The value of the switch. If true the switch will be turned on.
-
-      @default false
-     */
+   * The value of the switch. If true the switch will be turned on.
+   *
+   * @default `false`
+   */
   value?: ?boolean,
 
   /**
-      Color of the foreground switch grip. If this is set on iOS, the switch grip will lose its drop shadow.
-     */
+   * Color of the foreground switch grip. If set on iOS, the switch grip
+   * loses its drop shadow.
+   */
   thumbColor?: ?ColorValue,
 
   /**
-      Custom colors for the switch track.
-
-      _iOS_: When the switch value is false, the track shrinks into the border. If you want to change the
-      color of the background exposed by the shrunken track, use
-       [`ios_backgroundColor`](https://reactnative.dev/docs/switch#ios_backgroundColor).
-     */
+   * Custom colors for the switch track. On iOS, when the switch value is
+   * false, the track shrinks into the border.
+   */
   trackColor?: ?Readonly<{
     false?: ?ColorValue,
     true?: ?ColorValue,
   }>,
 
   /**
-      On iOS, custom color for the background. This background color can be
-      seen either when the switch value is false or when the switch is
-      disabled (and the switch is translucent).
-     */
+   * Custom color for the background. Can be seen when the switch value is
+   * false or when the switch is disabled (and the switch is translucent).
+   *
+   * @platform ios
+   */
   ios_backgroundColor?: ?ColorValue,
 
   /**
-      Invoked when the user tries to change the value of the switch. Receives
-      the change event as an argument. If you want to only receive the new
-      value, use `onValueChange` instead.
-     */
+   * Invoked when the user tries to change the value of the switch. Receives
+   * the change event as an argument. Use `onValueChange` to receive just
+   * the new value instead.
+   */
   onChange?: ?(event: SwitchChangeEvent) => Promise<void> | void,
 
   /**
-      Invoked when the user tries to change the value of the switch. Receives
-      the new value as an argument. If you want to instead receive an event,
-      use `onChange`.
-     */
+   * Invoked when the user tries to change the value of the switch. Receives
+   * the new value as an argument. Use `onChange` to receive the event
+   * instead.
+   */
   onValueChange?: ?(value: boolean) => Promise<void> | void,
 };
 
+/** @build-types emit-as-interface Expo compatibility */
 export type SwitchProps = Readonly<{
   ...ViewProps,
   ...SwitchPropsIOS,
@@ -118,59 +121,59 @@ export type SwitchProps = Readonly<{
 const returnsFalse = () => false;
 const returnsTrue = () => true;
 
-type SwitchRef = React.ElementRef<
-  typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
->;
-
 /**
-  Renders a boolean input.
-
-  This is a controlled component that requires an `onValueChange`
-  callback that updates the `value` prop in order for the component to
-  reflect user actions. If the `value` prop is not updated, the
-  component will continue to render the supplied `value` prop instead of
-  the expected result of any user actions.
-
-  ```SnackPlayer name=Switch
-  import React, { useState } from "react";
-  import { View, Switch, StyleSheet } from "react-native";
-
-  const App = () => {
-    const [isEnabled, setIsEnabled] = useState(false);
-    const toggleSwitch = () => setIsEnabled(previousState => !previousState);
-
-    return (
-      <View style={styles.container}>
-        <Switch
-          trackColor={{ false: "#767577", true: "#81b0ff" }}
-          thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
-          ios_backgroundColor="#3e3e3e"
-          onValueChange={toggleSwitch}
-          value={isEnabled}
-        />
-      </View>
-    );
-  }
-
-  const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center"
-    }
-  });
-
-  export default App;
-  ```
+ * Renders a boolean input.
+ *
+ * This is a controlled component that requires an `onValueChange` callback
+ * that updates the `value` prop in order for the component to reflect user
+ * actions. If the `value` prop is not updated, the component will continue to
+ * render the supplied `value` prop instead of the expected result of any user
+ * actions.
+ *
+ * Example:
+ *
+ * ```tsx
+ * import React, {useState} from 'react';
+ * import {View, Switch, StyleSheet} from 'react-native';
+ *
+ * const App = () => {
+ *   const [isEnabled, setIsEnabled] = useState(false);
+ *   const toggleSwitch = () => setIsEnabled(previousState => !previousState);
+ *
+ *   return (
+ *     <View style={styles.container}>
+ *       <Switch
+ *         trackColor={{false: '#767577', true: '#81b0ff'}}
+ *         thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
+ *         ios_backgroundColor="#3e3e3e"
+ *         onValueChange={toggleSwitch}
+ *         value={isEnabled}
+ *       />
+ *     </View>
+ *   );
+ * };
+ *
+ * const styles = StyleSheet.create({
+ *   container: {
+ *     flex: 1,
+ *     alignItems: 'center',
+ *     justifyContent: 'center',
+ *   },
+ * });
+ *
+ * export default App;
+ * ```
+ *
+ * @see https://reactnative.dev/docs/switch
  */
 const Switch: component(
-  ref?: React.RefSetter<SwitchRef>,
+  ref?: React.RefSetter<SwitchInstance>,
   ...props: SwitchProps
 ) = function Switch({
   ref: forwardedRef,
   ...props
 }: {
-  ref?: React.RefSetter<SwitchRef>,
+  ref?: React.RefSetter<SwitchInstance>,
   ...SwitchProps,
 }): React.Node {
   const {
@@ -187,9 +190,7 @@ const Switch: component(
   const trackColorForFalse = trackColor?.false;
   const trackColorForTrue = trackColor?.true;
 
-  const nativeSwitchRef = useRef<React.ElementRef<
-    typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
-  > | null>(null);
+  const nativeSwitchRef = useRef<SwitchInstance | null>(null);
 
   const ref = useMergeRefs(nativeSwitchRef, forwardedRef);
 

package/Libraries/Components/Switch/SwitchNativeComponent.js

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

package/Libraries/Components/TV/TVEventHandler.js

@@ -25,7 +25,22 @@ type TVRemoteEventDefinitions = {
 let __nativeTVNavigationEventEmitter: ?NativeEventEmitter<TVRemoteEventDefinitions> =
   null;
 
-type TVEventHandlerCallback = (event: any) => void;
+type TVRemoteEventBody = {
+  state: string,
+  x: number,
+  y: number,
+  velocityX: number,
+  velocityY: number,
+};
+
+type TVRemoteEvent = {
+  eventType: string,
+  eventKeyAction: ?number,
+  tag: ?number,
+  body: ?TVRemoteEventBody,
+};
+
+type TVEventHandlerCallback = (event: TVRemoteEvent) => void;
 type TVEventHandlerType = {
   addListener: (callback: TVEventHandlerCallback) => EventSubscription,
 };

package/Libraries/Components/TextInput/InputAccessoryView.js

@@ -18,75 +18,27 @@ import useWindowDimensions from '../../Utilities/useWindowDimensions';
 import RCTInputAccessoryViewNativeComponent from './RCTInputAccessoryViewNativeComponent';
 import * as React from 'react';
 
-/**
- * Note: iOS only
- *
- * A component which enables customization of the keyboard input accessory view.
- * The input accessory view is displayed above the keyboard whenever a TextInput
- * has focus. This component can be used to create custom toolbars.
- *
- * To use this component wrap your custom toolbar with the
- * InputAccessoryView component, and set a nativeID. Then, pass that nativeID
- * as the inputAccessoryViewID of whatever TextInput you desire. A simple
- * example:
- *
- * ```ReactNativeWebPlayer
- * import React, { Component } from 'react';
- * import { AppRegistry, TextInput, InputAccessoryView, Button } from 'react-native';
- *
- * export default class UselessTextInput extends Component {
- *   constructor(props) {
- *     super(props);
- *     this.state = {text: 'Placeholder Text'};
- *   }
- *
- *   render() {
- *     const inputAccessoryViewID = "uniqueID";
- *     return (
- *       <View>
- *         <ScrollView keyboardDismissMode="interactive">
- *           <TextInput
- *             style={{
- *               padding: 10,
- *               paddingTop: 50,
- *             }}
- *             inputAccessoryViewID=inputAccessoryViewID
- *             onChangeText={text => this.setState({text})}
- *             value={this.state.text}
- *           />
- *         </ScrollView>
- *         <InputAccessoryView nativeID=inputAccessoryViewID>
- *           <Button
- *             onPress={() => this.setState({text: 'Placeholder Text'})}
- *             title="Reset Text"
- *           />
- *         </InputAccessoryView>
- *       </View>
- *     );
- *   }
- * }
- *
- * // skip this line if using Create React Native App
- * AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);
- * ```
- *
- * This component can also be used to create sticky text inputs (text inputs
- * which are anchored to the top of the keyboard). To do this, wrap a
- * TextInput with the InputAccessoryView component, and don't set a nativeID.
- * For an example, look at InputAccessoryViewExample.js in RNTester.
- */
-
+/** @build-types emit-as-interface Expo compatibility */
 export type InputAccessoryViewProps = Readonly<{
-  +children: React.Node,
+  readonly children: React.Node,
   /**
-   * An ID which is used to associate this `InputAccessoryView` to
-   * specified TextInput(s).
+   * An ID used to associate this `InputAccessoryView` to specified `TextInput`(s).
    */
   nativeID?: ?string,
   style?: ?ViewStyleProp,
   backgroundColor?: ?ColorValue,
 }>;
 
+/**
+ * A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars.
+ *
+ * To use this component, wrap your custom toolbar with `InputAccessoryView` and set a `nativeID`. Then, pass that `nativeID` as the `inputAccessoryViewID` of whatever `TextInput` you desire.
+ *
+ * This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a `TextInput` with `InputAccessoryView` and don't set a `nativeID`.
+ *
+ * @see https://reactnative.dev/docs/inputaccessoryview
+ * @platform ios
+ */
 const InputAccessoryView: React.ComponentType<InputAccessoryViewProps> = (
   props: InputAccessoryViewProps,
 ) => {

package/Libraries/Components/TextInput/RCTInputAccessoryViewNativeComponent.js

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

package/Libraries/Components/TextInput/TextInput.d.ts

@@ -501,6 +501,7 @@ export type TextInputSelectionChangeEvent =
  */
 export interface TextInputKeyPressEventData {
   key: string;
+  eventCount: number;
 }
 
 /**
@@ -515,6 +516,12 @@ export type TextInputKeyPressEvent =
 export interface TextInputChangeEventData extends TargetedEvent {
   eventCount: number;
   text: string;
+  selection?:
+    | {
+        start: number;
+        end: number;
+      }
+    | undefined;
 }
 
 /**
@@ -972,9 +979,9 @@ export interface TextInputProps
   style?: StyleProp<TextStyle> | undefined;
 
   /**
-   * Align the input text to the left, center, or right sides of the input field.
+   * Align the input text to the left, center, right, start, or end side of the input field.
    */
-  textAlign?: 'left' | 'center' | 'right' | undefined;
+  textAlign?: 'left' | 'center' | 'right' | 'start' | 'end' | undefined;
 
   /**
    * Used to locate this view in end-to-end tests

package/Libraries/Components/TextInput/TextInput.flow.js

@@ -507,6 +507,13 @@ export type TextInputAndroidProps = Readonly<{
    */
   textBreakStrategy?: ?('simple' | 'highQuality' | 'balanced'),
 
+  /**
+   * Align the input text to the top, center, or bottom of the field.
+   * Defaults to `'auto'`.
+   * @platform android
+   */
+  textAlignVertical?: ?('auto' | 'top' | 'bottom' | 'center'),
+
   /**
    * The color of the `TextInput` underline.
    * @platform android
@@ -1052,11 +1059,12 @@ type TextInputBaseProps = Readonly<{
   value?: ?Stringish,
 
   /**
-   * Align the input text to the left, center, or right sides of the input field.
+   * Align the input text to the left, center, right, start, or end side of the input field.
    */
-  textAlign?: ?('left' | 'center' | 'right'),
+  textAlign?: ?('left' | 'center' | 'right' | 'start' | 'end'),
 }>;
 
+/** @build-types emit-as-interface Uniwind compatibility */
 export type TextInputProps = Readonly<{
   ...Omit<ViewProps, 'style' | 'experimental_accessibilityOrder'>,
   ...TextInputIOSProps,
@@ -1069,9 +1077,18 @@ export type TextInputProps = Readonly<{
  * It isn't technically a class but this is the most elegant way to type it.
  */
 declare class _TextInputInstance extends ReactNativeElement {
+  /**
+   * Removes all text from the input.
+   */
   clear(): void;
+  /**
+   * Returns if the input is currently focused.
+   */
   isFocused(): boolean;
   getNativeRef(): ?ReactNativeElement;
+  /**
+   * Sets the start and end positions of text selection.
+   */
   setSelection(start: number, end: number): void;
 }
 

package/Libraries/Components/TextInput/TextInput.js

@@ -118,6 +118,7 @@ export type {
   TextInputKeyPressEvent,
   TextInputProps,
   TextInputSelectionChangeEvent,
+  TextInputInstance,
   TextInputSubmitEditingEvent,
 };
 
@@ -244,117 +245,6 @@ function useTextInputStateSynchronization({
   return {setLastNativeSelection, setLastNativeText};
 }
 
-/**
- * A foundational component for inputting text into the app via a
- * keyboard. Props provide configurability for several features, such as
- * auto-correction, auto-capitalization, placeholder text, and different keyboard
- * types, such as a numeric keypad.
- *
- * The simplest use case is to plop down a `TextInput` and subscribe to the
- * `onChangeText` events to read the user input. There are also other events,
- * such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple
- * example:
- *
- * ```ReactNativeWebPlayer
- * import React, { Component } from 'react';
- * import { AppRegistry, TextInput } from 'react-native';
- *
- * export default class UselessTextInput extends Component {
- *   constructor(props) {
- *     super(props);
- *     this.state = { text: 'Useless Placeholder' };
- *   }
- *
- *   render() {
- *     return (
- *       <TextInput
- *         style={{height: 40, borderColor: 'gray', borderWidth: 1}}
- *         onChangeText={(text) => this.setState({text})}
- *         value={this.state.text}
- *       />
- *     );
- *   }
- * }
- *
- * // skip this line if using Create React Native App
- * AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);
- * ```
- *
- * Two methods exposed via the native element are .focus() and .blur() that
- * will focus or blur the TextInput programmatically.
- *
- * Note that some props are only available with `multiline={true/false}`.
- * Additionally, border styles that apply to only one side of the element
- * (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if
- * `multiline=false`. To achieve the same effect, you can wrap your `TextInput`
- * in a `View`:
- *
- * ```ReactNativeWebPlayer
- * import React, { Component } from 'react';
- * import { AppRegistry, View, TextInput } from 'react-native';
- *
- * class UselessTextInput extends Component {
- *   render() {
- *     return (
- *       <TextInput
- *         {...this.props} // Inherit any props passed to it; e.g., multiline, numberOfLines below
- *         editable={true}
- *         maxLength={40}
- *       />
- *     );
- *   }
- * }
- *
- * export default class UselessTextInputMultiline extends Component {
- *   constructor(props) {
- *     super(props);
- *     this.state = {
- *       text: 'Useless Multiline Placeholder',
- *     };
- *   }
- *
- *   // If you type something in the text box that is a color, the background will change to that
- *   // color.
- *   render() {
- *     return (
- *      <View style={{
- *        backgroundColor: this.state.text,
- *        borderBottomColor: '#000000',
- *        borderBottomWidth: 1 }}
- *      >
- *        <UselessTextInput
- *          multiline={true}
- *          numberOfLines={4}
- *          onChangeText={(text) => this.setState({text})}
- *          value={this.state.text}
- *        />
- *      </View>
- *     );
- *   }
- * }
- *
- * // skip these lines if using Create React Native App
- * AppRegistry.registerComponent(
- *  'AwesomeProject',
- *  () => UselessTextInputMultiline
- * );
- * ```
- *
- * `TextInput` has by default a border at the bottom of its view. This border
- * has its padding set by the background image provided by the system, and it
- * cannot be changed. Solutions to avoid this is to either not set height
- * explicitly, case in which the system will take care of displaying the border
- * in the correct position, or to not display the border by setting
- * `underlineColorAndroid` to transparent.
- *
- * Note that on Android performing text selection in input can change
- * app's activity `windowSoftInputMode` param to `adjustResize`.
- * This may cause issues with components that have position: 'absolute'
- * while keyboard is active. To avoid this behavior either specify `windowSoftInputMode`
- * in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html )
- * or control this param programmatically with native code.
- *
- */
 function InternalTextInput(props: TextInputProps): React.Node {
   const {
     'aria-busy': ariaBusy,
@@ -906,6 +796,121 @@ const autoCompleteWebToTextContentTypeMap = {
   username: 'username',
 } as const;
 
+/**
+ * A foundational component for inputting text into the app via a
+ * keyboard. Props provide configurability for several features, such as
+ * auto-correction, auto-capitalization, placeholder text, and different keyboard
+ * types, such as a numeric keypad.
+ *
+ * The simplest use case is to plop down a `TextInput` and subscribe to the
+ * `onChangeText` events to read the user input. There are also other events,
+ * such as `onSubmitEditing` and `onFocus` that can be subscribed to.
+ *
+ * Example:
+ *
+ * ```tsx
+ * import React, { Component } from 'react';
+ * import { AppRegistry, TextInput } from 'react-native';
+ *
+ * export default class UselessTextInput extends Component {
+ *   constructor(props) {
+ *     super(props);
+ *     this.state = { text: 'Useless Placeholder' };
+ *   }
+ *
+ *   render() {
+ *     return (
+ *       <TextInput
+ *         style={{height: 40, borderColor: 'gray', borderWidth: 1}}
+ *         onChangeText={(text) => this.setState({text})}
+ *         value={this.state.text}
+ *       />
+ *     );
+ *   }
+ * }
+ *
+ * // skip this line if using Create React Native App
+ * AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);
+ * ```
+ *
+ * Two methods exposed via the native element are .focus() and .blur() that
+ * will focus or blur the TextInput programmatically.
+ *
+ * Note that some props are only available with `multiline={true/false}`.
+ * Additionally, border styles that apply to only one side of the element
+ * (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if
+ * `multiline=false`. To achieve the same effect, you can wrap your `TextInput`
+ * in a `View`:
+ *
+ * Example:
+ *
+ * ```tsx
+ * import React, { Component } from 'react';
+ * import { AppRegistry, View, TextInput } from 'react-native';
+ *
+ * class UselessTextInput extends Component {
+ *   render() {
+ *     return (
+ *       <TextInput
+ *         {...this.props} // Inherit any props passed to it; e.g., multiline, numberOfLines below
+ *         editable={true}
+ *         maxLength={40}
+ *       />
+ *     );
+ *   }
+ * }
+ *
+ * export default class UselessTextInputMultiline extends Component {
+ *   constructor(props) {
+ *     super(props);
+ *     this.state = {
+ *       text: 'Useless Multiline Placeholder',
+ *     };
+ *   }
+ *
+ *   // If you type something in the text box that is a color, the background will change to that
+ *   // color.
+ *   render() {
+ *     return (
+ *      <View style={{
+ *        backgroundColor: this.state.text,
+ *        borderBottomColor: '#000000',
+ *        borderBottomWidth: 1 }}
+ *      >
+ *        <UselessTextInput
+ *          multiline={true}
+ *          numberOfLines={4}
+ *          onChangeText={(text) => this.setState({text})}
+ *          value={this.state.text}
+ *        />
+ *      </View>
+ *     );
+ *   }
+ * }
+ *
+ * // skip these lines if using Create React Native App
+ * AppRegistry.registerComponent(
+ *  'AwesomeProject',
+ *  () => UselessTextInputMultiline
+ * );
+ * ```
+ *
+ * `TextInput` has by default a border at the bottom of its view. This border
+ * has its padding set by the background image provided by the system, and it
+ * cannot be changed. Solutions to avoid this is to either not set height
+ * explicitly, case in which the system will take care of displaying the border
+ * in the correct position, or to not display the border by setting
+ * `underlineColorAndroid` to transparent.
+ *
+ * Note that on Android performing text selection in input can change
+ * app's activity `windowSoftInputMode` param to `adjustResize`.
+ * This may cause issues with components that have position: 'absolute'
+ * while keyboard is active. To avoid this behavior either specify `windowSoftInputMode`
+ * in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html )
+ * or control this param programmatically with native code.
+ *
+ * @see https://reactnative.dev/docs/textinput
+ */
 const TextInput: component(
   ref?: React.RefSetter<TextInputInstance>,
   ...props: React.ElementConfig<typeof InternalTextInput>