react-native-tvos 0.77.1-0 → 0.78.0-0

package/Libraries/Components/TextInput/TextInput.js

@@ -261,6 +261,12 @@ export type enterKeyHintType =
 type PasswordRules = string;
 
 type IOSProps = $ReadOnly<{|
+  /**
+   * If true, the keyboard shortcuts (undo/redo and copy buttons) are disabled. The default value is false.
+   * @platform ios
+   */
+  disableKeyboardShortcuts?: ?boolean,
+
   /**
    * When the clear button should appear on the right side of the text view.
    * This property is supported only for single-line TextInput component.

package/Libraries/Components/View/ViewPropTypes.d.ts

@@ -223,12 +223,11 @@ export interface ViewProps
   nativeID?: string | undefined;
 
   /**
-   * Contols whether this view, and its transitive children, are laid in a way
-   * consistent with web browsers ('strict'), or consistent with existing
-   * React Native code which may rely on incorrect behavior ('classic').
+   * Invoked on TV focus
    */
-  experimental_layoutConformance?: 'strict' | 'classic' | undefined;
-
   readonly onFocus?: BubblingEventHandler<NativeFocusEvent> | undefined;
+  /**
+   * Invoked on TV blur
+   */
   readonly onBlur?: BubblingEventHandler<NativeBlurEvent> | undefined;
 }

package/Libraries/Components/View/ViewPropTypes.js

@@ -579,15 +579,6 @@ export type ViewProps = $ReadOnly<{|
    */
   collapsableChildren?: ?boolean,
 
-  /**
-   * Contols whether this view, and its transitive children, are laid in a way
-   * consistent with web browsers ('strict'), or consistent with existing
-   * React Native code which may rely on incorrect behavior ('classic').
-   *
-   * This prop only works when using Fabric.
-   */
-  experimental_layoutConformance?: ?('strict' | 'classic'),
-
   /**
    * Used to locate this view from native classes. Has precedence over `nativeID` prop.
    *

package/Libraries/Core/ReactNativeVersion.js

@@ -15,8 +15,8 @@ const version: $ReadOnly<{
   prerelease: string | null,
 }> = {
   major: 0,
-  minor: 77,
-  patch: 1,
+  minor: 78,
+  patch: 0,
   prerelease: '0',
 };
 

package/Libraries/Core/setUpBatchedBridge.js

@@ -10,27 +10,12 @@
 
 'use strict';
 
-let registerModule;
-if (global.RN$Bridgeless === true && global.RN$registerCallableModule) {
-  registerModule = global.RN$registerCallableModule;
-} else {
-  const BatchedBridge = require('../BatchedBridge/BatchedBridge');
-  registerModule = (
-    moduleName: string,
-    /* $FlowFixMe[missing-local-annot] The type annotation(s) required by
-     * Flow's LTI update could not be added via codemod */
-    factory,
-  ) => BatchedBridge.registerLazyCallableModule(moduleName, factory);
-}
+import registerModule from './registerCallableModule';
 
 registerModule('Systrace', () => require('../Performance/Systrace'));
 if (!(global.RN$Bridgeless === true)) {
   registerModule('JSTimers', () => require('./Timers/JSTimers'));
 }
