Skip to content
Permalink
Browse files
Fix stylesheet validation of functions with additional prototype meth…
…ods (#27264)

Summary:
Some babel plugins add additional methods to `Function.prototype` (see https://github.com/MatAtBread/fast-async):

```js
Function.prototype.$asyncbind = function $asyncbind(self, catcher) {
...
```

Although undocumented, React Native allows functions to be passed to `StyleSheet.create()` for dynamic styling:

```js
const styles = StyleSheet.create({
  animalItem: height => ({ height })
});
```

If there are additional custom methods on `Function.prototype`, React Native's `StyleSheetValidation.validateStyle` will loop through these properties and raise an error because those properties are not valid style keys, because it loops through _all_ properties, including inherited ones.

![Simulator Screen Shot - iPhone 11 Pro Max - 2019-11-19 at 12 04 49](https://user-images.githubusercontent.com/4031216/69145112-ce589100-0ac4-11ea-80d7-e93d59b935a8.png)

This PR modifies `StyleSheetValidation.validateStyle` to only loop through the style's own properties, instead of including inherited ones.

## Changelog

[General] [Fixed] - Fix stylesheet validation for functions with custom prototype methods.
Pull Request resolved: #27264

Test Plan: - Tested that non-function style properties are still validated

Differential Revision: D18694895

Pulled By: hramos

fbshipit-source-id: b36f4a62a435e7b6a689398de3bcc06d6bb14293
  • Loading branch information
Freeman Latif authored and facebook-github-bot committed Dec 18, 2019
1 parent f21fa4e commit f464dad5d4f0fbf1cb23e21d22907ffddeaf97e4
Showing 1 changed file with 2 additions and 1 deletion.
@@ -51,7 +51,8 @@ class StyleSheetValidation {
if (!__DEV__ || global.__RCTProfileIsProfiling) {
return;
}
for (const prop in styles[name]) {
const styleProps = Object.keys(styles[name]);
for (const prop of styleProps) {
StyleSheetValidation.validateStyleProp(
prop,
styles[name],

0 comments on commit f464dad

Please sign in to comment.