From a564af853f108e071e941ac08be4cde864f5bfae Mon Sep 17 00:00:00 2001
From: Brent Vatne <brentvatne@gmail.com>
Date: Mon, 18 Jul 2016 23:18:03 -0700
Subject: [PATCH] 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 https://github.com/facebook/react-native/pull/8876

Differential Revision: D3584983

Pulled By: yungsters

fbshipit-source-id: 0ee0e12ff3d976c137d932688e323c26690e0a52
---
 Examples/UIExplorer/js/CameraRollView.js      | 2 +-
 Examples/UIExplorer/js/ImageExample.js        | 4 ++--
 Examples/UIExplorer/js/NavigatorIOSExample.js | 1 -
 Examples/UIExplorer/js/WebViewExample.js      | 4 ++--
 Examples/UIExplorer/js/XHRExample.ios.js      | 2 +-
 Libraries/StyleSheet/StyleSheet.js            | 4 ++--
 6 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/Examples/UIExplorer/js/CameraRollView.js b/Examples/UIExplorer/js/CameraRollView.js
index 238f00dc593..8bb9fbd2b07 100644
--- a/Examples/UIExplorer/js/CameraRollView.js
+++ b/Examples/UIExplorer/js/CameraRollView.js
@@ -198,7 +198,7 @@ var CameraRollView = React.createClass({
 
   _renderFooterSpinner: function() {
     if (!this.state.noMore) {
-      return <ActivityIndicator style={styles.spinner} />;
+      return <ActivityIndicator />;
     }
     return null;
   },
diff --git a/Examples/UIExplorer/js/ImageExample.js b/Examples/UIExplorer/js/ImageExample.js
index 1e6c6de19b4..34418ea6723 100644
--- a/Examples/UIExplorer/js/ImageExample.js
+++ b/Examples/UIExplorer/js/ImageExample.js
@@ -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={[
diff --git a/Examples/UIExplorer/js/NavigatorIOSExample.js b/Examples/UIExplorer/js/NavigatorIOSExample.js
index e45196cf0d9..4d8f1f52ac7 100644
--- a/Examples/UIExplorer/js/NavigatorIOSExample.js
+++ b/Examples/UIExplorer/js/NavigatorIOSExample.js
@@ -217,7 +217,6 @@ const NavigatorIOSExample = React.createClass({
           component: NavigatorIOSExamplePage,
           passProps: {onExampleExit},
         }}
-        itemWrapperStyle={styles.itemWrapper}
         tintColor="#008888"
       />
     );
diff --git a/Examples/UIExplorer/js/WebViewExample.js b/Examples/UIExplorer/js/WebViewExample.js
index d41ea15a108..6f1066701d4 100644
--- a/Examples/UIExplorer/js/WebViewExample.js
+++ b/Examples/UIExplorer/js/WebViewExample.js
@@ -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>
     );
diff --git a/Examples/UIExplorer/js/XHRExample.ios.js b/Examples/UIExplorer/js/XHRExample.ios.js
index 5c49d96d016..053bad55917 100644
--- a/Examples/UIExplorer/js/XHRExample.ios.js
+++ b/Examples/UIExplorer/js/XHRExample.ios.js
@@ -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}>
diff --git a/Libraries/StyleSheet/StyleSheet.js b/Libraries/StyleSheet/StyleSheet.js
index 28ee3fae54c..c9eab42c4bb 100644
--- a/Libraries/StyleSheet/StyleSheet.js
+++ b/Libraries/StyleSheet/StyleSheet.js
@@ -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]);