Skip to content

Commit

Permalink
Restore Previous Behavior for StyleSheet Validation of Null/Undefined…
Browse files Browse the repository at this point in the history
… Styles (#29171)

Summary:
#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: #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
  • Loading branch information
NickGerleman authored and grabbou committed Jul 22, 2020
1 parent b5fd5d0 commit 30b4d15
Showing 1 changed file with 3 additions and 0 deletions.
3 changes: 3 additions & 0 deletions Libraries/StyleSheet/StyleSheetValidation.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,9 @@ class StyleSheetValidation {
if (!__DEV__ || global.__RCTProfileIsProfiling) {
return;
}
if (!styles[name]) {
return;
}
const styleProps = Object.keys(styles[name]);
for (const prop of styleProps) {
StyleSheetValidation.validateStyleProp(
Expand Down

0 comments on commit 30b4d15

Please sign in to comment.