import React from 'react';
import { StyleSheet, Text, View, Button, ListView, Image } from 'react-native';
import URExampleSampleCell from '../URExampleCell';

export class URExampleMainView extends React.Component {
  constructor() {
    super()
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
    const imgs = [require('../../Resources/20160509_044404.jpg'), require('../../Resources/2hnxrw4.jpg'), require('../../Resources/3714936a9cf70502e0a5842b9e546f35.jpg'), 
                  require('../../Resources/image_3e851409-b792-4211-b1fc-1c7f3515695a.png'), require('../../Resources/R1280x0.jpeg'),
                  require('../../Resources/susie4.jpg'), require('../../Resources/susie5.jpg'), require('../../Resources/tumblr_o1paghiOt81ss09k4o1_1280.jpg')];
    var ROWS = []
    for (var i = 0; i < imgs.length; i++) {
      var img = imgs[i]
      ROWS[i] = {title: 'row '+ i, 
                img: img}
    }
    this.state = {
      dataSource: ds.cloneWithRows(ROWS),
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
        <Text>머하냐</Text>
        <Button
          onPress={this.onPressLearnMore}
          title="Learn More"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
        <ListView style={styles.list} width="100%" height="50%"
          dataSource={this.state.dataSource}
          renderRow={(rowData) => {
            return (
              <URExampleSampleCell title={rowData.title} img={rowData.img}></URExampleSampleCell>
              )
            }
          }
        />
      </View>
    );
  }

  onPressLearnMore() {
    console.log("onPressLearnMore")    
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  list: {
    flex: 1,
    backgroundColor: '#eee',
  }
});
@@ -210,16 +210,86 @@
 onent %7B%0A
+    static navigationOptions = %7B%0A        title: 'Welcome',%0A    %7D%0A    %0A
   constr
@@ -294,24 +294,24 @@
 tructor() %7B%0A
-
     super()%0A
@@ -1091,24 +1091,73 @@
  render() %7B%0A
+      const %7B navigate %7D = this.props.navigation%0A
     return (
@@ -1456,29 +1456,74 @@
 ss=%7B
-this.onPressLearnMore
+() =%3E %7B%0A            navigate('Detail', %7Bname: 'Jane'%7D)%0A          %7D
 %7D%0A  
@@ -1989,17 +1989,16 @@
 w%3E%0A    )
-;
 %0A  %7D%0A%0A  
@@ -2014,24 +2014,24 @@
 arnMore() %7B%0A
-
     console.
@@ -2053,16 +2053,19 @@
 rnMore%22)
+%0A  
     %0A  %7D

add navigation push handling