Merge pull request #2136 from frantic/updates-2015-07-27

Updates 2015 07 27

.flowconfig

@@ -9,11 +9,13 @@
 
 # Ignore react-tools where there are overlaps, but don't ignore anything that
 # react-native relies on
-.*/node_modules/react-tools/src/vendor/core/ExecutionEnvironment.js
-.*/node_modules/react-tools/src/browser/eventPlugins/ResponderEventPlugin.js
-.*/node_modules/react-tools/src/browser/ui/React.js
-.*/node_modules/react-tools/src/core/ReactInstanceHandles.js
-.*/node_modules/react-tools/src/event/EventPropagators.js
+.*/node_modules/react-tools/src/React.js
+.*/node_modules/react-tools/src/renderers/shared/reconciler/ReactInstanceHandles.js
+.*/node_modules/react-tools/src/renderers/shared/event/EventPropagators.js
+.*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderEventPlugin.js
+.*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderSyntheticEvent.js
+.*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderTouchHistoryStore.js
+.*/node_modules/react-tools/src/shared/vendor/core/ExecutionEnvironment.js
 
 # Ignore commoner tests
 .*/node_modules/commoner/test/.*

Examples/2048/Game2048.js

@@ -24,7 +24,7 @@ var {
   View,
 } = React;
 
-var AnimationExperimental = require('AnimationExperimental');
+var Animated = require('Animated');
 var GameBoard = require('GameBoard');
 var TouchableBounce = require('TouchableBounce');
 
