react-native-tvos 0.64.2-2 → 0.66.3-0

package/Libraries/Components/TextInput/TextInputNativeCommands.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import * as React from 'react';
 
 import type {Int32} from '../../Types/CodegenTypes';

package/Libraries/Components/TextInput/TextInputState.js

@@ -12,8 +12,6 @@
 // TextInputs. All calls relating to the keyboard should be funneled
 // through here.
 
-'use strict';
-
 const React = require('react');
 const Platform = require('../../Utilities/Platform');
 const {findNodeHandle} = require('../../Renderer/shims/ReactNative');
@@ -112,7 +110,7 @@ function blurTextInput(textField: ?ComponentRef) {
   if (typeof textField === 'number') {
     if (__DEV__) {
       console.error(
-        'focusTextInput must be called with a host component. Passing a react tag is deprecated.',
+        'blurTextInput must be called with a host component. Passing a react tag is deprecated.',
       );
     }
 

package/Libraries/Components/ToastAndroid/NativeToastAndroid.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import type {TurboModule} from '../../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
 

package/Libraries/Components/ToastAndroid/ToastAndroid.android.js

@@ -8,7 +8,6 @@
  * @flow strict-local
  */
 
-'use strict';
 import NativeToastAndroid from './NativeToastAndroid';
 
 /**

package/Libraries/Components/Touchable/BoundingDimensions.js

@@ -8,8 +8,7 @@
  */
 
 'use strict';
-
-const PooledClass = require('./PooledClass');
+import PooledClass from './PooledClass';
 
 const twoArgumentPooler = PooledClass.twoArgumentPooler;
 

package/Libraries/Components/Touchable/PooledClass.js

@@ -9,8 +9,7 @@
  */
 
 'use strict';
-
-const invariant = require('invariant');
+import invariant from 'invariant';
 
 /**
  * Static poolers. Several custom versions for each potential number of

package/Libraries/Components/Touchable/Position.js

@@ -8,8 +8,7 @@
  */
 
 'use strict';
-
-const PooledClass = require('./PooledClass');
+import PooledClass from './PooledClass';
 
 const twoArgumentPooler = PooledClass.twoArgumentPooler;
 

package/Libraries/Components/Touchable/Touchable.js

@@ -8,21 +8,18 @@
  * @format
  */
 
-'use strict';
-
-const BoundingDimensions = require('./BoundingDimensions');
-const Platform = require('../../Utilities/Platform');
-const Position = require('./Position');
-const React = require('react');
-const ReactNative = require('../../Renderer/shims/ReactNative');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const TVEventHandler = require('../AppleTV/TVEventHandler');
-const UIManager = require('../../ReactNative/UIManager');
-const View = require('../View/View');
-const SoundManager = require('../Sound/SoundManager');
-
-const normalizeColor = require('../../StyleSheet/normalizeColor');
-
+import * as React from 'react';
+import ReactNative from '../../Renderer/shims/ReactNative';
+import BoundingDimensions from './BoundingDimensions';
+import Platform from '../../Utilities/Platform';
+import Position from './Position';
+import UIManager from '../../ReactNative/UIManager';
+import SoundManager from '../Sound/SoundManager';
+import TVEventHandler from '../AppleTV/TVEventHandler';
+
+import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
+
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {PressEvent} from '../../Types/CoreEventTypes';
 
@@ -444,6 +441,7 @@ const TouchableMixin = {
    * @param {SyntheticEvent} e Synthetic event from event system.
    *
    */
+  // $FlowFixMe[signature-verification-failure]
   touchableHandleResponderGrant: function(e: PressEvent) {
     const dispatchID = e.currentTarget;
     // Since e is used in a callback invoked on another event loop
@@ -485,6 +483,7 @@ const TouchableMixin = {
   /**
    * Place as callback for a DOM element's `onResponderRelease` event.
    */
+  // $FlowFixMe[signature-verification-failure]
   touchableHandleResponderRelease: function(e: PressEvent) {
     this.pressInLocation = null;
     this._receiveSignal(Signals.RESPONDER_RELEASE, e);
@@ -493,6 +492,7 @@ const TouchableMixin = {
   /**
    * Place as callback for a DOM element's `onResponderTerminate` event.
    */
+  // $FlowFixMe[signature-verification-failure]
   touchableHandleResponderTerminate: function(e: PressEvent) {
     this.pressInLocation = null;
     this._receiveSignal(Signals.RESPONDER_TERMINATED, e);
@@ -501,6 +501,7 @@ const TouchableMixin = {
   /**
    * Place as callback for a DOM element's `onResponderMove` event.
    */
+  // $FlowFixMe[signature-verification-failure]
   touchableHandleResponderMove: function(e: PressEvent) {
     // Measurement may not have returned yet.
     if (!this.state.touchable.positionOnActivate) {
@@ -586,6 +587,7 @@ const TouchableMixin = {
    * element that was blurred just prior to this. This can be overridden when
    * using `Touchable.Mixin.withoutDefaultFocusAndBlur`.
    */
+  // $FlowFixMe[signature-verification-failure]
   touchableHandleFocus: function(e: Event) {
     this.props.onFocus && this.props.onFocus(e);
   },
@@ -598,6 +600,7 @@ const TouchableMixin = {
    * This can be overridden when using
    * `Touchable.Mixin.withoutDefaultFocusAndBlur`.
    */
+  // $FlowFixMe[signature-verification-failure]
   touchableHandleBlur: function(e: Event) {
     this.props.onBlur && this.props.onBlur(e);
   },
@@ -691,6 +694,7 @@ const TouchableMixin = {
     }
   },
 
+  // $FlowFixMe[signature-verification-failure]
   _handleQueryLayout: function(
     l: number,
     t: number,
@@ -717,11 +721,13 @@ const TouchableMixin = {
     );
   },
 
+  // $FlowFixMe[signature-verification-failure]
   _handleDelay: function(e: PressEvent) {
     this.touchableDelayTimeout = null;
     this._receiveSignal(Signals.DELAY, e);
   },
 
+  // $FlowFixMe[signature-verification-failure]
   _handleLongDelay: function(e: PressEvent) {
     this.longPressDelayTimeout = null;
     const curState = this.state.touchable.touchState;
@@ -741,6 +747,7 @@ const TouchableMixin = {
    * @throws Error if invalid state transition or unrecognized signal.
    * @sideeffects
    */
+  // $FlowFixMe[signature-verification-failure]
   _receiveSignal: function(signal: Signal, e: PressEvent) {
     const responderID = this.state.touchable.responderID;
     const curState = this.state.touchable.touchState;
@@ -792,6 +799,7 @@ const TouchableMixin = {
     );
   },
 
+  // $FlowFixMe[signature-verification-failure]
   _savePressInLocation: function(e: PressEvent) {
     const touch = extractSingleTouch(e.nativeEvent);
     const pageX = touch && touch.pageX;
@@ -823,6 +831,7 @@ const TouchableMixin = {
    * @param {Event} e Native event.
    * @sideeffects
    */
+  // $FlowFixMe[signature-verification-failure]
   _performSideEffectsForTransition: function(
     curState: State,
     nextState: State,
@@ -884,11 +893,13 @@ const TouchableMixin = {
     this.touchableDelayTimeout = null;
   },
 
+  // $FlowFixMe[signature-verification-failure]
   _startHighlight: function(e: PressEvent) {
     this._savePressInLocation(e);
     this.touchableHandleActivePressIn && this.touchableHandleActivePressIn(e);
   },
 
+  // $FlowFixMe[signature-verification-failure]
   _endHighlight: function(e: PressEvent) {
     if (this.touchableHandleActivePressOut) {
       if (
@@ -922,7 +933,6 @@ TouchableMixin.withoutDefaultFocusAndBlur = TouchableMixinWithoutDefaultFocusAnd
 
 const Touchable = {
   Mixin: TouchableMixin,
-  TOUCH_TARGET_DEBUG: false, // Highlights all touchable targets. Toggle with Inspector.
   /**
    * Renders a debugging overlay to visualize touch target with hitSlop (might not work on Android).
    */
@@ -930,54 +940,15 @@ const Touchable = {
     color,
     hitSlop,
   }: {
-    color: string | number,
+    color: ColorValue,
     hitSlop: EdgeInsetsProp,
     ...
   }): null | React.Node => {
-    if (!Touchable.TOUCH_TARGET_DEBUG) {
-      return null;
-    }
-    if (!__DEV__) {
-      throw Error(
-        'Touchable.TOUCH_TARGET_DEBUG should not be enabled in prod!',
-      );
-    }
-    const debugHitSlopStyle = {};
-    hitSlop = hitSlop || {top: 0, bottom: 0, left: 0, right: 0};
-    for (const key in hitSlop) {
-      debugHitSlopStyle[key] = -hitSlop[key];
+    if (__DEV__) {
+      return <PressabilityDebugView color={color} hitSlop={hitSlop} />;
     }
-    const normalizedColor = normalizeColor(color);
-    if (typeof normalizedColor !== 'number') {
-      return null;
-    }
-    const hexColor =
-      '#' + ('00000000' + normalizedColor.toString(16)).substr(-8);
-    return (
-      <View
-        pointerEvents="none"
-        style={[
-          styles.debug,
-          /* $FlowFixMe(>=0.111.0 site=react_native_fb) This comment suppresses
-           * an error found when Flow v0.111 was deployed. To see the error,
-           * delete this comment and run Flow. */
-          {
-            borderColor: hexColor.slice(0, -2) + '55', // More opaque
-            backgroundColor: hexColor.slice(0, -2) + '0F', // Less opaque
-            ...debugHitSlopStyle,
-          },
-        ]}
-      />
-    );
+    return null;
   },
 };
 
-const styles = StyleSheet.create({
-  debug: {
-    position: 'absolute',
-    borderWidth: 1,
-    borderStyle: 'dashed',
-  },
-});
-
 module.exports = Touchable;

package/Libraries/Components/Touchable/TouchableBounce.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import Pressability, {
   type PressabilityConfig,
 } from '../../Pressability/Pressability';

package/Libraries/Components/Touchable/TouchableHighlight.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import Pressability, {
   type PressabilityConfig,
 } from '../../Pressability/Pressability';
@@ -166,7 +164,10 @@ class TouchableHighlight extends React.Component<Props, State> {
   _createPressabilityConfig(): PressabilityConfig {
     return {
       cancelable: !this.props.rejectResponderTermination,
-      disabled: this.props.disabled,
+      disabled:
+        this.props.disabled != null
+          ? this.props.disabled
+          : this.props.accessibilityState?.disabled,
       hitSlop: this.props.hitSlop,
       delayLongPress: this.props.delayLongPress,
       delayPressIn: this.props.delayPressIn,
@@ -284,13 +285,21 @@ class TouchableHighlight extends React.Component<Props, State> {
       ...eventHandlersWithoutBlurAndFocus
     } = this.state.pressability.getEventHandlers();
 
+    const accessibilityState =
+      this.props.disabled != null
+        ? {
+            ...this.props.accessibilityState,
+            disabled: this.props.disabled,
+          }
+        : this.props.accessibilityState;
+
     return (
       <View
         accessible={this.props.accessible !== false}
         accessibilityLabel={this.props.accessibilityLabel}
         accessibilityHint={this.props.accessibilityHint}
         accessibilityRole={this.props.accessibilityRole}
-        accessibilityState={this.props.accessibilityState}
+        accessibilityState={accessibilityState}
         accessibilityValue={this.props.accessibilityValue}
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}
@@ -354,7 +363,7 @@ class TouchableHighlight extends React.Component<Props, State> {
           }
         },
         onPress: event => {
-          if (this.props.onPress != null) {
+          if (this.props.onPress != null && Platform.OS !== 'android') {
             this.props.onPress(event);
           }
         },
@@ -380,6 +389,13 @@ class TouchableHighlight extends React.Component<Props, State> {
   }
 }
 
-module.exports = (React.forwardRef((props, hostRef) => (
+const Touchable = (React.forwardRef((props, hostRef) => (
   <TouchableHighlight {...props} hostRef={hostRef} />
-)): React.AbstractComponent<$ReadOnly<$Diff<Props, {|hostRef: mixed|}>>>);
+)): React.AbstractComponent<
+  $ReadOnly<$Diff<Props, {|hostRef: React.Ref<typeof View>|}>>,
+  React.ElementRef<typeof View>,
+>);
+
+Touchable.displayName = 'TouchableHighlight';
+
+module.exports = Touchable;

package/Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import Pressability, {
   type PressabilityConfig,
 } from '../../Pressability/Pressability';
@@ -173,7 +171,10 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
   _createPressabilityConfig(): PressabilityConfig {
     return {
       cancelable: !this.props.rejectResponderTermination,
-      disabled: this.props.disabled,
+      disabled:
+        this.props.disabled != null
+          ? this.props.disabled
+          : this.props.accessibilityState?.disabled,
       hitSlop: this.props.hitSlop,
       delayLongPress: this.props.delayLongPress,
       delayPressIn: this.props.delayPressIn,
@@ -185,8 +186,8 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
       onPress: this.props.onPress,
       onPressIn: event => {
         if (Platform.OS === 'android') {
-          this._dispatchPressedStateChange(true);
           this._dispatchHotspotUpdate(event);
+          this._dispatchPressedStateChange(true);
         }
         if (this.props.onPressIn != null) {
           this.props.onPressIn(event);
@@ -260,6 +261,14 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
       ...eventHandlersWithoutBlurAndFocus
     } = this.state.pressability.getEventHandlers();
 
+    const accessibilityState =
+      this.props.disabled != null
+        ? {
+            ...this.props.accessibilityState,
+            disabled: this.props.disabled,
+          }
+        : this.props.accessibilityState;
+
     return React.cloneElement(
       element,
       {
@@ -274,7 +283,7 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
         accessibilityHint: this.props.accessibilityHint,
         accessibilityLabel: this.props.accessibilityLabel,
         accessibilityRole: this.props.accessibilityRole,
-        accessibilityState: this.props.accessibilityState,
+        accessibilityState: accessibilityState,
         accessibilityActions: this.props.accessibilityActions,
         onAccessibilityAction: this.props.onAccessibilityAction,
         accessibilityValue: this.props.accessibilityValue,
@@ -346,4 +355,6 @@ const getBackgroundProp =
           : {nativeBackgroundAndroid: background}
     : (background, useForeground) => null;
 
+TouchableNativeFeedback.displayName = 'TouchableNativeFeedback';
+
 module.exports = TouchableNativeFeedback;

package/Libraries/Components/Touchable/TouchableOpacity.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import Pressability, {
   type PressabilityConfig,
 } from '../../Pressability/Pressability';
@@ -43,7 +41,7 @@ type Props = $ReadOnly<{|
   activeOpacity?: ?number,
   style?: ?ViewStyleProp,
 
-  hostRef: React.Ref<typeof Animated.View>,
+  hostRef?: ?React.Ref<typeof Animated.View>,
 |}>;
 
 type State = $ReadOnly<{|
@@ -146,7 +144,7 @@ class TouchableOpacity extends React.Component<Props, State> {
   _createPressabilityConfig(): PressabilityConfig {
     return {
       cancelable: !this.props.rejectResponderTermination,
-      disabled: this.props.disabled,
+      disabled: this.props.disabled ?? this.props.accessibilityState?.disabled,
       hitSlop: this.props.hitSlop,
       delayLongPress: this.props.delayLongPress,
       delayPressIn: this.props.delayPressIn,
@@ -197,6 +195,7 @@ class TouchableOpacity extends React.Component<Props, State> {
     Animated.timing(this.state.anim, {
       toValue,
       duration,
+      // $FlowFixMe[method-unbinding]
       easing: Easing.inOut(Easing.quad),
       useNativeDriver: true,
     }).start();
@@ -224,13 +223,21 @@ class TouchableOpacity extends React.Component<Props, State> {
       ...eventHandlersWithoutBlurAndFocus
     } = this.state.pressability.getEventHandlers();
 
+    const accessibilityState =
+      this.props.disabled != null
+        ? {
+            ...this.props.accessibilityState,
+            disabled: this.props.disabled,
+          }
+        : this.props.accessibilityState;
+
     return (
       <Animated.View
         accessible={this.props.accessible !== false}
         accessibilityLabel={this.props.accessibilityLabel}
         accessibilityHint={this.props.accessibilityHint}
         accessibilityRole={this.props.accessibilityRole}
-        accessibilityState={this.props.accessibilityState}
+        accessibilityState={accessibilityState}
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}
         accessibilityValue={this.props.accessibilityValue}
@@ -306,6 +313,10 @@ class TouchableOpacity extends React.Component<Props, State> {
   }
 }
 
-module.exports = (React.forwardRef((props, hostRef) => (
-  <TouchableOpacity {...props} hostRef={hostRef} />
-)): React.AbstractComponent<$ReadOnly<$Diff<Props, {|hostRef: mixed|}>>>);
+const Touchable = (React.forwardRef((props, ref) => (
+  <TouchableOpacity {...props} hostRef={ref} />
+)): React.AbstractComponent<Props, React.ElementRef<typeof Animated.View>>);
+
+Touchable.displayName = 'TouchableOpacity';
+
+module.exports = Touchable;

package/Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -8,8 +8,6 @@
  * @format
  */
 
-'use strict';
-
 import Pressability, {
   type PressabilityConfig,
 } from '../../Pressability/Pressability';
@@ -80,7 +78,6 @@ const PASSTHROUGH_PROPS = [
   'accessibilityLabel',
   'accessibilityLiveRegion',
   'accessibilityRole',
-  'accessibilityState',
   'accessibilityValue',
   'accessibilityViewIsModal',
   'hitSlop',
@@ -122,6 +119,13 @@ class TouchableWithoutFeedback extends React.Component<Props, State> {
     const elementProps: {[string]: mixed, ...} = {
       ...eventHandlersWithoutBlurAndFocus,
       accessible: this.props.accessible !== false,
+      accessibilityState:
+        this.props.disabled != null
+          ? {
+              ...this.props.accessibilityState,
+              disabled: this.props.disabled,
+            }
+          : this.props.accessibilityState,
       focusable:
         this.props.focusable !== false && this.props.onPress !== undefined,
     };
@@ -174,7 +178,10 @@ class TouchableWithoutFeedback extends React.Component<Props, State> {
 function createPressabilityConfig(props: Props): PressabilityConfig {
   return {
     cancelable: !props.rejectResponderTermination,
-    disabled: props.disabled,
+    disabled:
+      props.disabled !== null
+        ? props.disabled
+        : props.accessibilityState?.disabled,
     hitSlop: props.hitSlop,
     delayLongPress: props.delayLongPress,
     delayPressIn: props.delayPressIn,
@@ -191,4 +198,6 @@ function createPressabilityConfig(props: Props): PressabilityConfig {
   };
 }
 
+TouchableWithoutFeedback.displayName = 'TouchableWithoutFeedback';
+
 module.exports = TouchableWithoutFeedback;

package/Libraries/Components/Touchable/ensurePositiveDelayProps.js

@@ -9,8 +9,7 @@
  */
 
 'use strict';
-
-const invariant = require('invariant');
+import invariant from 'invariant';
 
 const ensurePositiveDelayProps = function(props: any) {
   invariant(

package/Libraries/Components/UnimplementedViews/UnimplementedNativeViewNativeComponent.js

@@ -8,8 +8,6 @@
  * @flow strict-local
  */
 
-'use strict';
-
 import type {WithDefault} from '../../Types/CodegenTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 

package/Libraries/Components/UnimplementedViews/UnimplementedView.js

@@ -9,9 +9,8 @@
  */
 
 'use strict';
-
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
+import * as React from 'react';
+import StyleSheet from '../../StyleSheet/StyleSheet';
 
 /**
  * Common implementation for a simple stubbed view. Simply applies the view's styles to the inner