Updates from Fri 8 May

Examples/Movies/SearchScreen.js

@@ -29,8 +29,6 @@ var TimerMixin = require('react-timer-mixin');
 var MovieCell = require('./MovieCell');
 var MovieScreen = require('./MovieScreen');
 
-var fetch = require('fetch');
-
 /**
  * This is for demo purposes only, and rate limited.
  * In case you want to use the Rotten Tomatoes' API on a real app you should

Examples/UIExplorer/ImageMocks.js

@@ -39,3 +39,8 @@ declare module 'image!uie_thumb_selected' {
   declare var uri: string;
   declare var isStatic: boolean;
 }
+
+declare module 'image!NavBarButtonPlus' {
+  declare var uri: string;
+  declare var isStatic: boolean;
+}

Examples/UIExplorer/LayoutEventsExample.js

@@ -0,0 +1,150 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  Image,
+  LayoutAnimation,
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+type LayoutEvent = {
+  nativeEvent: {
+    layout: {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+    };
+  };
+};
+
+var LayoutEventExample = React.createClass({
+  getInitialState: function() {
+    return {
+      viewStyle: {
+        margin: 20,
+      },
+    };
+  },
+  animateViewLayout: function() {
+    LayoutAnimation.configureNext(
+      LayoutAnimation.Presets.spring,
+      () => {
+        console.log('layout animation done.');
+        this.addWrapText();
+      },
+      (error) => { throw new Error(JSON.stringify(error)); }
+    );
+    this.setState({
+      viewStyle: {
+        margin: this.state.viewStyle.margin > 20 ? 20 : 60,
+      }
+    });
+  },
+  addWrapText: function() {
+    this.setState(
+      {extraText: '  And a bunch more text to wrap around a few lines.'},
+      this.changeContainer
+    );
+  },
+  changeContainer: function() {
+    this.setState({containerStyle: {width: 280}});
+  },
+  onViewLayout: function(e: LayoutEvent) {
+    console.log('received view layout event\n', e.nativeEvent);
+    this.setState({viewLayout: e.nativeEvent.layout});
+  },
+  onTextLayout: function(e: LayoutEvent) {
+    console.log('received text layout event\n', e.nativeEvent);
+    this.setState({textLayout: e.nativeEvent.layout});
+  },
+  onImageLayout: function(e: LayoutEvent) {
+    console.log('received image layout event\n', e.nativeEvent);
+    this.setState({imageLayout: e.nativeEvent.layout});
+  },
+  render: function() {
+    var viewStyle = [styles.view, this.state.viewStyle];
+    var textLayout = this.state.textLayout || {width: '?', height: '?'};
+    var imageLayout = this.state.imageLayout || {x: '?', y: '?'};
+    return (
+      <View style={this.state.containerStyle}>
+        <Text>
+          onLayout events are called on mount and whenever layout is updated,
+          including after layout animations complete.{'  '}
+          <Text style={styles.pressText} onPress={this.animateViewLayout}>
+            Press here to change layout.
+          </Text>
+        </Text>
+        <View ref="view" onLayout={this.onViewLayout} style={viewStyle}>
+          <Image
+            ref="img"
+            onLayout={this.onImageLayout}
+            style={styles.image}
+            source={{uri: 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png'}}
+          />
+          <Text>
+            ViewLayout: {JSON.stringify(this.state.viewLayout, null, '  ') + '\n\n'}
+          </Text>
+          <Text ref="txt" onLayout={this.onTextLayout} style={styles.text}>
+            A simple piece of text.{this.state.extraText}
+          </Text>
+          <Text>
+            {'\n'}
+            Text w/h: {textLayout.width}/{textLayout.height + '\n'}
+            Image x/y: {imageLayout.x}/{imageLayout.y}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  view: {
+    padding: 12,
+    borderColor: 'black',
+    borderWidth: 0.5,
+    backgroundColor: 'transparent',
+  },
+  text: {
+    alignSelf: 'flex-start',
+    borderColor: 'rgba(0, 0, 255, 0.2)',
+    borderWidth: 0.5,
+  },
+  image: {
+    width: 50,
+    height: 50,
+    marginBottom: 10,
+    alignSelf: 'center',
+  },
+  pressText: {
+    fontWeight: 'bold',
+  },
+});
+
+exports.title = 'onLayout';
+exports.description = 'Layout events can be used to measure view size and position.';
+exports.examples = [
+{
+  title: 'onLayout',
+  render: function(): ReactElement {
+    return <LayoutEventExample />;
+  },
+}];

Examples/UIExplorer/NavigatorIOSExample.js

@@ -19,6 +19,7 @@ var React = require('react-native');
 var ViewExample = require('./ViewExample');
 var createExamplePage = require('./createExamplePage');
 var {
+  AlertIOS,
   PixelRatio,
   ScrollView,
   StyleSheet,
@@ -92,6 +93,30 @@ var NavigatorIOSExample = React.createClass({
               }
             });
           })}
+          {this._renderRow('Custom Left & Right Icons', () => {
+            this.props.navigator.push({
+              title: NavigatorIOSExample.title,
+              component: EmptyPage,
+              leftButtonTitle: 'Custom Left',
+              onLeftButtonPress: () => this.props.navigator.pop(),
+              rightButtonIcon: require('image!NavBarButtonPlus'),
+              onRightButtonPress: () => {
+                AlertIOS.alert(
+                  'Bar Button Action',
+                  'Recognized a tap on the bar button icon',
+                  [
+                    {
+                      text: 'OK',
+                      onPress: () => console.log('Tapped OK'),
+                    },
+                  ]
+                );
+              },
+              passProps: {
+                text: 'This page has an icon for the right button in the nav bar',
+              }
+            });
+          })}
           {this._renderRow('Pop', () => {
             this.props.navigator.pop();
           })}

Examples/UIExplorer/UIExplorer/Images.xcassets/NavBarButtonPlus.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "NavBarButtonPlus@3x.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

Examples/UIExplorer/UIExplorerList.js

@@ -64,6 +64,7 @@ var APIS = [
   require('./BorderExample'),
   require('./CameraRollExample.ios'),
   require('./GeolocationExample'),
+  require('./LayoutEventsExample'),
   require('./LayoutExample'),
   require('./NetInfoExample'),
   require('./PanResponderExample'),

IntegrationTests/IntegrationTestsApp.js

@@ -25,6 +25,7 @@ var TESTS = [
   require('./IntegrationTestHarnessTest'),
   require('./TimersTest'),
   require('./AsyncStorageTest'),
+  require('./LayoutEventsTest'),
   require('./SimpleSnapshotTest'),
 ];
 

IntegrationTests/IntegrationTestsTests/IntegrationTestsTests.m

@@ -71,6 +71,11 @@ - (void)testAsyncStorage
   [_runner runTest:_cmd module:@"AsyncStorageTest"];
 }
 
+- (void)testLayoutEvents
+{
+  [_runner runTest:_cmd module:@"LayoutEventsTest"];
+}
+
 #pragma mark Snapshot Tests
 
 - (void)testSimpleSnapshot