@@ -53,58 +53,58 @@ class Board extends React.Component {
 }
 
 class Tile extends React.Component {
-  calculateOffset(): {top: number; left: number; opacity: number} {
+  static _getPosition(index): number {
+    return BOARD_PADDING + (index * (CELL_SIZE + CELL_MARGIN * 2) + CELL_MARGIN);
+  }
+
+  constructor(props: {}) {
+    super(props);
+
     var tile = this.props.tile;
 
-    var pos = (i) => {
-      return BOARD_PADDING + (i * (CELL_SIZE + CELL_MARGIN * 2) + CELL_MARGIN);
+    this.state = {
+      opacity: new Animated.Value(0),
+      top: new Animated.Value(Tile._getPosition(tile.toRow())),
+      left: new Animated.Value(Tile._getPosition(tile.toColumn())),
     };
+  }
 
-    var animationPosition = (i) => {
-      return pos(i) + (CELL_SIZE / 2);
-    };
+  calculateOffset(): {top: number; left: number; opacity: number} {
+    var tile = this.props.tile;
 
     var offset = {
-      top: pos(tile.toRow()),
-      left: pos(tile.toColumn()),
-      opacity: 1,
+      top: this.state.top,
+      left: this.state.left,
+      opacity: this.state.opacity,
     };
 
     if (tile.isNew()) {
-      offset.opacity = 0;
-    } else {
-      var point = {
-        x: animationPosition(tile.toColumn()),
-        y: animationPosition(tile.toRow()),
-      };
-      AnimationExperimental.startAnimation({
-        node: this.refs['this'],
+      Animated.timing(this.state.opacity, {
         duration: 100,
-        easing: 'easeInOutQuad',
-        property: 'position',
-        toValue: point,
-      });
+        toValue: 1,
+      }).start();
+    } else {
+      Animated.parallel([
+        Animated.timing(offset.top, {
+          duration: 100,
+          toValue: Tile._getPosition(tile.toRow()),
+        }),
+        Animated.timing(offset.left, {
+          duration: 100,
+          toValue: Tile._getPosition(tile.toColumn()),
+        }),
+      ]).start();
     }
     return offset;
   }
 
-  componentDidMount() {
-    AnimationExperimental.startAnimation({
-      node: this.refs['this'],
-      duration: 100,
-      easing: 'easeInOutQuad',
-      property: 'opacity',
-      toValue: 1,
-    });
-  }
-
   render() {
     var tile = this.props.tile;
 
     var tileStyles = [
       styles.tile,
       styles['tile' + tile.value],
-      this.calculateOffset()
+      this.calculateOffset(),
     ];
 
     var textStyles = [
@@ -115,9 +115,9 @@ class Tile extends React.Component {
     ];
 
     return (
-      <View ref="this" style={tileStyles}>
+      <Animated.View style={tileStyles}>
         <Text style={textStyles}>{tile.value}</Text>
-      </View>
+      </Animated.View>
     );
   }
 }

Examples/Movies/SearchScreen.js

@@ -262,6 +262,7 @@ var SearchScreen = React.createClass({
   ) {
     return (
       <MovieCell
+        key={movie.id}
         onSelect={() => this.selectMovie(movie)}
         onHighlight={() => highlightRowFunc(sectionID, rowID)}
         onUnhighlight={() => highlightRowFunc(null, null)}
@@ -307,7 +308,7 @@ var NoMovies = React.createClass({
   render: function() {
     var text = '';
     if (this.props.filter) {
-      text = `No results for “${this.props.filter}”`;
+      text = `No results for "${this.props.filter}"`;
     } else if (!this.props.isLoading) {
       // If we're looking at the latest movies, aren't currently loading, and
       // still have no results, show a message

Examples/SampleApp/_flowconfig

@@ -9,11 +9,14 @@
 
 # Ignore react-tools where there are overlaps, but don't ignore anything that
 # react-native relies on
-.*/node_modules/react-tools/src/vendor/core/ExecutionEnvironment.js
-.*/node_modules/react-tools/src/browser/eventPlugins/ResponderEventPlugin.js
-.*/node_modules/react-tools/src/browser/ui/React.js
-.*/node_modules/react-tools/src/core/ReactInstanceHandles.js
-.*/node_modules/react-tools/src/event/EventPropagators.js
+.*/node_modules/react-tools/src/React.js
+.*/node_modules/react-tools/src/renderers/shared/reconciler/ReactInstanceHandles.js
+.*/node_modules/react-tools/src/renderers/shared/event/EventPropagators.js
+.*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderEventPlugin.js
+.*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderSyntheticEvent.js
+.*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderTouchHistoryStore.js
+.*/node_modules/react-tools/src/shared/vendor/core/ExecutionEnvironment.js
+
 
 # Ignore commoner tests
 .*/node_modules/commoner/test/.*

Examples/UIExplorer/StatusBarIOSExample.js

@@ -83,6 +83,26 @@ exports.examples = [{
       </View>
     );
   },
+}, {
+  title: 'Status Bar Network Activity Indicator',
+  render() {
+    return (
+      <View>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => StatusBarIOS.setNetworkActivityIndicatorVisible(true)}>
+          <View style={styles.button}>
+            <Text>setNetworkActivityIndicatorVisible(true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => StatusBarIOS.setNetworkActivityIndicatorVisible(false)}>
+          <View style={styles.button}>
+            <Text>setNetworkActivityIndicatorVisible(false)</Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  },
 }];
 
 var styles = StyleSheet.create({

Examples/UIExplorer/TabBarIOSExample.js

@@ -39,20 +39,20 @@ var TabBarExample = React.createClass({
     };
   },
 
-  _renderContent: function(color: string, pageText: string) {
+  _renderContent: function(color: string, pageText: string, num?: number) {
     return (
       <View style={[styles.tabContent, {backgroundColor: color}]}>
         <Text style={styles.tabText}>{pageText}</Text>
-        <Text style={styles.tabText}>{this.state.presses} re-renders of the More tab</Text>
+        <Text style={styles.tabText}>{num} re-renders of the {pageText}</Text>
       </View>
     );
   },
 
   render: function() {
     return (
       <TabBarIOS
-        tintColor="black"
-        barTintColor="#3abeff">
+        tintColor="white"
+        barTintColor="darkslateblue">
         <TabBarIOS.Item
           title="Blue Tab"
           selected={this.state.selectedTab === 'blueTab'}
@@ -73,7 +73,7 @@ var TabBarExample = React.createClass({
               notifCount: this.state.notifCount + 1,
             });
           }}>
-          {this._renderContent('#783E33', 'Red Tab')}
+          {this._renderContent('#783E33', 'Red Tab', this.state.notifCount)}
         </TabBarIOS.Item>
         <TabBarIOS.Item
           systemIcon="more"
@@ -84,7 +84,7 @@ var TabBarExample = React.createClass({
               presses: this.state.presses + 1
             });
           }}>
-          {this._renderContent('#21551C', 'Green Tab')}
+          {this._renderContent('#21551C', 'Green Tab', this.state.presses)}
         </TabBarIOS.Item>
       </TabBarIOS>
     );

Examples/UIExplorer/TextExample.ios.js

@@ -269,7 +269,7 @@ exports.examples = [
           right right right right right right right right right right right right right
         </Text>
         <Text style={{textAlign: 'justify'}}>
-          justify: this text component's contents are laid out with "textAlign: justify"
+          justify: this text component{"'"}s contents are laid out with "textAlign: justify"
           and as you can see all of the lines except the last one span the
           available width of the parent container.
         </Text>
@@ -369,6 +369,15 @@ exports.examples = [
       </View>
     );
   },
+}, {
+  title: 'Text highlighting (tap the link to see highlight)',
+  render: function() {
+    return (
+      <View>
+        <Text>Lorem ipsum dolor sit amet, <Text suppressHighlighting={false} style={{backgroundColor: 'white', textDecorationLine: 'underline', color: 'blue'}} onPress={() => null}>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</Text> exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
+      </View>
+    );
+  },
 }];
 
 var styles = StyleSheet.create({

Examples/UIExplorer/TextInputExample.js

@@ -411,7 +411,7 @@ exports.examples = [
             style={styles.multiline}
           />
           <TextInput
-            placeholder="mutliline text input with font styles and placeholder"
+            placeholder="multiline text input with font styles and placeholder"
             multiline={true}
             clearTextOnFocus={true}
             autoCorrect={true}
@@ -421,7 +421,7 @@ exports.examples = [
             style={[styles.multiline, styles.multilineWithFontStyles]}
           />
           <TextInput
-            placeholder="uneditable mutliline text input"
+            placeholder="uneditable multiline text input"
             editable={false}
             multiline={true}
             style={styles.multiline}

Examples/UIExplorer/UIExplorer.xcodeproj/project.pbxproj

@@ -1034,9 +1034,11 @@
 				GCC_SYMBOLS_PRIVATE_EXTERN = NO;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
 				GCC_WARN_ABOUT_MISSING_NEWLINE = YES;
+				GCC_WARN_ABOUT_MISSING_PROTOTYPES = YES;
 				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
 				GCC_WARN_INITIALIZER_NOT_FULLY_BRACKETED = YES;
 				GCC_WARN_MULTIPLE_DEFINITION_TYPES_FOR_SELECTOR = YES;
+				GCC_WARN_SHADOW = YES;
 				GCC_WARN_STRICT_SELECTOR_MATCH = YES;
 				GCC_WARN_UNDECLARED_SELECTOR = YES;
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
@@ -1089,9 +1091,11 @@
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
 				GCC_WARN_ABOUT_MISSING_NEWLINE = YES;
+				GCC_WARN_ABOUT_MISSING_PROTOTYPES = YES;
 				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
 				GCC_WARN_INITIALIZER_NOT_FULLY_BRACKETED = YES;
 				GCC_WARN_MULTIPLE_DEFINITION_TYPES_FOR_SELECTOR = YES;
+				GCC_WARN_SHADOW = YES;
 				GCC_WARN_STRICT_SELECTOR_MATCH = YES;
 				GCC_WARN_UNDECLARED_SELECTOR = YES;
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;

Examples/UIExplorer/UIExplorerList.ios.js

@@ -121,23 +121,30 @@ class UIExplorerList extends React.Component {
     );
   }
 
-  componentWillMount() {
-    this.props.navigator.navigationContext.addListener('didfocus', function(event) {
-      if (event.data.route.title === 'UIExplorer') {
-        Settings.set({visibleExample: null});
-      }
-    });
-  }
-
   componentDidMount() {
-    var visibleExampleTitle = Settings.get('visibleExample');
-    if (visibleExampleTitle) {
-      var predicate = (example) => example.title === visibleExampleTitle;
-      var foundExample = APIS.find(predicate) || COMPONENTS.find(predicate);
-      if (foundExample) {
-        setTimeout(() => this._openExample(foundExample), 100);
+    var wasUIExplorer = false;
+    var didOpenExample = false;
+
+    this.props.navigator.navigationContext.addListener('didfocus', (event) => {
+      var isUIExplorer = event.data.route.title === 'UIExplorer';
+
+      if (!didOpenExample && isUIExplorer) {
+        didOpenExample = true;
+
+        var visibleExampleTitle = Settings.get('visibleExample');
+        if (visibleExampleTitle) {
+          var predicate = (example) => example.title === visibleExampleTitle;
+          var foundExample = APIS.find(predicate) || COMPONENTS.find(predicate);
+          if (foundExample) {
+            setTimeout(() => this._openExample(foundExample), 100);
+          }
+        } else if (!wasUIExplorer && isUIExplorer) {
+          Settings.set({visibleExample: null});
+        }
       }
-    }
+
+      wasUIExplorer = isUIExplorer;
+    });
   }
 
   renderAdditionalView(renderRow: Function, renderTextInput: Function): React.Component {

Examples/UIExplorer/UIExplorerList.js

@@ -166,15 +166,6 @@ class UIExplorerList extends React.Component {
 
   componentDidMount() {
     this._search(this.state.searchText);
-
-    var visibleExampleTitle = Settings.get('visibleExample');
-    if (visibleExampleTitle) {
-      var predicate = (example) => example.title === visibleExampleTitle;
-      var foundExample = APIS.find(predicate) || COMPONENTS.find(predicate);
-      if (foundExample) {
-        setTimeout(() => this._openExample(foundExample), 100);
-      }
-    }
   }
 
   render() {

Examples/UIExplorer/createExamplePage.js

@@ -54,8 +54,9 @@ var createExamplePage = function(title: ?string, exampleModule: ExampleModule)
         };
       var result = example.render(null);
       if (result) {
-        renderedComponent = result;
-        result.props.navigator = this.props.navigator;
+        renderedComponent = React.cloneElement(result, {
+          navigator: this.props.navigator,
+        });
       }
       (React: Object).render = originalRender;
       (React: Object).renderComponent = originalRenderComponent;

Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj/project.pbxproj

@@ -151,6 +151,7 @@
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
 				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
 				GCC_WARN_INITIALIZER_NOT_FULLY_BRACKETED = YES;
+				GCC_WARN_SHADOW = YES;
 				GCC_WARN_UNDECLARED_SELECTOR = YES;
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
@@ -190,6 +191,7 @@
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
 				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
 				GCC_WARN_INITIALIZER_NOT_FULLY_BRACKETED = YES;
+				GCC_WARN_SHADOW = YES;
 				GCC_WARN_UNDECLARED_SELECTOR = YES;
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;