ListView.DataSource

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
  Button,
  StyleSheet,
  Image,
  Touchable,
  TouchableHighlight,
  ListView,
  Alert
} from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';

class ChatScreen extends Component {
  constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      ds:['row 1', 'row 2'],
      dataSource:ds,
      // dataSource: ds.cloneWithRows(['row 1', 'row 2']),
    };
  }

  componentDidMount(){
    this.setState({
      dataSource:this.state.dataSource.cloneWithRows(this.state.ds),
    })
  }

  onMyButtonPressed(){
    // Alert.alert('owo');
    this.setState({
      dataSource:this.state.dataSource.cloneWithRows(['row 3', 'row 4']),
    })
  }

  render() {
    return (
      <View>
      <Button
        onPress={() => this.onMyButtonPressed()}
        title="Learn More"
        color="#841584"
        accessibilityLabel="Learn more about this purple button"
      />
      <ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text>{rowData}</Text>}
      />
      </View>
    );
  }
  // static navigationOptions = ({ navigation }) => {
  //   const { state, setParams } = navigation;
  //   const isInfo = state.params.mode === 'info';
  //   const { user } = state.params;
  //   return {
  //     title: isInfo ? user+`s Contact Info` : `Chat with ${state.params.user}`,
  //     headerRight: (
  //       <Button
  //         title={isInfo ? 'Done' : `${user}'s info`}
  //         onPress={() => setParams({ mode: isInfo ? 'none' : 'info' })}
  //       />
  //     ),
  //   };
  // };
  // render() {

  //   const { params } = this.props.navigation.state;
  //   return (
  //     <View>
  //       <Text>Chat with {params.user}</Text>
  //     </View>

  //   );
  // }
}

export default ChatScreen;