title: React native listview add item not working
body: <p>I am new to react native and I was implemented a simple idea in my head. Basically, I am doing a 'todo list' like component which theres a add button below and items can be added. The problem arises after clicking on the add button and the list gets updated and the following xcode warning message appears. And I have realised, after implementing the ListView, that the app in the simulator slows down so much i couldn't even inspect. The alert popup would freeze the UI after some text are entered too, and the entire app needs to be built again since I couldn't do anything. Thanks for all the help!</p>
  
  <p><strong>Main component: SurveyQn</strong></p>
  
  <blockquote>
    <p>'use strict'</p>
    
    <p>import React, {
        Component,
        StyleSheet,
        Text,
        TouchableHighlight,
        TextInput,
        View,
        ListView,
        AlertIOS
    } from 'react-native';</p>
    
    <p>var LongButton = require('./LongButton.js');</p>
    
    <p>class SurveyQn extends Component {</p>
  
  <pre><code>constructor(props) {
      super(props);
  
      this.state = {
          options: [{option: 'Pizza'}],
      };
  }
  
  componentWillMount() {
      this.dataSource = new ListView.DataSource({
          rowHasChanged: (row1, row2) =&gt; row1 !== row2
      })
  }
  
  _renderItem(item) {
      return (
          &lt;LongButton 
              text={item.option} 
              onPress={() =&gt; {}} 
              //btnViewStyle={styles.buttonView}
              //btnTextStyle={styles.buttonText}
          /&gt;
      );
  }
  
  _addItem() {
      AlertIOS.alert(
          'Add new option',
          null,
          [
              {
                  text: 'Add',
                  onPress: (text) =&gt; {
                      var options = this.state.options;
                      options.push({option: text})
                      this.setState({ options: options})
                  }
              },
          ],
          'plain-text'
      );
  }
  
  render(){
      var dataSource = this.dataSource.cloneWithRows(this.state.options);
      return (
          &lt;View style={styles.container}&gt;
              &lt;TextInput
                  style={styles.question}
                  placeholder="Question title"
                  placeholderTextColor="#4B667B"
                  selectionColor="#4B667B"
                  onChangeText={(text) =&gt; this.setState({text})}/&gt;
  
              &lt;View style={styles.listView}&gt;
                  &lt;ListView
                      dataSource={dataSource}
                      renderRow={this._renderItem.bind(this)}/&gt;
  
              &lt;/View&gt;
                  &lt;TouchableHighlight 
                      onPress={this._addItem.bind(this)}
                      style={styles.buttonView}
                      underlayColor='rgba(0,0,0,0)'&gt;
                      &lt;Text style={styles.buttonText}&gt;
                          Add option
                      &lt;/Text&gt;
                  &lt;/TouchableHighlight&gt;
          &lt;/View&gt;
  
  
      );
  }
  </code></pre>
    
    <p>}</p>
    
    <p>var styles = StyleSheet.create({
        container: {
            width: 300,
            flex :1,
        },
        listView: {
            flex: 1,
        },
        question: {
            height: 30,
            fontSize: 20,
            fontWeight: "100",
            color: '#4B667B',
            marginTop: 10,
            marginBottom: 10,
        },
        buttonView: {
            width: 300,
            paddingVertical: 9,
            borderWidth: 1,
            borderColor: '#F868AF',
            marginBottom: 13,
        },
        buttonText: {
            textAlign: 'center',
            fontSize: 25,
            color: '#F868AF',
            fontWeight: '500'
        },
    });</p>
  </blockquote>
  
  <p><strong>ListView item: LongButton</strong></p>
  
  <blockquote>
    <p>'use strict'</p>
    
    <p>import React, {
        Component,
        StyleSheet,
        Text,
        TouchableHighlight,
        View,
    } from 'react-native';</p>
    
    <p>class LongButton extends Component {</p>
  
  <pre><code>render(){
      return (
          &lt;TouchableHighlight 
              onPress={this.props.onPress}
              style={this.props.btnViewStyle}
              underlayColor='rgba(0,0,0,0)'&gt;
              &lt;Text style={this.props.btnTextStyle}&gt;
                  {this.props.text}
              &lt;/Text&gt;
          &lt;/TouchableHighlight&gt;
      );
  </code></pre>
    
    <p>}
    }</p>
    
    <p>module.exports = LongButton;</p>
  </blockquote>
  
  <p>Xcode warning message upon adding item on alert</p>
  
  <blockquote>
    <p>app[27881:11151280] the behavior of the UICollectionViewFlowLayout is not defined because:
    app[27881:11151280] the item height must be less than the height of the UICollectionView minus the section insets top and bottom values, minus the content insets top and bottom values.
    app[27881:11151280] The relevant UICollectionViewFlowLayout instance is &lt;_UIAlertControllerCollectionViewFlowLayout: 0x7ff0685b1770>, and it is attached to ; layer = ; contentOffset: {0, 0}; contentSize: {0, 0}> collection view layout: &lt;_UIAlertControllerCollectionViewFlowLayout: 0x7ff0685b1770>.
    2016-04-06 07:50:01.545 decisionapp[27881:11151280] Make a symbolic breakpoint at UICollectionViewFlowLayoutBreakForInvalidSizes to catch this in the debugger.  </p>
  </blockquote>
  
  <p><strong>Updates:</strong>
  I tried this but its not working either. Could it be the alert causing these problems? Its just taking forever to render the alert after clicking on the btn.</p>
  
  <blockquote>
    <p>class SurveyQn extends Component {</p>
    
    <p>constructor(props) {
           super(props);</p>
  
  <pre><code>   this.state = {
         options: [{option: 'Pizza'}],
         dataSource : new ListView.DataSource({
             rowHasChanged: (row1, row2) =&gt; row1 !== row2
         })
     };
  </code></pre>
    
    <p>}</p>
    
    <p>componentWillMount() {
           var data = this.state.options;
           this.state.dataSource.cloneWithRows(data);
       }</p>
    
    <p>_renderItem(item) {
           return (
               {item.option}
           );
       }</p>
    
    <p>_addItem() {
           AlertIOS.alert(
               'Add new option',
               null,
               [
                   {
                       text: 'Add',
                       onPress: (text) => {
                           var options = this.state.options;
                           options.push({option: text})
                           this.setState({ options: options})
                       }
                   },
               ],
               'plain-text'
           );
       }</p>
    
    <p>render(){
           return (
               </p>
  
  <pre><code>           &lt;View style={styles.listView}&gt;
                 &lt;ListView
                     dataSource={this.state.dataSource}
                     renderRow={this._renderItem.bind(this)}/&gt;
  
             &lt;/View&gt;
                 &lt;TouchableHighlight 
                     onPress={this._addItem.bind(this)}
                     style={styles.buttonView}
                     underlayColor='rgba(0,0,0,0)'&gt;
                     &lt;Text style={styles.buttonText}&gt;
                         Add option
                     &lt;/Text&gt;
                 &lt;/TouchableHighlight&gt;
         &lt;/View&gt;
  
  
     );
  </code></pre>
    
    <p>}
    }</p>
  </blockquote>