react-native 0.0.0-17be3a003 → 0.0.0-18697adec

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -8,80 +8,145 @@
  * @flow
  */
 
-'use strict';
+import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes';
+import processColor from '../../StyleSheet/processColor';
+import processTransform from '../../StyleSheet/processTransform';
+import sizesDiffer from '../../Utilities/differ/sizesDiffer';
 
-const DeprecatedImageStylePropTypes = require('../../DeprecatedPropTypes/DeprecatedImageStylePropTypes');
-const DeprecatedTextStylePropTypes = require('../../DeprecatedPropTypes/DeprecatedTextStylePropTypes');
-const DeprecatedViewStylePropTypes = require('../../DeprecatedPropTypes/DeprecatedViewStylePropTypes');
-
-const processColor = require('../../StyleSheet/processColor');
-const processTransform = require('../../StyleSheet/processTransform');
-const sizesDiffer = require('../../Utilities/differ/sizesDiffer');
+const colorAttributes = {process: processColor};
 
-type ReturnBoolType = <V>(V) => true;
-type BoolifiedDeprecatedViewStylePropTypes = $ObjMap<
-  typeof DeprecatedViewStylePropTypes,
-  ReturnBoolType,
->;
-type BoolifiedDeprecatedTextStylePropTypes = $ObjMapi<
-  typeof DeprecatedTextStylePropTypes,
-  ReturnBoolType,
->;
-type BoolifiedDeprecatedImageStylePropTypes = $ObjMapi<
-  typeof DeprecatedImageStylePropTypes,
-  ReturnBoolType,
->;
+const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
+  /**
+   * Layout
+   */
+  alignContent: true,
+  alignItems: true,
+  alignSelf: true,
+  aspectRatio: true,
+  borderBottomWidth: true,
+  borderEndWidth: true,
+  borderLeftWidth: true,
+  borderRightWidth: true,
+  borderStartWidth: true,
+  borderTopWidth: true,
+  borderWidth: true,
+  bottom: true,
+  direction: true,
+  display: true,
+  end: true,
+  flex: true,
+  flexBasis: true,
+  flexDirection: true,
+  flexGrow: true,
+  flexShrink: true,
+  flexWrap: true,
+  height: true,
+  justifyContent: true,
+  left: true,
+  margin: true,
+  marginBottom: true,
+  marginEnd: true,
+  marginHorizontal: true,
+  marginLeft: true,
+  marginRight: true,
+  marginStart: true,
+  marginTop: true,
+  marginVertical: true,
+  maxHeight: true,
+  maxWidth: true,
+  minHeight: true,
+  minWidth: true,
+  overflow: true,
+  padding: true,
+  paddingBottom: true,
+  paddingEnd: true,
+  paddingHorizontal: true,
+  paddingLeft: true,
+  paddingRight: true,
+  paddingStart: true,
+  paddingTop: true,
+  paddingVertical: true,
+  position: true,
+  right: true,
+  start: true,
+  top: true,
+  width: true,
+  zIndex: true,
 
-type StyleAttributesType = {
-  ...BoolifiedDeprecatedViewStylePropTypes,
-  ...BoolifiedDeprecatedTextStylePropTypes,
-  ...BoolifiedDeprecatedImageStylePropTypes,
-  transform: $ReadOnly<{|process: typeof processTransform|}> | true,
-  shadowOffset: $ReadOnly<{|diff: typeof sizesDiffer|}> | true,
-  backgroundColor: typeof colorAttributes | true,
-  borderBottomColor: typeof colorAttributes | true,
-  borderColor: typeof colorAttributes | true,
-  borderLeftColor: typeof colorAttributes | true,
-  borderRightColor: typeof colorAttributes | true,
-  borderTopColor: typeof colorAttributes | true,
-  borderStartColor: typeof colorAttributes | true,
-  borderEndColor: typeof colorAttributes | true,
-  color: typeof colorAttributes | true,
-  shadowColor: typeof colorAttributes | true,
-  textDecorationColor: typeof colorAttributes | true,
-  tintColor: typeof colorAttributes | true,
-  textShadowColor: typeof colorAttributes | true,
-  overlayColor: typeof colorAttributes | true,
-  ...
-};
+  /**
+   * Shadow
+   */
+  elevation: true,
+  shadowColor: colorAttributes,
+  shadowOffset: {diff: sizesDiffer},
+  shadowOpacity: true,
+  shadowRadius: true,
 
