Permalink
Browse files

Refine StyleSheet Flow types

Summary:
Nice addition of the recent Flow types for style props in 9c29ee1, 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 #16741

Reviewed By: frantic

Differential Revision: D6278010

Pulled By: TheSavior

fbshipit-source-id: 0170a233ab71d29f445786f5e695463f9730db3a
  • Loading branch information...
jamesisaac authored and facebook-github-bot committed Nov 9, 2017
1 parent e5a4ea9 commit 820cfa1f3b79406e47cb873773cadafefe0effb1
Showing with 2 additions and 2 deletions.
  1. +2 −2 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) {

0 comments on commit 820cfa1

Please sign in to comment.