Restore Previous Behavior for StyleSheet Validation of Null/Undefined Styles (#29171)

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
This commit is contained in:
Nick Gerleman 2020-06-25 15:29:10 -07:00 коммит произвёл Facebook GitHub Bot
Родитель 530d11c506
Коммит e75557b48f
1 изменённых файлов: 3 добавлений и 0 удалений

Просмотреть файл

@ -51,6 +51,9 @@ class StyleSheetValidation {
if (!__DEV__ || global.__RCTProfileIsProfiling) { if (!__DEV__ || global.__RCTProfileIsProfiling) {
return; return;
} }
if (!styles[name]) {
return;
}
const styleProps = Object.keys(styles[name]); const styleProps = Object.keys(styles[name]);
for (const prop of styleProps) { for (const prop of styleProps) {
StyleSheetValidation.validateStyleProp( StyleSheetValidation.validateStyleProp(