RN: Statically Define ReactNativeStyleAttributes

Summary: Rewrites `ReactNativeStyleAttributes` so that it is statically defined. This means it will no longer require a handful of modules that defines `prop-types` only to use their keys. Functionally, this should be equivalent to what was there before. Changelog: [Internal] Reviewed By: TheSavior Differential Revision: D29019308 fbshipit-source-id: 47f85a8c7703a133c68c20c7f3e14e1026ce4ff2
facebook · Jun 12, 2021 · ed76d4d · ed76d4d
1 parent 33b3858
commit ed76d4d
Showing 1 changed file with 132 additions and 28 deletions.
diff --git a/Libraries/Components/View/ReactNativeStyleAttributes.js b/Libraries/Components/View/ReactNativeStyleAttributes.js
@@ -8,41 +8,145 @@
  * @flow
  */
 
-import DeprecatedImageStylePropTypes from '../../DeprecatedPropTypes/DeprecatedImageStylePropTypes';
-import DeprecatedTextStylePropTypes from '../../DeprecatedPropTypes/DeprecatedTextStylePropTypes';
-import DeprecatedViewStylePropTypes from '../../DeprecatedPropTypes/DeprecatedViewStylePropTypes';
 import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes';
 import processColor from '../../StyleSheet/processColor';
 import processTransform from '../../StyleSheet/processTransform';
 import sizesDiffer from '../../Utilities/differ/sizesDiffer';
 
-const ReactNativeStyleAttributes: {[string]: AnyAttributeType} = {};
+const colorAttributes = {process: processColor};
 
-for (const attributeName of Object.keys({
-  ...DeprecatedViewStylePropTypes,
-  ...DeprecatedTextStylePropTypes,
-  ...DeprecatedImageStylePropTypes,
-})) {
-  ReactNativeStyleAttributes[attributeName] = true;
-}
+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,
 
-ReactNativeStyleAttributes.transform = {process: processTransform};
-ReactNativeStyleAttributes.shadowOffset = {diff: sizesDiffer};
+  /**
+   * Shadow
+   */
+  elevation: true,
+  shadowColor: colorAttributes,
+  shadowOffset: {diff: sizesDiffer},
+  shadowOpacity: true,
+  shadowRadius: 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;
+  /**
+   * 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
+
+  /**
+   * 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,
+
+  /**
+   * 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,
+
+  /**
+   * Image
+   */
+  overlayColor: colorAttributes,
+  resizeMode: true,
+  tintColor: colorAttributes,
+};
 
 module.exports = ReactNativeStyleAttributes;