text: /**
   * 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 createClass = require('create-react-class');
  var {
    Image,
    StyleSheet,
    Text,
    View,
  } = React;
  
  type LayoutEvent = {
    nativeEvent: {
      layout: {
        x: number;
        y: number;
        width: number;
        height: number;
      };
    };
  };
  
  var LayoutEventExample = createClass({
    getInitialState: function() {
      return {
        viewStyle: {
          margin: 20,
        },
      };
    },
    animateViewLayout: function() {
      // LayoutAnimation.configureNext(
      //   LayoutAnimation.Presets.spring,
      //   () => {
      //     console.log('layout animation done.');
      //     this.addWrapText();
      //   }
      // );
      this.setState({
        viewStyle: {
          margin: this.state.viewStyle.margin > 20 ? 20 : 60,
        }
      }, this.addWrapText);
  
      
    },
    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>
            layout events are called on mount and whenever layout is recalculated. Note that the layout event will typically be received <Text style={styles.italicText}>before</Text> the layout has updated on screen, especially when using layout animations.{'  '}
            <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',
    },
    italicText: {
      fontStyle: 'italic',
    },
  });
  
  exports.title = 'Layout Events';
  exports.description = 'Examples that show how Layout events can be used to ' +
    'measure view size and position.';
  exports.examples = [
  {
    title: 'LayoutEventExample',
    render: function(): ReactElement {
      return <LayoutEventExample />;
    },
  }];
  