-const ReactNativeStyleAttributes: StyleAttributesType = {};
+  /**
+   * Transform
+   */
+  decomposedMatrix: true, // @deprecated
+  rotation: true, // @deprecated
+  scaleX: true, // @deprecated
+  scaleY: true, // @deprecated
+  transform: {process: processTransform},
+  transformMatrix: true, // @deprecated
+  translateX: true, // @deprecated
+  translateY: true, // @deprecated
 
-for (const attributeName of Object.keys({
-  ...DeprecatedViewStylePropTypes,
-  ...DeprecatedTextStylePropTypes,
-  ...DeprecatedImageStylePropTypes,
-})) {
-  ReactNativeStyleAttributes[attributeName] = true;
-}
+  /**
+   * View
+   */
+  backfaceVisibility: true,
+  backgroundColor: colorAttributes,
+  borderBottomColor: colorAttributes,
+  borderBottomEndRadius: true,
+  borderBottomLeftRadius: true,
+  borderBottomRightRadius: true,
+  borderBottomStartRadius: true,
+  borderColor: colorAttributes,
+  borderEndColor: colorAttributes,
+  borderLeftColor: colorAttributes,
+  borderRadius: true,
+  borderRightColor: colorAttributes,
+  borderStartColor: colorAttributes,
+  borderStyle: true,
+  borderTopColor: colorAttributes,
+  borderTopEndRadius: true,
+  borderTopLeftRadius: true,
+  borderTopRightRadius: true,
+  borderTopStartRadius: true,
+  opacity: true,
 
-ReactNativeStyleAttributes.transform = {process: processTransform};
-ReactNativeStyleAttributes.shadowOffset = {diff: sizesDiffer};
+  /**
+   * Text
+   */
+  color: colorAttributes,
+  fontFamily: true,
+  fontSize: true,
+  fontStyle: true,
+  fontVariant: true,
+  fontWeight: true,
+  includeFontPadding: true,
+  letterSpacing: true,
+  lineHeight: true,
+  textAlign: true,
+  textAlignVertical: true,
+  textDecorationColor: colorAttributes,
+  textDecorationLine: true,
+  textDecorationStyle: true,
+  textShadowColor: colorAttributes,
+  textShadowOffset: true,
+  textShadowRadius: true,
+  textTransform: true,
+  writingDirection: true,
 
-const colorAttributes = {process: processColor};
-ReactNativeStyleAttributes.backgroundColor = colorAttributes;
-ReactNativeStyleAttributes.borderBottomColor = colorAttributes;
-ReactNativeStyleAttributes.borderColor = colorAttributes;
-ReactNativeStyleAttributes.borderLeftColor = colorAttributes;
-ReactNativeStyleAttributes.borderRightColor = colorAttributes;
-ReactNativeStyleAttributes.borderTopColor = colorAttributes;
-ReactNativeStyleAttributes.borderStartColor = colorAttributes;
-ReactNativeStyleAttributes.borderEndColor = colorAttributes;
-ReactNativeStyleAttributes.color = colorAttributes;
-ReactNativeStyleAttributes.shadowColor = colorAttributes;
-ReactNativeStyleAttributes.textDecorationColor = colorAttributes;
-ReactNativeStyleAttributes.tintColor = colorAttributes;
-ReactNativeStyleAttributes.textShadowColor = colorAttributes;
-ReactNativeStyleAttributes.overlayColor = colorAttributes;
+  /**
+   * Image
+   */
+  overlayColor: colorAttributes,
+  resizeMode: true,
+  tintColor: colorAttributes,
+};
 
 module.exports = ReactNativeStyleAttributes;