-registerModule('HeapCapture', () => require('../HeapCapture/HeapCapture'));
-registerModule('SamplingProfiler', () =>
-  require('../Performance/SamplingProfiler'),
-);
 registerModule('RCTLog', () => require('../Utilities/RCTLog'));
 registerModule(
   'RCTDeviceEventEmitter',

package/Libraries/EventEmitter/RCTEventEmitter.js

@@ -10,15 +10,11 @@
 
 'use strict';
 
-const BatchedBridge = require('../BatchedBridge/BatchedBridge');
+import registerCallableModule from '../Core/registerCallableModule';
 
 const RCTEventEmitter = {
   register(eventEmitter: any) {
-    if (global.RN$Bridgeless) {
-      global.RN$registerCallableModule('RCTEventEmitter', () => eventEmitter);
-    } else {
-      BatchedBridge.registerCallableModule('RCTEventEmitter', eventEmitter);
-    }
+    registerCallableModule('RCTEventEmitter', eventEmitter);
   },
 };
 

package/Libraries/Image/AssetSourceResolver.js

@@ -55,6 +55,17 @@ function getAssetPathInDrawableFolder(asset: PackagerAsset): string {
 
 /**
  * Returns true if the asset can be loaded over the network.
+ *
+ * This prevents an issue loading XML assets on Android. XML asset types like
+ * vector drawables can only be loaded from precompiled source. Android does
+ * not support loading these over the network, and AAPT precompiles data by
+ * breaking path data and resource information apart into multiple files,
+ * stuffing it all into the resource table. As a result, we should only attempt
+ * to load resources as we would in release builds: by the resource name.
+ *
+ * For more information, see:
+ * https://issuetracker.google.com/issues/62435069
+ * https://issuetracker.google.com/issues/68293189
  */
 function assetSupportsNetworkLoads(asset: PackagerAsset): boolean {
   return !(asset.type === 'xml' && Platform.OS === 'android');

package/Libraries/Image/RCTImageView.mm

@@ -41,8 +41,8 @@ static NSDictionary *onLoadParamsForSource(RCTImageSource *source)
 {
   NSDictionary *dict = @{
     @"uri" : source.request.URL.absoluteString,
-    @"width" : @(source.size.width),
-    @"height" : @(source.size.height),
+    @"width" : @(source.size.width * source.scale),
+    @"height" : @(source.size.height * source.scale),
   };
   return @{@"source" : dict};
 }
@@ -405,7 +405,7 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithFrame : (CGRect)frame)
       }
     } else {
       if (strongSelf->_onLoad) {
-        RCTImageSource *sourceLoaded = [source imageSourceWithSize:image.size scale:source.scale];
+        RCTImageSource *sourceLoaded = [source imageSourceWithSize:image.size scale:image.scale];
         strongSelf->_onLoad(onLoadParamsForSource(sourceLoaded));
       }
       if (strongSelf->_onLoadEnd) {

package/Libraries/Inspector/BorderBox.js

@@ -10,23 +10,35 @@
 
 'use strict';
 
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+
+import React from 'react';
+
 const View = require('../Components/View/View');
-const React = require('react');
 
-class BorderBox extends React.Component<$FlowFixMeProps> {
-  render(): $FlowFixMe | React.Node {
-    const box = this.props.box;
-    if (!box) {
-      return this.props.children;
-    }
-    const style = {
-      borderTopWidth: box.top,
-      borderBottomWidth: box.bottom,
-      borderLeftWidth: box.left,
-      borderRightWidth: box.right,
-    };
-    return <View style={[style, this.props.style]}>{this.props.children}</View>;
+type Props = $ReadOnly<{
+  children: React.Node,
+  box?: ?$ReadOnly<{
+    top: number,
+    right: number,
+    bottom: number,
+    left: number,
+    ...
+  }>,
+  style?: ViewStyleProp,
+}>;
+
+function BorderBox({children, box, style}: Props): React.Node {
+  if (!box) {
+    return children;
   }
+  const borderStyle = {
+    borderTopWidth: box.top,
+    borderBottomWidth: box.bottom,
+    borderLeftWidth: box.left,
+    borderRightWidth: box.right,
+  };
+  return <View style={[borderStyle, style]}>{children}</View>;
 }
 
 module.exports = BorderBox;

package/Libraries/Inspector/BoxInspector.js

@@ -10,11 +10,15 @@
 
 'use strict';
 
+import type {TextStyleProp, ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {InspectedElementFrame} from './Inspector';
+
+import React from 'react';
+
 const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text');
 const resolveBoxStyle = require('./resolveBoxStyle');
-const React = require('react');
 
 const blank = {
   top: 0,
@@ -23,51 +27,65 @@ const blank = {
   bottom: 0,
 };
 
-class BoxInspector extends React.Component<$FlowFixMeProps> {
-  render(): React.Node {
-    const frame = this.props.frame;
-    const style = this.props.style;
-    const margin = (style && resolveBoxStyle('margin', style)) || blank;
-    const padding = (style && resolveBoxStyle('padding', style)) || blank;
-    return (
-      <BoxContainer title="margin" titleStyle={styles.marginLabel} box={margin}>
-        <BoxContainer title="padding" box={padding}>
-          <View>
-            <Text style={styles.innerText}>
-              ({(frame.left || 0).toFixed(1)}, {(frame.top || 0).toFixed(1)})
-            </Text>
-            <Text style={styles.innerText}>
-              {(frame.width || 0).toFixed(1)} &times;{' '}
-              {(frame.height || 0).toFixed(1)}
-            </Text>
-          </View>
-        </BoxContainer>
-      </BoxContainer>
-    );
-  }
-}
+type BoxInspectorProps = $ReadOnly<{
+  style: ViewStyleProp,
+  frame: ?InspectedElementFrame,
+}>;
+
+function BoxInspector({style, frame}: BoxInspectorProps): React.Node {
+  const margin = (style && resolveBoxStyle('margin', style)) || blank;
+  const padding = (style && resolveBoxStyle('padding', style)) || blank;
 
-class BoxContainer extends React.Component<$FlowFixMeProps> {
-  render(): React.Node {
-    const box = this.props.box;
-    return (
-      <View style={styles.box}>
-        <View style={styles.row}>
-          {}
-          <Text style={[this.props.titleStyle, styles.label]}>
-            {this.props.title}
+  return (
+    <BoxContainer title="margin" titleStyle={styles.marginLabel} box={margin}>
+      <BoxContainer title="padding" box={padding}>
+        <View>
+          <Text style={styles.innerText}>
+            ({(frame?.left || 0).toFixed(1)}, {(frame?.top || 0).toFixed(1)})
+          </Text>
+          <Text style={styles.innerText}>
+            {(frame?.width || 0).toFixed(1)} &times;{' '}
+            {(frame?.height || 0).toFixed(1)}
           </Text>
-          <Text style={styles.boxText}>{box.top}</Text>
-        </View>
-        <View style={styles.row}>
-          <Text style={styles.boxText}>{box.left}</Text>
-          {this.props.children}
-          <Text style={styles.boxText}>{box.right}</Text>
         </View>
-        <Text style={styles.boxText}>{box.bottom}</Text>
+      </BoxContainer>
+    </BoxContainer>
+  );
+}
+
+type BoxContainerProps = $ReadOnly<{
+  title: string,
+  titleStyle?: TextStyleProp,
+  box: $ReadOnly<{
+    top: number,
+    left: number,
+    right: number,
+    bottom: number,
+  }>,
+  children: React.Node,
+}>;
+
+function BoxContainer({
+  title,
+  titleStyle,
+  box,
+  children,
+}: BoxContainerProps): React.Node {
+  return (
+    <View style={styles.box}>
+      <View style={styles.row}>
+        {}
+        <Text style={[titleStyle, styles.label]}>{title}</Text>
+        <Text style={styles.boxText}>{box.top}</Text>
+      </View>
+      <View style={styles.row}>
+        <Text style={styles.boxText}>{box.left}</Text>
+        {children}
+        <Text style={styles.boxText}>{box.right}</Text>
       </View>
-    );
-  }
+      <Text style={styles.boxText}>{box.bottom}</Text>
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({

package/Libraries/Inspector/ElementBox.js

@@ -10,65 +10,72 @@
 
 'use strict';
 
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {InspectedElementFrame} from './Inspector';
+
+import React from 'react';
+
 const View = require('../Components/View/View');
 const flattenStyle = require('../StyleSheet/flattenStyle');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Dimensions = require('../Utilities/Dimensions').default;
 const BorderBox = require('./BorderBox');
 const resolveBoxStyle = require('./resolveBoxStyle');
-const React = require('react');
-
-class ElementBox extends React.Component<$FlowFixMeProps> {
-  render(): React.Node {
-    const style = flattenStyle(this.props.style) || {};
-    let margin: ?$ReadOnly<Style> = resolveBoxStyle('margin', style);
-    let padding: ?$ReadOnly<Style> = resolveBoxStyle('padding', style);
-
-    const frameStyle = {...this.props.frame};
-    const contentStyle: {width: number, height: number} = {
-      width: this.props.frame.width,
-      height: this.props.frame.height,
-    };
-
-    if (margin != null) {
-      margin = resolveRelativeSizes(margin);
-
-      frameStyle.top -= margin.top;
-      frameStyle.left -= margin.left;
-      frameStyle.height += margin.top + margin.bottom;
-      frameStyle.width += margin.left + margin.right;
-
-      if (margin.top < 0) {
-        contentStyle.height += margin.top;
-      }
-      if (margin.bottom < 0) {
-        contentStyle.height += margin.bottom;
-      }
-      if (margin.left < 0) {
-        contentStyle.width += margin.left;
-      }
-      if (margin.right < 0) {
-        contentStyle.width += margin.right;
-      }
-    }
 
-    if (padding != null) {
-      padding = resolveRelativeSizes(padding);
+type Props = $ReadOnly<{
+  frame: InspectedElementFrame,
+  style?: ?ViewStyleProp,
+}>;
+
+function ElementBox({frame, style}: Props): React.Node {
+  const flattenedStyle = flattenStyle(style) || {};
+  let margin: ?$ReadOnly<Style> = resolveBoxStyle('margin', flattenedStyle);
+  let padding: ?$ReadOnly<Style> = resolveBoxStyle('padding', flattenedStyle);
 
-      contentStyle.width -= padding.left + padding.right;
-      contentStyle.height -= padding.top + padding.bottom;
+  const frameStyle = {...frame};
+  const contentStyle: {width: number, height: number} = {
+    width: frame.width,
+    height: frame.height,
+  };
+
+  if (margin != null) {
+    margin = resolveRelativeSizes(margin);
+
+    frameStyle.top -= margin.top;
+    frameStyle.left -= margin.left;
+    frameStyle.height += margin.top + margin.bottom;
+    frameStyle.width += margin.left + margin.right;
+
+    if (margin.top < 0) {
+      contentStyle.height += margin.top;
+    }
+    if (margin.bottom < 0) {
+      contentStyle.height += margin.bottom;
     }
+    if (margin.left < 0) {
+      contentStyle.width += margin.left;
+    }
+    if (margin.right < 0) {
+      contentStyle.width += margin.right;
+    }
+  }
 
-    return (
-      <View style={[styles.frame, frameStyle]} pointerEvents="none">
-        <BorderBox box={margin} style={styles.margin}>
-          <BorderBox box={padding} style={styles.padding}>
-            <View style={[styles.content, contentStyle]} />
-          </BorderBox>
-        </BorderBox>
-      </View>
-    );
+  if (padding != null) {
+    padding = resolveRelativeSizes(padding);
+
+    contentStyle.width -= padding.left + padding.right;
+    contentStyle.height -= padding.top + padding.bottom;
   }
+
+  return (
+    <View style={[styles.frame, frameStyle]} pointerEvents="none">
+      <BorderBox box={margin} style={styles.margin}>
+        <BorderBox box={padding} style={styles.padding}>
+          <View style={[styles.content, contentStyle]} />
+        </BorderBox>
+      </BorderBox>
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({

package/Libraries/Inspector/StyleInspector.js

@@ -10,42 +10,48 @@
 
 'use strict';
 
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {____FlattenStyleProp_Internal} from '../StyleSheet/StyleSheetTypes';
+
+import React from 'react';
+
 const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text');
-const React = require('react');
 
-class StyleInspector extends React.Component<$FlowFixMeProps> {
-  render(): React.Node {
-    if (!this.props.style) {
-      return <Text style={styles.noStyle}>No style</Text>;
-    }
-    const names = Object.keys(this.props.style);
-    return (
-      <View style={styles.container}>
-        <View>
-          {names.map(name => (
-            <Text key={name} style={styles.attr}>
-              {name}:
-            </Text>
-          ))}
-        </View>
+type Props = $ReadOnly<{
+  style?: ?____FlattenStyleProp_Internal<ViewStyleProp>,
+}>;
 
-        <View>
-          {names.map(name => {
-            const value = this.props.style[name];
-            return (
-              <Text key={name} style={styles.value}>
-                {typeof value !== 'string' && typeof value !== 'number'
-                  ? JSON.stringify(value)
-                  : value}
-              </Text>
-            );
-          })}
-        </View>
-      </View>
-    );
+function StyleInspector({style}: Props): React.Node {
+  if (!style) {
+    return <Text style={styles.noStyle}>No style</Text>;
   }
+  const names = Object.keys(style);
+  return (
+    <View style={styles.container}>
+      <View>
+        {names.map(name => (
+          <Text key={name} style={styles.attr}>
+            {name}:
+          </Text>
+        ))}
+      </View>
+
+      <View>
+        {names.map(name => {
+          const value = style?.[name];
+          return (
+            <Text key={name} style={styles.value}>
+              {typeof value !== 'string' && typeof value !== 'number'
+                ? JSON.stringify(value)
+                : value}
+            </Text>
+          );
+        })}
+      </View>
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({

package/Libraries/LayoutAnimation/LayoutAnimation.js

@@ -121,7 +121,7 @@ const Presets = {
     'opacity',
   ): LayoutAnimationConfig),
   linear: (create(500, 'linear', 'opacity'): LayoutAnimationConfig),
-  spring: {
+  spring: ({
     duration: 700,
     create: {
       type: 'linear',
@@ -135,7 +135,7 @@ const Presets = {
       type: 'linear',
       property: 'opacity',
     },
-  },
+  }: LayoutAnimationConfig),
 };
 
 /**

package/Libraries/Lists/FlatList.d.ts

@@ -222,7 +222,7 @@ export abstract class FlatListComponent<
   /**
    * Provides a handle to the underlying scroll responder.
    */
-  getScrollResponder: () => JSX.Element | null | undefined;
+  getScrollResponder: () => React.JSX.Element | null | undefined;
 
   /**
    * Provides a reference to the underlying host component

package/Libraries/Modal/Modal.js

@@ -328,6 +328,7 @@ class Modal extends React.Component<Props, State> {
         <VirtualizedListContextResetter>
           <ScrollView.Context.Provider value={null}>
             <View
+              // $FlowFixMe[incompatible-type]
               style={[styles.container, containerStyles]}
               collapsable={false}>
               {innerChildren}
@@ -353,6 +354,7 @@ const styles = StyleSheet.create({
     /* $FlowFixMe[invalid-computed-prop] (>=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. */
+    // $FlowFixMe[incompatible-call]
     [side]: 0,
     top: 0,
     flex: 1,

package/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.mm

@@ -57,7 +57,7 @@ static NSString *RCTNormalizeAnimatedEventName(NSString *eventName)
 }
 
 - (instancetype)initWithBridge:(nullable RCTBridge *)bridge
-              surfacePresenter:(id<RCTSurfacePresenterStub>)surfacePresenter;
+              surfacePresenter:(id<RCTSurfacePresenterStub>)surfacePresenter
 {
   if ((self = [super init])) {
     _bridge = bridge;

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -313,8 +313,6 @@ const validAttributesForNonEventProps = {
 
   style: ReactNativeStyleAttributes,
 
-  experimental_layoutConformance: true,
-
   // ReactClippingViewManager @ReactProps
   removeClippedSubviews: true,
 

package/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -364,8 +364,6 @@ const validAttributesForNonEventProps = {
   direction: true,
 
   style: ReactNativeStyleAttributes,
-
-  experimental_layoutConformance: true,
 };
 
 // Props for bubbling and direct events

package/Libraries/Network/RCTNetworking.android.js

@@ -8,7 +8,9 @@
  * @flow
  */
 
+import type {EventSubscription} from '../vendor/emitter/EventEmitter';
 import type {RequestBody} from './convertRequestBody';
+import type {RCTNetworkingEventDefinitions} from './RCTNetworkingEventDefinitions.flow';
 import type {NativeResponseType} from './XMLHttpRequest';
 
 // Do not require the native RCTNetworking module directly! Use this wrapper module instead.
@@ -35,19 +37,25 @@ function generateRequestId(): number {
   return _requestId++;
 }
 
+const emitter = new NativeEventEmitter<$FlowFixMe>(
+  // T88715063: NativeEventEmitter only used this parameter on iOS. Now it uses it on all platforms, so this code was modified automatically to preserve its behavior
+  // If you want to use the native module on other platforms, please remove this condition and test its behavior
+  Platform.OS !== 'ios' ? null : NativeNetworkingAndroid,
+);
+
 /**
- * This class is a wrapper around the native RCTNetworking module. It adds a necessary unique
+ * This object is a wrapper around the native RCTNetworking module. It adds a necessary unique
  * requestId to each network request that can be used to abort that request later on.
  */
-// FIXME: use typed events
-class RCTNetworking extends NativeEventEmitter<$FlowFixMe> {
-  constructor() {
-    super(
-      // T88715063: NativeEventEmitter only used this parameter on iOS. Now it uses it on all platforms, so this code was modified automatically to preserve its behavior
-      // If you want to use the native module on other platforms, please remove this condition and test its behavior
-      Platform.OS !== 'ios' ? null : NativeNetworkingAndroid,
-    );
-  }
+const RCTNetworking = {
+  addListener<K: $Keys<RCTNetworkingEventDefinitions>>(
+    eventType: K,
+    listener: (...$ElementType<RCTNetworkingEventDefinitions, K>) => mixed,
+    context?: mixed,
+  ): EventSubscription {
+    // $FlowFixMe[incompatible-call]
+    return emitter.addListener(eventType, listener, context);
+  },
 
   sendRequest(
     method: string,
@@ -81,15 +89,15 @@ class RCTNetworking extends NativeEventEmitter<$FlowFixMe> {
       withCredentials,
     );
     callback(requestId);
-  }
+  },
 
   abortRequest(requestId: number) {
     NativeNetworkingAndroid.abortRequest(requestId);
-  }
+  },
 
-  clearCookies(callback: (result: boolean) => any) {
+  clearCookies(callback: (result: boolean) => void) {
     NativeNetworkingAndroid.clearCookies(callback);
-  }
-}
+  },
+};
 
-export default (new RCTNetworking(): RCTNetworking);
+export default RCTNetworking;