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

package/Libraries/Components/Touchable/TouchableHighlight.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {TVViewProps} from '../TV/TVViewPropTypes';
 import type {AccessibilityState} from '../View/ViewAccessibility';
@@ -20,36 +21,44 @@ import Pressability, {
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import StyleSheet, {type ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
+import warnOnce from '../../Utilities/warnOnce';
 import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 import * as React from 'react';
 import {cloneElement} from 'react';
 
+export type TouchableHighlightInstance = HostInstance;
+
 type TouchableHighlightBaseProps = Readonly<{
   /**
-   * Determines what the opacity of the wrapped view should be when touch is active.
+   * Opacity of the wrapped view when touch is active. Requires `underlayColor` to be set.
+   *
+   * @default `0.85`
    */
   activeOpacity?: ?number,
+
   /**
-   * The color of the underlay that will show through when the touch is active.
+   * Color of the underlay shown when touch is active.
    */
   underlayColor?: ?ColorValue,
-  /**
-   * @see https://reactnative.dev/docs/view#style
-   */
+
   style?: ?ViewStyleProp,
+
   /**
-   * Called immediately after the underlay is shown
+   * Called immediately after the underlay is shown.
    */
   onShowUnderlay?: ?() => void,
+
   /**
-   * Called immediately after the underlay is hidden
+   * Called immediately after the underlay is hidden.
    */
   onHideUnderlay?: ?() => void,
+
   testOnly_pressed?: ?boolean,
 
-  hostRef?: React.RefSetter<React.ElementRef<typeof View>>,
+  hostRef?: React.RefSetter<TouchableHighlightInstance>,
 }>;
 
+/** @build-types emit-as-interface Uniwind compatibility */
 export type TouchableHighlightProps = Readonly<{
   ...TouchableWithoutFeedbackProps,
   ...TVViewProps,
@@ -66,102 +75,6 @@ type TouchableHighlightState = Readonly<{
   extraStyles: ?ExtraStyles,
 }>;
 
-/**
- * A wrapper for making views respond properly to touches.
- * On press down, the opacity of the wrapped view is decreased, which allows
- * the underlay color to show through, darkening or tinting the view.
- *
- * The underlay comes from wrapping the child in a new View, which can affect
- * layout, and sometimes cause unwanted visual artifacts if not used correctly,
- * for example if the backgroundColor of the wrapped view isn't explicitly set
- * to an opaque color.
- *
- * TouchableHighlight must have one child (not zero or more than one).
- * If you wish to have several child components, wrap them in a View.
- *
- * Example:
- *
- * ```
- * renderButton: function() {
- *   return (
- *     <TouchableHighlight onPress={this._onPressButton}>
- *       <Image
- *         style={styles.button}
- *         source={require('./myButton.png')}
- *       />
- *     </TouchableHighlight>
- *   );
- * },
- * ```
- *
- *
- * ### Example
- *
- * ```ReactNativeWebPlayer
- * import React, { Component } from 'react'
- * import {
- *   AppRegistry,
- *   StyleSheet,
- *   TouchableHighlight,
- *   Text,
- *   View,
- * } from 'react-native'
- *
- * class App extends Component {
- *   constructor(props) {
- *     super(props)
- *     this.state = { count: 0 }
- *   }
- *
- *   onPress = () => {
- *     this.setState({
- *       count: this.state.count+1
- *     })
- *   }
- *
- *  render() {
- *     return (
- *       <View style={styles.container}>
- *         <TouchableHighlight
- *          style={styles.button}
- *          onPress={this.onPress}
- *         >
- *          <Text> Touch Here </Text>
- *         </TouchableHighlight>
- *         <View style={[styles.countContainer]}>
- *           <Text style={[styles.countText]}>
- *             { this.state.count !== 0 ? this.state.count: null}
- *           </Text>
- *         </View>
- *       </View>
- *     )
- *   }
- * }
- *
- * const styles = StyleSheet.create({
- *   container: {
- *     flex: 1,
- *     justifyContent: 'center',
- *     paddingHorizontal: 10
- *   },
- *   button: {
- *     alignItems: 'center',
- *     backgroundColor: '#DDDDDD',
- *     padding: 10
- *   },
- *   countContainer: {
- *     alignItems: 'center',
- *     padding: 10
- *   },
- *   countText: {
- *     color: '#FF00FF'
- *   }
- * })
- *
- * AppRegistry.registerComponent('App', () => App)
- * ```
- *
- */
 class TouchableHighlightImpl extends React.Component<
   TouchableHighlightProps,
   TouchableHighlightState,
@@ -294,6 +207,13 @@ class TouchableHighlightImpl extends React.Component<
 
   render(): React.Node {
     const child = React.Children.only<$FlowFixMe>(this.props.children);
+    if (__DEV__ && child.type === React.Fragment) {
+      warnOnce(
+        'TouchableHighlight-fragment',
+        'TouchableHighlight does not support React.Fragment as a child. ' +
+          'Wrap the children in a single host element such as <View>.',
+      );
+    }
 
     // BACKWARD-COMPATIBILITY: Focus and blur events were never supported before
     // adopting `Pressability`, so preserve that behavior.
@@ -352,8 +272,7 @@ class TouchableHighlightImpl extends React.Component<
         hitSlop={this.props.hitSlop}
         hasTVPreferredFocus={this.props.hasTVPreferredFocus === true}
         focusable={
-          this.props.focusable !== false &&
-          this.props.isTVSelectable !== false
+          this.props.focusable !== false && this.props.isTVSelectable !== false
         }
         tvParallaxProperties={this.props.tvParallaxProperties}
         nextFocusDown={tagForComponentOrHandle(this.props.nextFocusDown)}
@@ -365,12 +284,14 @@ class TouchableHighlightImpl extends React.Component<
         testID={this.props.testID}
         ref={this.props.hostRef}
         {...eventHandlers}>
-        {cloneElement(child, {
-          style: StyleSheet.compose(
-            child.props.style,
-            this.state.extraStyles?.child,
-          ),
-        })}
+        {child.type === React.Fragment
+          ? child
+          : cloneElement(child, {
+              style: StyleSheet.compose(
+                child.props.style,
+                this.state.extraStyles?.child,
+              ),
+            })}
         {__DEV__ ? (
           <PressabilityDebugView color="green" hitSlop={this.props.hitSlop} />
         ) : null}
@@ -399,14 +320,25 @@ class TouchableHighlightImpl extends React.Component<
   }
 }
 
+/**
+ * A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.
+ *
+ * The underlay comes from wrapping the child in a new View, which can affect layout.
+ *
+ * Must have exactly one child (not zero or more than one). If you wish to have several child components, wrap them in a View.
+ *
+ * If you need more extensive and future-proof touch handling, use `Pressable`.
+ *
+ * @see https://reactnative.dev/docs/touchablehighlight
+ */
 const TouchableHighlight: component(
-  ref?: React.RefSetter<React.ElementRef<typeof View>>,
+  ref?: React.RefSetter<TouchableHighlightInstance>,
   ...props: Readonly<Omit<TouchableHighlightProps, 'hostRef'>>
 ) = ({
   ref: hostRef,
   ...props
 }: {
-  ref?: React.RefSetter<React.ElementRef<typeof View>>,
+  ref?: React.RefSetter<TouchableHighlightInstance>,
   ...Readonly<Omit<TouchableHighlightProps, 'hostRef'>>,
 }) => <TouchableHighlightImpl {...props} hostRef={hostRef} />;
 

package/Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -31,18 +31,11 @@ export type TouchableNativeFeedbackProps = Readonly<{
   ...TouchableWithoutFeedbackProps,
   ...TVViewProps,
   /**
-   * Determines the type of background drawable that's going to be used to display feedback.
-   * It takes an object with type property and extra data depending on the type.
-   * It's recommended to use one of the following static methods to generate that dictionary:
-   *      1) TouchableNativeFeedback.SelectableBackground() - will create object that represents android theme's
-   *         default background for selectable elements (?android:attr/selectableItemBackground)
-   *      2) TouchableNativeFeedback.SelectableBackgroundBorderless() - will create object that represent android
-   *         theme's default background for borderless selectable elements
-   *         (?android:attr/selectableItemBackgroundBorderless). Available on android API level 21+
-   *      3) TouchableNativeFeedback.Ripple(color, borderless) - will create object that represents ripple drawable
-   *         with specified color (as a string). If property borderless evaluates to true the ripple will render
-   *         outside of the view bounds (see native actionbar buttons as an example of that behavior). This background
-   *         type is available on Android API level 21+
+   * Determines the type of background drawable used to display touch feedback. Use one of the static methods to generate this value:
+   *
+   * - `TouchableNativeFeedback.SelectableBackground()` - Default background for selectable elements.
+   * - `TouchableNativeFeedback.SelectableBackgroundBorderless()` - Default background for borderless selectable elements. API 21+.
+   * - `TouchableNativeFeedback.Ripple(color, borderless)` - Ripple drawable with the specified color.
    */
   background?: ?(
     | Readonly<{
@@ -60,14 +53,9 @@ export type TouchableNativeFeedbackProps = Readonly<{
       }>
   ),
   /**
-   * Set to true to add the ripple effect to the foreground of the view, instead
-   * of the background. This is useful if one of your child views has a
-   * background of its own, or you're e.g. displaying images, and you don't want
-   * the ripple to be covered by them.
+   * If `true`, adds the ripple effect to the foreground of the view instead of the background. Useful if a child view has its own background, or you are displaying images.
    *
-   * Check TouchableNativeFeedback.canUseNativeForeground() first, as this is
-   * only available on Android 6.0 and above. If you try to use this on older
-   * versions, this will fallback to background.
+   * Check `TouchableNativeFeedback.canUseNativeForeground()` first, as this is only available on Android 6.0 and above. On older versions, this falls back to background.
    */
   useForeground?: ?boolean,
 }>;
@@ -77,14 +65,12 @@ type TouchableNativeFeedbackState = Readonly<{
 }>;
 
 /**
- * A wrapper for making views respond properly to touches (Android only).
- * On Android this component uses native state drawable to display touch feedback.
- * At the moment it only supports having a single View instance as a child node,
- * as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
+ * A wrapper for making views respond properly to touches (Android only). Uses native state drawable to display touch feedback.
  *
- * Background drawable of native feedback touchable can be customized with background property.
+ * Supports only a single View instance as a child. If you need more extensive and future-proof touch handling, use `Pressable`.
  *
- * @see https://reactnative.dev/docs/touchablenativefeedback#content
+ * @see https://reactnative.dev/docs/touchablenativefeedback
+ * @platform android
  */
 class TouchableNativeFeedback extends React.Component<
   TouchableNativeFeedbackProps,
@@ -365,4 +351,6 @@ const getBackgroundProp =
 
 TouchableNativeFeedback.displayName = 'TouchableNativeFeedback';
 
+export type TouchableNativeFeedbackInstance = TouchableNativeFeedback;
+
 export default TouchableNativeFeedback;

package/Libraries/Components/Touchable/TouchableOpacity.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {TVViewProps} from '../TV/TVViewPropTypes';
 import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
@@ -23,15 +24,19 @@ import Platform from '../../Utilities/Platform';
 import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 import * as React from 'react';
 
+export type TouchableOpacityInstance = HostInstance;
+
 type TouchableOpacityBaseProps = Readonly<{
   /**
-   * Determines what the opacity of the wrapped view should be when touch is active.
-   * Defaults to 0.2
+   * Opacity of the wrapped view when touch is active.
+   *
+   * @default `0.2`
    */
   activeOpacity?: ?number,
+
   style?: ?Animated.WithAnimatedValue<ViewStyleProp>,
 
-  hostRef?: ?React.RefSetter<React.ElementRef<typeof Animated.View>>,
+  hostRef?: ?React.RefSetter<TouchableOpacityInstance>,
 }>;
 
 export type TouchableOpacityProps = Readonly<{
@@ -46,88 +51,13 @@ type TouchableOpacityState = Readonly<{
 }>;
 
 /**
- * A wrapper for making views respond properly to touches.
- * On press down, the opacity of the wrapped view is decreased, dimming it.
- *
- * Opacity is controlled by wrapping the children in an Animated.View, which is
- * added to the view hierarchy.  Be aware that this can affect layout.
- *
- * Example:
- *
- * ```
- * renderButton: function() {
- *   return (
- *     <TouchableOpacity onPress={this._onPressButton}>
- *       <Image
- *         style={styles.button}
- *         source={require('./myButton.png')}
- *       />
- *     </TouchableOpacity>
- *   );
- * },
- * ```
- * ### Example
- *
- * ```ReactNativeWebPlayer
- * import React, { Component } from 'react'
- * import {
- *   AppRegistry,
- *   StyleSheet,
- *   TouchableOpacity,
- *   Text,
- *   View,
- * } from 'react-native'
- *
- * class App extends Component {
- *   state = { count: 0 }
- *
- *   onPress = () => {
- *     this.setState(state => ({
- *       count: state.count + 1
- *     }));
- *   };
- *
- *  render() {
- *    return (
- *      <View style={styles.container}>
- *        <TouchableOpacity
- *          style={styles.button}
- *          onPress={this.onPress}>
- *          <Text> Touch Here </Text>
- *        </TouchableOpacity>
- *        <View style={[styles.countContainer]}>
- *          <Text style={[styles.countText]}>
- *             { this.state.count !== 0 ? this.state.count: null}
- *           </Text>
- *         </View>
- *       </View>
- *     )
- *   }
- * }
+ * A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.
  *
- * const styles = StyleSheet.create({
- *   container: {
- *     flex: 1,
- *     justifyContent: 'center',
- *     paddingHorizontal: 10
- *   },
- *   button: {
- *     alignItems: 'center',
- *     backgroundColor: '#DDDDDD',
- *     padding: 10
- *   },
- *   countContainer: {
- *     alignItems: 'center',
- *     padding: 10
- *   },
- *   countText: {
- *     color: '#FF00FF'
- *   }
- * })
+ * Opacity is controlled by wrapping the children in an `Animated.View`, which is added to the view hierarchy. Be aware that this can affect layout.
  *
- * AppRegistry.registerComponent('App', () => App)
- * ```
+ * If you need more extensive and future-proof touch handling, use `Pressable`.
  *
+ * @see https://reactnative.dev/docs/touchableopacity
  */
 class TouchableOpacity extends React.Component<
   TouchableOpacityProps,
@@ -338,13 +268,13 @@ class TouchableOpacity extends React.Component<
 }
 
 const Touchable: component(
-  ref?: React.RefSetter<React.ElementRef<typeof Animated.View>>,
+  ref?: React.RefSetter<TouchableOpacityInstance>,
   ...props: TouchableOpacityProps
 ) = ({
   ref,
   ...props
 }: {
-  ref?: React.RefSetter<React.ElementRef<typeof Animated.View>>,
+  ref?: React.RefSetter<TouchableOpacityInstance>,
   ...TouchableOpacityProps,
 }) => <TouchableOpacity {...props} hostRef={ref} />;
 

package/Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -39,6 +39,7 @@ export type TouchableWithoutFeedbackPropsAndroid = {
   touchSoundDisabled?: ?boolean,
 };
 
+/** @build-types emit-as-interface Expo compatibility */
 export type TouchableWithoutFeedbackProps = Readonly<
   {
     children?: ?React.Node,
@@ -159,9 +160,9 @@ const PASSTHROUGH_PROPS = [
 ] as const;
 
 /**
- * Do not use unless you have a very good reason.
- * All the elements that respond to press should have a visual feedback when touched.
- * This is one of the primary reason a "web" app doesn't feel "native".
+ * Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched.
+ *
+ * Supports only one child. If you need more extensive and future-proof touch handling, use `Pressable`.
  *
  * @see https://reactnative.dev/docs/touchablewithoutfeedback
  */

package/Libraries/Components/UnimplementedViews/UnimplementedNativeViewNativeComponent.js

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

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -194,6 +194,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * BackgroundImage
    */
+  backgroundImage: backgroundImageAttribute,
   experimental_backgroundImage: backgroundImageAttribute,
 
   /**