Permalink
Browse files

Throw flow error when trying to access a style that is not defined on…

… a stylesheet

Summary:
I thought it would be useful to help clear out references to no longer used styles and also catch typos on style names to have flow error when we try to access a style that isn't defined.

Example:

```javascript
export default class AuthenticationScreen extends React.Component {
  render() {
    // This throws an error because `continer` is misspelled
    return (
      <View style={styles.continer} />
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
}
```

```javascript
export default class AuthenticationScreen extends React.Component {
  render() {
    // This throws an error because no fancyContainer style is defined
    return (
      <View style={[styles.container, styles.fancyContainer]} />
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
}
```

All credit goes to jeffmo in this tweet: https://twitter.com/lbljeffmo/status/755179096271888385

Also included in the PR is some cleanup on styles that
Closes #8876

Differential Revision: D3584983

Pulled By: yungsters

fbshipit-source-id: 0ee0e12ff3d976c137d932688e323c26690e0a52
  • Loading branch information...
1 parent 4ccd14f commit a564af853f108e071e941ac08be4cde864f5bfae @brentvatne brentvatne committed with Facebook Github Bot 9 Jul 19, 2016
@@ -198,7 +198,7 @@ var CameraRollView = React.createClass({
_renderFooterSpinner: function() {
if (!this.state.noMore) {
- return <ActivityIndicator style={styles.spinner} />;
+ return <ActivityIndicator />;
}
return null;
},
@@ -165,7 +165,7 @@ var MultipleSourcesExample = React.createClass({
},
render: function() {
return (
- <View style={styles.container}>
+ <View>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Text
style={styles.touchableText}
@@ -180,7 +180,7 @@ var MultipleSourcesExample = React.createClass({
</View>
<Text>Container image size: {this.state.width}x{this.state.height} </Text>
<View
- style={[styles.imageContainer, {height: this.state.height, width: this.state.width}]} >
+ style={{height: this.state.height, width: this.state.width}} >
<Image
style={{flex: 1}}
source={[
@@ -217,7 +217,6 @@ const NavigatorIOSExample = React.createClass({
component: NavigatorIOSExamplePage,
passProps: {onExampleExit},
}}
- itemWrapperStyle={styles.itemWrapper}
tintColor="#008888"
/>
);
@@ -178,8 +178,8 @@ var Button = React.createClass({
render: function() {
return (
<TouchableWithoutFeedback onPress={this._handlePress}>
- <View style={[styles.button, this.props.enabled ? {} : styles.buttonDisabled]}>
- <Text style={styles.buttonText}>{this.props.text}</Text>
+ <View style={styles.button}>
+ <Text>{this.props.text}</Text>
</View>
</TouchableWithoutFeedback>
);
@@ -379,7 +379,7 @@ class FormUploader extends React.Component {
}
return (
<View>
- <View style={[styles.paramRow, styles.photoRow]}>
+ <View style={styles.paramRow}>
<Text style={styles.photoLabel}>
Random photo from your library
(<Text style={styles.textButton} onPress={this._fetchRandomPhoto}>
@@ -160,8 +160,8 @@ module.exports = {
/**
* Creates a StyleSheet style reference from the given object.
*/
- create(obj: {[key: string]: any}): {[key: string]: number} {
- var result = {};
+ create<T: Object, U>(obj: T): {[key:$Keys<T>]: number} {
+ var result: T = (({}: any): T);
for (var key in obj) {
StyleSheetValidation.validateStyle(key, obj);
result[key] = ReactNativePropRegistry.register(obj[key]);

0 comments on commit a564af8

Please sign in to comment.