package/Libraries/Components/View/ReactNativeViewAttributes.js

@@ -9,8 +9,7 @@
  */
 
 'use strict';
-
-const ReactNativeStyleAttributes = require('./ReactNativeStyleAttributes');
+import ReactNativeStyleAttributes from './ReactNativeStyleAttributes';
 
 const UIView = {
   pointerEvents: true,

package/Libraries/Components/View/ReactNativeViewViewConfig.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import {type ViewConfig} from '../../Renderer/shims/ReactNativeTypes';
+import type {ViewConfig} from '../../Renderer/shims/ReactNativeTypes';
 import ReactNativeViewViewConfigAndroid from './ReactNativeViewViewConfigAndroid';
 import {Platform} from 'react-native';
 

package/Libraries/Components/View/ViewAccessibility.js

@@ -16,6 +16,7 @@ import type {SyntheticEvent} from '../../Types/CoreEventTypes';
 export type AccessibilityRole =
   | 'none'
   | 'button'
+  | 'togglebutton'
   | 'link'
   | 'search'
   | 'image'
@@ -38,8 +39,10 @@ export type AccessibilityRole =
   | 'spinbutton'
   | 'switch'
   | 'tab'
+  | 'tabbar'
   | 'tablist'
   | 'timer'
+  | 'list'
   | 'toolbar';
 
 // the info associated with an accessibility action

package/Libraries/Core/Devtools/parseErrorStack.js

@@ -15,16 +15,6 @@ import type {HermesParsedStack} from './parseHermesStack';
 
 const parseHermesStack = require('./parseHermesStack');
 
-// $FlowFixMe[incompatible-exact]
-export type ExtendedError = Error &
-  interface {
-    jsEngine?: string,
-    preventSymbolication?: boolean,
-    componentStack?: string,
-    forceRedbox?: boolean,
-    isComponentError?: boolean,
-  };
-
 function convertHermesStack(stack: HermesParsedStack): Array<StackFrame> {
   const frames = [];
   for (const entry of stack.entries) {

package/Libraries/Core/Devtools/parseHermesStack.js

@@ -58,7 +58,7 @@ export type HermesParsedStack = {|
 // 4. source URL (filename)
 // 5. line number (1 based)
 // 6. column number (1 based) or virtual offset (0 based)
-const RE_FRAME = /^ {4}at (.+?)(?: \((native)\)?| \((address at )?(.+?):(\d+):(\d+)\))$/;
+const RE_FRAME = /^ {4}at (.+?)(?: \((native)\)?| \((address at )?(.*?):(\d+):(\d+)\))$/;
 
 // Capturing groups:
 // 1. count of skipped frames

package/Libraries/Core/ExceptionsManager.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {ExtendedError} from './Devtools/parseErrorStack';
+import type {ExtendedError} from './ExtendedError';
 import type {ExceptionData} from './NativeExceptionsManager';
 
 class SyntheticError extends Error {
@@ -76,7 +76,9 @@ function reportException(
       e.jsEngine == null ? message : `${message}, js engine: ${e.jsEngine}`;
 
     const isHandledByLogBox =
-      e.forceRedbox !== true && !global.RN$Bridgeless && !global.RN$Express;
+      e.forceRedbox !== true &&
+      global.RN$Bridgeless !== true &&
+      !global.RN$Express;
 
     const data = preprocessException({
       message,
@@ -105,35 +107,37 @@ function reportException(
     }
 
     if (__DEV__ && isHandledByLogBox) {
-      const LogBoxData = require('../LogBox/Data/LogBoxData');
-      LogBoxData.addException({
+      const LogBox = require('../LogBox/LogBox');
+      LogBox.addException({
         ...data,
         isComponentError: !!e.isComponentError,
       });
     }
 
-    NativeExceptionsManager.reportException(data);
+    if (isFatal || e.type !== 'warn') {
+      NativeExceptionsManager.reportException(data);
 
-    if (__DEV__ && !global.RN$Express) {
-      if (e.preventSymbolication === true) {
-        return;
+      if (__DEV__ && !global.RN$Express) {
+        if (e.preventSymbolication === true) {
+          return;
+        }
+        const symbolicateStackTrace = require('./Devtools/symbolicateStackTrace');
+        symbolicateStackTrace(stack)
+          .then(({stack: prettyStack}) => {
+            if (prettyStack) {
+              NativeExceptionsManager.updateExceptionMessage(
+                data.message,
+                prettyStack,
+                currentExceptionID,
+              );
+            } else {
+              throw new Error('The stack is null');
+            }
+          })
+          .catch(error => {
+            console.log('Unable to symbolicate stack trace: ' + error.message);
+          });
       }
-      const symbolicateStackTrace = require('./Devtools/symbolicateStackTrace');
-      symbolicateStackTrace(stack)
-        .then(({stack: prettyStack}) => {
-          if (prettyStack) {
-            NativeExceptionsManager.updateExceptionMessage(
-              data.message,
-              prettyStack,
-              currentExceptionID,
-            );
-          } else {
-            throw new Error('The stack is null');
-          }
-        })
-        .catch(error => {
-          console.log('Unable to symbolicate stack trace: ' + error.message);
-        });
     }
   } else if (reportToConsole) {
     // we feed back into console.error, to make sure any methods that are
@@ -169,15 +173,17 @@ function handleException(e: mixed, isFatal: boolean) {
   }
   try {
     inExceptionHandler = true;
+    /* $FlowFixMe[class-object-subtyping] added when improving typing for this
+     * parameters */
     reportException(error, isFatal, /*reportToConsole*/ true);
   } finally {
     inExceptionHandler = false;
   }
 }
 
-function reactConsoleErrorHandler() {
+function reactConsoleErrorHandler(...args) {
   // bubble up to any original handlers
-  console._errorOriginal.apply(console, arguments);
+  console._errorOriginal(...args);
   if (!console.reportErrorsAsExceptions) {
     return;
   }
@@ -213,31 +219,35 @@ function reactConsoleErrorHandler() {
     return;
   }
 
-  if (arguments[0] && arguments[0].stack) {
+  let error;
+
+  const firstArg = args[0];
+  if (firstArg?.stack) {
     // reportException will console.error this with high enough fidelity.
-    reportException(
-      arguments[0],
-      /* isFatal */ false,
-      /*reportToConsole*/ false,
-    );
+    error = firstArg;
   } else {
     const stringifySafe = require('../Utilities/stringifySafe').default;
-    const str = Array.prototype.map
-      .call(arguments, value =>
-        typeof value === 'string' ? value : stringifySafe(value),
-      )
-      .join(' ');
-
-    if (str.slice(0, 9) === 'Warning: ') {
+    if (typeof firstArg === 'string' && firstArg.startsWith('Warning: ')) {
       // React warnings use console.error so that a stack trace is shown, but
       // we don't (currently) want these to show a redbox
       // (Note: Logic duplicated in polyfills/console.js.)
       return;
     }
-    const error: ExtendedError = new SyntheticError(str);
+    const message = args
+      .map(arg => (typeof arg === 'string' ? arg : stringifySafe(arg)))
+      .join(' ');
+
+    error = new SyntheticError(message);
     error.name = 'console.error';
-    reportException(error, /* isFatal */ false, /*reportToConsole*/ false);
   }
+
+  reportException(
+    /* $FlowFixMe[class-object-subtyping] added when improving typing for this
+     * parameters */
+    error,
+    false, // isFatal
+    false, // reportToConsole
+  );
 }
 
 /**

package/Libraries/Core/ExtendedError.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ * @format
+ */
+
+export type ExtendedError = Error & {
+  jsEngine?: string,
+  preventSymbolication?: boolean,
+  componentStack?: string,
+  forceRedbox?: boolean,
+  isComponentError?: boolean,
+  type?: string,
+  ...
+};

package/Libraries/Core/InitializeCore.js

@@ -43,6 +43,7 @@ require('./setUpSegmentFetcher');
 if (__DEV__) {
   require('./checkNativeVersion');
   require('./setUpDeveloperTools');
+  require('../LogBox/LogBox').install();
 }
 
 const GlobalPerformanceLogger = require('../Utilities/GlobalPerformanceLogger');

package/Libraries/Core/ReactFiberErrorDialog.js

@@ -8,6 +8,10 @@
  * @flow strict-local
  */
 
+import {handleException, SyntheticError} from './ExceptionsManager';
+
+import type {ExtendedError} from './ExtendedError';
+
 export type CapturedError = {
   +componentStack: string,
   +error: mixed,
@@ -15,38 +19,44 @@ export type CapturedError = {
   ...
 };
 
-import type {ExtendedError} from './Devtools/parseErrorStack';
-
-import {handleException, SyntheticError} from './ExceptionsManager';
+const ReactFiberErrorDialog = {
+  /**
+   * Intercept lifecycle errors and ensure they are shown with the correct stack
+   * trace within the native redbox component.
+   */
+  showErrorDialog({componentStack, error: errorValue}: CapturedError): boolean {
+    let error: ?ExtendedError;
+
+    // Typically, `errorValue` should be an error. However, other values such as
+    // strings (or even null) are sometimes thrown.
+    if (errorValue instanceof Error) {
+      /* $FlowFixMe[class-object-subtyping] added when improving typing for
+       * this parameters */
+      error = (errorValue: ExtendedError);
+    } else if (typeof errorValue === 'string') {
+      /* $FlowFixMe[class-object-subtyping] added when improving typing for
+       * this parameters */
+      error = (new SyntheticError(errorValue): ExtendedError);
+    } else {
+      /* $FlowFixMe[class-object-subtyping] added when improving typing for
+       * this parameters */
+      error = (new SyntheticError('Unspecified error'): ExtendedError);
+    }
+    try {
+      error.componentStack = componentStack;
+      error.isComponentError = true;
+    } catch {
+      // Ignored.
+    }
+
+    handleException(error, false);
+
+    // Return false here to prevent ReactFiberErrorLogger default behavior of
+    // logging error details to console.error. Calls to console.error are
+    // automatically routed to the native redbox controller, which we've already
+    // done above by calling ExceptionsManager.
+    return false;
+  },
+};
 
-/**
- * Intercept lifecycle errors and ensure they are shown with the correct stack
- * trace within the native redbox component.
- */
-function showErrorDialog(capturedError: CapturedError): boolean {
-  const {componentStack, error} = capturedError;
-
-  let errorToHandle;
-
-  // Typically Errors are thrown but eg strings or null can be thrown as well.
-  if (error instanceof Error) {
-    errorToHandle = (error: ExtendedError);
-  } else if (typeof error === 'string') {
-    errorToHandle = (new SyntheticError(error): ExtendedError);
-  } else {
-    errorToHandle = (new SyntheticError('Unspecified error'): ExtendedError);
-  }
-  try {
-    errorToHandle.componentStack = componentStack;
-    errorToHandle.isComponentError = true;
-  } catch (e) {}
-  handleException(errorToHandle, false);
-
-  // Return false here to prevent ReactFiberErrorLogger default behavior of
-  // logging error details to console.error. Calls to console.error are
-  // automatically routed to the native redbox controller, which we've already
-  // done above by calling ExceptionsManager.
-  return false;
-}
-
-module.exports = {showErrorDialog};
+export default ReactFiberErrorDialog;

package/Libraries/Core/ReactNativeVersion.js

@@ -13,5 +13,5 @@ exports.version = {
   major: 0,
   minor: 0,
   patch: 0,
-  prerelease: '17be3a003',
+  prerelease: '18697adec',
 };