mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Nick Gerleman
e75557b48f
Summary: https://github.com/facebook/react-native/issues/27264 changed stylesheet validation to avoid enumerating properties on the prototype of a style. It introduces a secondary behavior change, where null/undefined styles used to be tolerated but now lead to an exception. This is because `for in undefined` will noop where `for of Object.keys(undefined)` will throw. This scenario of undefined/null styles seems to actually show up in practice and was previously well tolerated. E.g. `Button.js` has code that looks like this: ```jsx const styles = StyleSheet.create({ button: Platform.select({ ios: {}, android: { elevation: 4, // Material design blue from https://material.google.com/style/color.html#color-color-palette backgroundColor: '#2196F3', borderRadius: 2, }, }), ``` For non ios/Android platforms, that creates a style object which looks like: ```js { button: undefined, ... } ``` This previously meant that the component would be unstyled if created, but now means out-of-tree platforms throw if the builtin Button component is required. This change restores the previous `for in` loop but adds a `hasOwnProperty` check to avoid properties on prototypes. ## Changelog [General] [Fixed] - Restore Previous Behavior for StyleSheet Validation of Null/Undefined Styles Pull Request resolved: https://github.com/facebook/react-native/pull/29171 Test Plan: Validated that importing Buttons will no longer cause an exception, and that invalid properties are still caught. Reviewed By: JoshuaGross Differential Revision: D22118379 Pulled By: TheSavior fbshipit-source-id: 650c64b934ccd12a3dc1b75e95debc359925ad73
101 lines
2.9 KiB
JavaScript
101 lines
2.9 KiB
JavaScript
/**
|
|
* 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.
|
|
*
|
|
* @format
|
|
* @flow
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
const DeprecatedImageStylePropTypes = require('../DeprecatedPropTypes/DeprecatedImageStylePropTypes');
|
|
const DeprecatedTextStylePropTypes = require('../DeprecatedPropTypes/DeprecatedTextStylePropTypes');
|
|
const DeprecatedViewStylePropTypes = require('../DeprecatedPropTypes/DeprecatedViewStylePropTypes');
|
|
|
|
const invariant = require('invariant');
|
|
|
|
// Hardcoded because this is a legit case but we don't want to load it from
|
|
// a private API. We might likely want to unify style sheet creation with how it
|
|
// is done in the DOM so this might move into React. I know what I'm doing so
|
|
// plz don't fire me.
|
|
const ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
|
|
|
|
class StyleSheetValidation {
|
|
static validateStyleProp(prop: string, style: Object, caller: string) {
|
|
if (!__DEV__ || global.__RCTProfileIsProfiling) {
|
|
return;
|
|
}
|
|
if (allStylePropTypes[prop] === undefined) {
|
|
const message1 = '"' + prop + '" is not a valid style property.';
|
|
const message2 =
|
|
'\nValid style props: ' +
|
|
JSON.stringify(Object.keys(allStylePropTypes).sort(), null, ' ');
|
|
styleError(message1, style, caller, message2);
|
|
}
|
|
const error = allStylePropTypes[prop](
|
|
style,
|
|
prop,
|
|
caller,
|
|
'prop',
|
|
null,
|
|
ReactPropTypesSecret,
|
|
);
|
|
if (error) {
|
|
styleError(error.message, style, caller);
|
|
}
|
|
}
|
|
|
|
static validateStyle(name: string, styles: Object) {
|
|
if (!__DEV__ || global.__RCTProfileIsProfiling) {
|
|
return;
|
|
}
|
|
if (!styles[name]) {
|
|
return;
|
|
}
|
|
const styleProps = Object.keys(styles[name]);
|
|
for (const prop of styleProps) {
|
|
StyleSheetValidation.validateStyleProp(
|
|
prop,
|
|
styles[name],
|
|
'StyleSheet ' + name,
|
|
);
|
|
}
|
|
}
|
|
|
|
/* $FlowFixMe(>=0.85.0 site=react_native_fb) This comment suppresses an error
|
|
* found when Flow v0.85 was deployed. To see the error, delete this comment
|
|
* and run Flow. */
|
|
static addValidStylePropTypes(stylePropTypes) {
|
|
if (!__DEV__ || global.__RCTProfileIsProfiling) {
|
|
return;
|
|
}
|
|
for (const key in stylePropTypes) {
|
|
allStylePropTypes[key] = stylePropTypes[key];
|
|
}
|
|
}
|
|
}
|
|
|
|
const styleError = function(message1, style, caller?, message2?) {
|
|
invariant(
|
|
false,
|
|
message1 +
|
|
'\n' +
|
|
(caller || '<<unknown>>') +
|
|
': ' +
|
|
JSON.stringify(style, null, ' ') +
|
|
(message2 || ''),
|
|
);
|
|
};
|
|
|
|
const allStylePropTypes = {};
|
|
|
|
if (__DEV__ && !global.__RCTProfileIsProfiling) {
|
|
StyleSheetValidation.addValidStylePropTypes(DeprecatedImageStylePropTypes);
|
|
StyleSheetValidation.addValidStylePropTypes(DeprecatedTextStylePropTypes);
|
|
StyleSheetValidation.addValidStylePropTypes(DeprecatedViewStylePropTypes);
|
|
}
|
|
|
|
module.exports = StyleSheetValidation;
|