react-native-tvos 0.84.1-0 → 0.85.0-0

package/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js

@@ -18,26 +18,21 @@ import LogBoxMessage from './LogBoxMessage';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{
+const SHOW_MORE_MESSAGE_LENGTH = 300;
+
+component LogBoxInspectorMessageHeader(
   collapsed: boolean,
   message: Message,
   level: LogLevel,
   title: string,
   onPress: () => void,
-}>;
-
-const SHOW_MORE_MESSAGE_LENGTH = 300;
-
-function LogBoxInspectorMessageHeader(props: Props): React.Node {
+) {
   function renderShowMore() {
-    if (
-      props.message.content.length < SHOW_MORE_MESSAGE_LENGTH ||
-      !props.collapsed
-    ) {
+    if (message.content.length < SHOW_MORE_MESSAGE_LENGTH || !collapsed) {
       return null;
     }
     return (
-      <Text style={messageStyles.collapse} onPress={() => props.onPress()}>
+      <Text style={messageStyles.collapse} onPress={() => onPress()}>
         ... See More
       </Text>
     );
@@ -47,15 +42,15 @@ function LogBoxInspectorMessageHeader(props: Props): React.Node {
     <View style={messageStyles.body}>
       <View style={messageStyles.heading}>
         <Text
-          style={[messageStyles.headingText, messageStyles[props.level]]}
+          style={[messageStyles.headingText, messageStyles[level]]}
           id="logbox_message_title_text">
-          {props.title}
+          {title}
         </Text>
       </View>
       <Text style={messageStyles.bodyText} id="logbox_message_contents_text">
         <LogBoxMessage
-          maxLength={props.collapsed ? SHOW_MORE_MESSAGE_LENGTH : Infinity}
-          message={props.message}
+          maxLength={collapsed ? SHOW_MORE_MESSAGE_LENGTH : Infinity}
+          message={message}
           style={messageStyles.messageText}
         />
         {renderShowMore()}

package/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js

@@ -21,10 +21,6 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 import {useState} from 'react';
 
-type Props = $ReadOnly<{
-  log: LogBoxLog,
-}>;
-
 const BEFORE_SLASH_RE = /^(.*)[\\/]/;
 
 // Taken from React https://github.com/facebook/react/blob/206d61f72214e8ae5b935f0bf8628491cb7f0797/packages/react-devtools-shared/src/backend/describeComponentFrame.js#L27-L41
@@ -49,29 +45,30 @@ function getPrettyFileName(path: string) {
 
   return fileName;
 }
-function LogBoxInspectorReactFrames(props: Props): React.Node {
+
+component LogBoxInspectorReactFrames(log: LogBoxLog) {
   const [collapsed, setCollapsed] = useState(true);
   if (
-    props.log.getAvailableComponentStack() == null ||
-    props.log.getAvailableComponentStack().length < 1
+    log.getAvailableComponentStack() == null ||
+    log.getAvailableComponentStack().length < 1
   ) {
     return null;
   }
 
   function getStackList() {
     if (collapsed) {
-      return props.log.getAvailableComponentStack().slice(0, 3);
+      return log.getAvailableComponentStack().slice(0, 3);
     } else {
-      return props.log.getAvailableComponentStack();
+      return log.getAvailableComponentStack();
     }
   }
 
   function getCollapseMessage() {
-    if (props.log.getAvailableComponentStack().length <= 3) {
+    if (log.getAvailableComponentStack().length <= 3) {
       return;
     }
 
-    const count = props.log.getAvailableComponentStack().length - 3;
+    const count = log.getAvailableComponentStack().length - 3;
     if (collapsed) {
       return `See ${count} more components`;
     } else {
@@ -95,9 +92,9 @@ function LogBoxInspectorReactFrames(props: Props): React.Node {
               // Older versions of DevTools do not provide full path.
               // This will not work on Windows, remove check once the
               // DevTools return the full file path.
-              frame.fileName.startsWith('/')
+              frame.file != null && frame.file.startsWith('/')
                 ? () =>
-                    openFileInEditor(frame.fileName, frame.location?.row ?? 1)
+                    openFileInEditor(frame.file ?? '', frame.lineNumber ?? 1)
                 : null
             }
             style={componentStyles.frame}>
@@ -106,13 +103,13 @@ function LogBoxInspectorReactFrames(props: Props): React.Node {
                 id="logbox_component_stack_frame_text"
                 style={componentStyles.frameName}>
                 <Text style={componentStyles.bracket}>{'<'}</Text>
-                {frame.content}
+                {frame.methodName}
                 <Text style={componentStyles.bracket}>{' />'}</Text>
               </Text>
             </View>
             <Text style={componentStyles.frameLocation}>
-              {getPrettyFileName(frame.fileName)}
-              {frame.location ? `:${frame.location.row}` : ''}
+              {frame.file != null ? getPrettyFileName(frame.file) : ''}
+              {frame.lineNumber != null ? `:${frame.lineNumber}` : ''}
             </Text>
           </LogBoxButton>
         </View>
@@ -164,14 +161,24 @@ const componentStyles = StyleSheet.create({
     paddingRight: 10,
   },
   frameName: {
-    fontFamily: Platform.select({android: 'monospace', ios: 'Menlo'}),
+    fontFamily: Platform.select({
+      android: 'monospace',
+      ios: 'Menlo',
+      macos: 'Menlo',
+      windows: 'Consolas',
+    }),
     color: LogBoxStyle.getTextColor(1),
     fontSize: 14,
     includeFontPadding: false,
     lineHeight: 18,
   },
   bracket: {
-    fontFamily: Platform.select({android: 'monospace', ios: 'Menlo'}),
+    fontFamily: Platform.select({
+      android: 'monospace',
+      ios: 'Menlo',
+      macos: 'Menlo',
+      windows: 'Consolas',
+    }),
     color: LogBoxStyle.getTextColor(0.4),
     fontSize: 14,
     fontWeight: '500',

package/Libraries/LogBox/UI/LogBoxInspectorSection.js

@@ -14,20 +14,18 @@ import Text from '../../Text/Text';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{
+component LogBoxInspectorSection(
   heading: string,
   children: React.Node,
   action?: ?React.Node,
-}>;
-
-function LogBoxInspectorSection(props: Props): React.Node {
+) {
   return (
     <View style={styles.section}>
       <View style={styles.heading}>
-        <Text style={styles.headingText}>{props.heading}</Text>
-        {props.action}
+        <Text style={styles.headingText}>{heading}</Text>
+        {action}
       </View>
-      <View style={styles.body}>{props.children}</View>
+      <View style={styles.body}>{children}</View>
     </View>
   );
 }

package/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js

@@ -19,19 +19,17 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 import {useEffect, useState} from 'react';
 
-type Props = $ReadOnly<{
+component LogBoxInspectorSourceMapStatus(
   onPress?: ?(event: GestureResponderEvent) => void,
   status: 'COMPLETE' | 'FAILED' | 'NONE' | 'PENDING',
-}>;
-
-function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
+) {
   const [state, setState] = useState({
     animation: null,
     rotate: null,
   });
 
   useEffect(() => {
-    if (props.status === 'PENDING') {
+    if (status === 'PENDING') {
       if (state.animation == null) {
         const animated = new Animated.Value(0);
         const animation = Animated.loop(
@@ -67,11 +65,11 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
         state.animation.stop();
       }
     };
-  }, [props.status, state.animation]);
+  }, [status, state.animation]);
 
   let image;
   let color;
-  switch (props.status) {
+  switch (status) {
     case 'FAILED':
       image = require('./LogBoxImages/alert-triangle.png');
       color = LogBoxStyle.getErrorColor(1);
@@ -82,7 +80,7 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
       break;
   }
 
-  if (props.status === 'COMPLETE' || image == null) {
+  if (status === 'COMPLETE' || image == null) {
     return null;
   }
 
@@ -93,14 +91,14 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
         pressed: LogBoxStyle.getBackgroundColor(1),
       }}
       hitSlop={{bottom: 8, left: 8, right: 8, top: 8}}
-      onPress={props.onPress}
+      onPress={onPress}
       style={styles.root}>
       <Animated.Image
         source={image}
         style={[
           styles.image,
           {tintColor: color},
-          state.rotate == null || props.status !== 'PENDING'
+          state.rotate == null || status !== 'PENDING'
             ? null
             : {transform: [{rotate: state.rotate}]},
         ]}

package/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js

@@ -19,13 +19,10 @@ import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{
+component LogBoxInspectorStackFrame(
   frame: StackFrame,
   onPress?: ?(event: GestureResponderEvent) => void,
-}>;
-
-function LogBoxInspectorStackFrame(props: Props): React.Node {
-  const {frame, onPress} = props;
+) {
   const column = frame.column != null && parseInt(frame.column, 10);
   const location =
     getFileName(frame.file) +
@@ -90,7 +87,12 @@ const styles = StyleSheet.create({
     includeFontPadding: false,
     lineHeight: 18,
     fontWeight: '400',
-    fontFamily: Platform.select({android: 'monospace', ios: 'Menlo'}),
+    fontFamily: Platform.select({
+      android: 'monospace',
+      ios: 'Menlo',
+      macos: 'Menlo',
+      windows: 'Consolas',
+    }),
   },
   location: {
     color: LogBoxStyle.getTextColor(0.8),

package/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js

@@ -24,11 +24,6 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 import {useState} from 'react';
 
-type Props = $ReadOnly<{
-  log: LogBoxLog,
-  onRetry: () => void,
-}>;
-
 export function getCollapseMessage(
   stackFrames: Stack,
   collapsed: boolean,
@@ -65,21 +60,21 @@ export function getCollapseMessage(
   }
 }
 
-function LogBoxInspectorStackFrames(props: Props): React.Node {
+component LogBoxInspectorStackFrames(log: LogBoxLog, onRetry: () => void) {
   const [collapsed, setCollapsed] = useState(() => {
     // Only collapse frames initially if some frames are not collapsed.
-    return props.log.getAvailableStack().some(({collapse}) => !collapse);
+    return log.getAvailableStack().some(({collapse}) => !collapse);
   });
 
   function getStackList() {
     if (collapsed === true) {
-      return props.log.getAvailableStack().filter(({collapse}) => !collapse);
+      return log.getAvailableStack().filter(({collapse}) => !collapse);
     } else {
-      return props.log.getAvailableStack();
+      return log.getAvailableStack();
     }
   }
 
-  if (props.log.getAvailableStack().length === 0) {
+  if (log.getAvailableStack().length === 0) {
     return null;
   }
 
@@ -88,13 +83,11 @@ function LogBoxInspectorStackFrames(props: Props): React.Node {
       heading="Call Stack"
       action={
         <LogBoxInspectorSourceMapStatus
-          onPress={
-            props.log.symbolicated.status === 'FAILED' ? props.onRetry : null
-          }
-          status={props.log.symbolicated.status}
+          onPress={log.symbolicated.status === 'FAILED' ? onRetry : null}
+          status={log.symbolicated.status}
         />
       }>
-      {props.log.symbolicated.status !== 'COMPLETE' && (
+      {log.symbolicated.status !== 'COMPLETE' && (
         <View style={stackStyles.hintBox}>
           <Text style={stackStyles.hintText}>
             This call stack is not symbolicated. Some features are unavailable
@@ -102,32 +95,29 @@ function LogBoxInspectorStackFrames(props: Props): React.Node {
           </Text>
         </View>
       )}
-      <StackFrameList
-        list={getStackList()}
-        status={props.log.symbolicated.status}
-      />
+      <StackFrameList list={getStackList()} status={log.symbolicated.status} />
       <StackFrameFooter
         onPress={() => setCollapsed(!collapsed)}
-        message={getCollapseMessage(props.log.getAvailableStack(), collapsed)}
+        message={getCollapseMessage(log.getAvailableStack(), collapsed)}
       />
     </LogBoxInspectorSection>
   );
 }
 
-function StackFrameList(props: {
+component StackFrameList(
   list: Stack | Array<StackFrame>,
   status: string | 'COMPLETE' | 'FAILED' | 'NONE' | 'PENDING',
-}) {
+) {
   return (
     <>
-      {props.list.map((frame, index) => {
+      {list.map((frame, index) => {
         const {file, lineNumber} = frame;
         return (
           <LogBoxInspectorStackFrame
             key={index}
             frame={frame}
             onPress={
-              props.status === 'COMPLETE' && file != null && lineNumber != null
+              status === 'COMPLETE' && file != null && lineNumber != null
                 ? () => openFileInEditor(file, lineNumber)
                 : null
             }
@@ -138,9 +128,7 @@ function StackFrameList(props: {
   );
 }
 
-function StackFrameFooter(
-  props: $ReadOnly<{message: string, onPress: () => void}>,
-) {
+component StackFrameFooter(message: string, onPress: () => void) {
   return (
     <View style={stackStyles.collapseContainer}>
       <LogBoxButton
@@ -148,9 +136,9 @@ function StackFrameFooter(
           default: 'transparent',
           pressed: LogBoxStyle.getBackgroundColor(1),
         }}
-        onPress={props.onPress}
+        onPress={onPress}
         style={stackStyles.collapseButton}>
-        <Text style={stackStyles.collapse}>{props.message}</Text>
+        <Text style={stackStyles.collapse}>{message}</Text>
       </LogBoxButton>
     </View>
   );

package/Libraries/LogBox/UI/LogBoxMessage.js

@@ -16,20 +16,12 @@ import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import * as React from 'react';
 
-type Props = {
-  message: Message,
-  style: TextStyleProp,
-  plaintext?: ?boolean,
-  maxLength?: ?number,
-  ...
-};
-
 type Range = {
   lowerBound: number,
   upperBound: number,
 };
 
-function getLinkRanges(string: string): $ReadOnlyArray<Range> {
+function getLinkRanges(string: string): ReadonlyArray<Range> {
   const regex = /https?:\/\/[^\s$.?#].[^\s]*/gi;
   const matches = [];
 
@@ -46,15 +38,12 @@ function getLinkRanges(string: string): $ReadOnlyArray<Range> {
   return matches;
 }
 
-function TappableLinks(props: {
-  content: string,
-  style: void | TextStyleProp,
-}): React.Node {
-  const matches = getLinkRanges(props.content);
+component TappableLinks(content: string, style: void | TextStyleProp) {
+  const matches = getLinkRanges(content);
 
   if (matches.length === 0) {
     // No URLs detected. Just return the content.
-    return <Text style={props.style}>{props.content}</Text>;
+    return <Text style={style}>{content}</Text>;
   }
 
   // URLs were detected. Construct array of Text nodes.
@@ -65,14 +54,11 @@ function TappableLinks(props: {
 
   for (const linkRange of matches) {
     if (startIndex < linkRange.lowerBound) {
-      const text = props.content.substring(startIndex, linkRange.lowerBound);
+      const text = content.substring(startIndex, linkRange.lowerBound);
       fragments.push(<Text key={++indexCounter}>{text}</Text>);
     }
 
-    const link = props.content.substring(
-      linkRange.lowerBound,
-      linkRange.upperBound,
-    );
+    const link = content.substring(linkRange.lowerBound, linkRange.upperBound);
     fragments.push(
       <Text
         onPress={() => {
@@ -88,46 +74,51 @@ function TappableLinks(props: {
     startIndex = linkRange.upperBound;
   }
 
-  if (startIndex < props.content.length) {
-    const text = props.content.substring(startIndex);
+  if (startIndex < content.length) {
+    const text = content.substring(startIndex);
     fragments.push(
-      <Text key={++indexCounter} style={props.style}>
+      <Text key={++indexCounter} style={style}>
         {text}
       </Text>,
     );
   }
 
-  return <Text style={props.style}>{fragments}</Text>;
+  return <Text style={style}>{fragments}</Text>;
 }
 
 const cleanContent = (content: string) =>
-  content.replace(/^(TransformError |Warning: (Warning: )?|Error: )/g, '');
+  content.replace(/^(TransformError |Error: )/g, '');
 
-function LogBoxMessage(props: Props): React.Node {
-  const {content, substitutions}: Message = props.message;
+component LogBoxMessage(
+  message: Message,
+  style: TextStyleProp,
+  plaintext?: ?boolean,
+  maxLength?: ?number,
+) {
+  const {content, substitutions}: Message = message;
 
-  if (props.plaintext === true) {
+  if (plaintext === true) {
     return <Text>{cleanContent(content)}</Text>;
   }
 
-  const maxLength = props.maxLength != null ? props.maxLength : Infinity;
-  const substitutionStyle: TextStyleProp = props.style;
+  const resolvedMaxLength = maxLength != null ? maxLength : Infinity;
+  const substitutionStyle: TextStyleProp = style;
   const elements = [];
   let length = 0;
   const createUnderLength = (
     key: string,
-    message: string,
-    style: void | TextStyleProp,
+    messageText: string,
+    textStyle: void | TextStyleProp,
   ) => {
-    let cleanMessage = cleanContent(message);
+    let cleanMessage = cleanContent(messageText);
 
-    if (props.maxLength != null) {
-      cleanMessage = cleanMessage.slice(0, props.maxLength - length);
+    if (maxLength != null) {
+      cleanMessage = cleanMessage.slice(0, maxLength - length);
     }
 
-    if (length < maxLength) {
+    if (length < resolvedMaxLength) {
       elements.push(
-        <TappableLinks content={cleanMessage} key={key} style={style} />,
+        <TappableLinks content={cleanMessage} key={key} style={textStyle} />,
       );
     }
 

package/Libraries/LogBox/UI/LogBoxNotification.js

@@ -21,7 +21,7 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 import {useEffect} from 'react';
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   log: LogBoxLog,
   totalLogCount: number,
   level: 'warn' | 'error',

package/Libraries/Modal/Modal.js

@@ -59,7 +59,7 @@ const ModalEventEmitter =
 // destroyed before the callback is fired.
 let uniqueModalIdentifier = 0;
 
-type OrientationChangeEvent = $ReadOnly<{
+type OrientationChangeEvent = Readonly<{
   orientation: 'portrait' | 'landscape',
 }>;
 
@@ -125,7 +125,7 @@ export type ModalPropsIOS = {
    * The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations.
    * On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.
    */
-  supportedOrientations?: ?$ReadOnlyArray<
+  supportedOrientations?: ?ReadonlyArray<
     | 'portrait'
     | 'portrait-upside-down'
     | 'landscape'
@@ -383,7 +383,7 @@ const styles = StyleSheet.create({
   },
 });
 
-type ModalRefProps = $ReadOnly<{
+type ModalRefProps = Readonly<{
   ref?: React.RefSetter<PublicModalInstance>,
 }>;
 

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -10,8 +10,16 @@
 
 import type {PartialViewConfigWithoutName} from './PlatformBaseViewConfig';
 
-import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import ReactNativeStyleAttributes from '../Components/View/ReactNativeStyleAttributes';
+import {
+  backgroundImageAttribute,
+  backgroundPositionAttribute,
+  backgroundRepeatAttribute,
+  backgroundSizeAttribute,
+  boxShadowAttribute,
+  colorAttribute,
+  filterAttribute,
+} from '../Components/View/ReactNativeStyleAttributes';
 import {validAttributesForTVProps} from './TVViewConfig';
 import {DynamicallyInjectedByGestureHandler} from './ViewConfigIgnore';
 
@@ -196,32 +204,20 @@ const directEventTypes = {
 
 const validAttributesForNonEventProps = {
   // @ReactProps from BaseViewManager
-  backgroundColor: {process: require('../StyleSheet/processColor').default},
+  backgroundColor: colorAttribute,
   transform: true,
   transformOrigin: true,
-  experimental_backgroundImage: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? (true as const)
-    : {process: require('../StyleSheet/processBackgroundImage').default},
-  experimental_backgroundSize: {
-    process: require('../StyleSheet/processBackgroundSize').default,
-  },
-  experimental_backgroundPosition: {
-    process: require('../StyleSheet/processBackgroundPosition').default,
-  },
-  experimental_backgroundRepeat: {
-    process: require('../StyleSheet/processBackgroundRepeat').default,
-  },
-  boxShadow: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? (true as const)
-    : {process: require('../StyleSheet/processBoxShadow').default},
-  filter: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? (true as const)
-    : {process: require('../StyleSheet/processFilter').default},
+  experimental_backgroundImage: backgroundImageAttribute,
+  experimental_backgroundSize: backgroundSizeAttribute,
+  experimental_backgroundPosition: backgroundPositionAttribute,
+  experimental_backgroundRepeat: backgroundRepeatAttribute,
+  boxShadow: boxShadowAttribute,
+  filter: filterAttribute,
   mixBlendMode: true,
   isolation: true,
   opacity: true,
   elevation: true,
-  shadowColor: {process: require('../StyleSheet/processColor').default},
+  shadowColor: colorAttribute,
   zIndex: true,
   renderToHardwareTextureAndroid: true,
   testID: true,
@@ -313,7 +309,7 @@ const validAttributesForNonEventProps = {
   borderLeftWidth: true,
   borderRightWidth: true,
 
-  outlineColor: {process: require('../StyleSheet/processColor').default},
+  outlineColor: colorAttribute,
   outlineOffset: true,
   outlineStyle: true,
   outlineWidth: true,
@@ -369,36 +365,16 @@ const validAttributesForNonEventProps = {
   nativeForegroundAndroid: true,
   needsOffscreenAlphaCompositing: true,
 
-  borderColor: {
-    process: require('../StyleSheet/processColor').default,
-  },
-  borderLeftColor: {
-    process: require('../StyleSheet/processColor').default,
-  },
-  borderRightColor: {
-    process: require('../StyleSheet/processColor').default,
-  },
-  borderTopColor: {
-    process: require('../StyleSheet/processColor').default,
-  },
-  borderBottomColor: {
-    process: require('../StyleSheet/processColor').default,
-  },
-  borderStartColor: {
-    process: require('../StyleSheet/processColor').default,
-  },
-  borderEndColor: {
-    process: require('../StyleSheet/processColor').default,
-  },
-  borderBlockColor: {
-    process: require('../StyleSheet/processColor').default,
-  },
-  borderBlockEndColor: {
-    process: require('../StyleSheet/processColor').default,
-  },
-  borderBlockStartColor: {
-    process: require('../StyleSheet/processColor').default,
-  },
+  borderColor: colorAttribute,
+  borderLeftColor: colorAttribute,
+  borderRightColor: colorAttribute,
+  borderTopColor: colorAttribute,
+  borderBottomColor: colorAttribute,
+  borderStartColor: colorAttribute,
+  borderEndColor: colorAttribute,
+  borderBlockColor: colorAttribute,
+  borderBlockEndColor: colorAttribute,
+  borderBlockStartColor: colorAttribute,
   focusable: true,
   backfaceVisibility: true,
 } as const;