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 facebook-github-bot committed Jun 25, 2020
1 parent 530d11c commit e75557b
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

2 comments on commit e75557b

@ankitjpk
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, thanks that worked for me too.

@teamzz111
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When is it going to be merged and published?

Please sign in to comment.