status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-02-05 06:04:15 +00:00
Code Issues Projects Releases Wiki Activity

Refine StyleSheet Flow types

Browse Source 
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
This commit is contained in:
James Isaac 2017-11-09 11:41:08 -08:00 committed by Facebook Github Bot
parent e5a4ea97d9
commit 820cfa1f3b
1 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Libraries/StyleSheet/StyleSheet.js
View File

@ -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) {