From 820cfa1f3b79406e47cb873773cadafefe0effb1 Mon Sep 17 00:00:00 2001
From: James Isaac <james@jamesisaac.com>
Date: Thu, 9 Nov 2017 11:41:08 -0800
Subject: [PATCH] Refine StyleSheet Flow types

Summary:
Nice addition of the recent Flow types for style props in 9c29ee1504a66979d7e87f60e42d437e044a1ada, however I think there are some slight issues in the definition.

`type Styles = {[key: string]: Object}` makes sense, as it's referring to the set of named style groups a user creates a `StyleSheet` from, e.g.

```javascript
const styles: StyleSheet = StyleSheet.create({
  container: {
    height: 20
  },
  text: {
    color: '#999',
    fontSize: 12,
  },
}: Styles)
```

However `type StyleValue = {[key: string]: Object}` doesn't make sense.  You actually want only the `Object` portion of that definition, presuming it's meant to be used like below:

```javascript
type MyTextProps = {
  style: StyleProp,
}

<MyText style={{ color: '#999', fontSize: 12 }}>Hello</Text>
```

 ---

I've also added `void` to the `StyleValue`, as undefined seems to be handled fine, and can be a useful shorthand in JSX.

 ---

And finally, I've allowed nesting of style prop arrays, by making StyleProp self-referencing, as RN seems to flatten those without issue.  This can be important if you're passing in a style prop quite high up the component tree, and sticking it in an array with other styles at several points while it's passed down.

N/A (These types aren't referenced anywhere else)

[INTERNAL] [MINOR] [StyleSheet] - Refine Flow types
Closes https://github.com/facebook/react-native/pull/16741

Reviewed By: frantic

Differential Revision: D6278010

Pulled By: TheSavior

fbshipit-source-id: 0170a233ab71d29f445786f5e695463f9730db3a
---
 Libraries/StyleSheet/StyleSheet.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Libraries/StyleSheet/StyleSheet.js b/Libraries/StyleSheet/StyleSheet.js
index 8fd9b1f6cd5..411cad91b7c 100644
--- a/Libraries/StyleSheet/StyleSheet.js
+++ b/Libraries/StyleSheet/StyleSheet.js
@@ -20,8 +20,8 @@ const flatten = require('flattenStyle');
 
 export type Styles = {[key: string]: Object};
 export type StyleSheet<S: Styles> = {[key: $Keys<S>]: number};
-export type StyleValue = {[key: string]: Object} | number | false | null;
-export type StyleProp = StyleValue | Array<StyleValue>;
+export type StyleValue = Object | number | false | null | void | '';
+export type StyleProp = StyleValue | Array<StyleProp>;
 
 let hairlineWidth = PixelRatio.roundToNearestPixel(0.4);
 if (hairlineWidth === 0) {