Cant' navigate to the newly reacted component.

[githubmss]

Hello , i have downloaded your example code and tried to study it . I am new to react so this may seems silly to you but , i am trying to learn it from your architecture. i replaced the code in your Today.js class

Here is what it looks like now :-

import React, { Component } from 'react';
const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');
import {
  StyleSheet,
  Text,
  Image,
  StatusBar,
  View,
  AsyncStorage,
  TouchableOpacity,
  TouchableHighlight,
  Dimensions,
  Navigator,
  ListView
} from 'react-native';
import MovieDeatilScreen from './MovieDeatilScreen';
import Container from '../Container';
//import Main from './Main';

export default class TodayView extends Component {


 constructor(props , context) {
      super(props , context);
      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      this.state = {
        moviesData: ds.cloneWithRows([]),
      };
    }
    componentDidMount() {
        this.fetchMoviesData();
      }
       fetchMoviesData() {
           var url = 'http://api.themoviedb.org/3/movie/now_playing?api_key=17e62b78e65bd6b35f038505c1eec409';
           fetch(url)
             .then(response => response.json())
             .then(jsonData => {
               this.setState({
                 moviesData: this.state.moviesData.cloneWithRows(jsonData.results),

               });
             })
           .catch( error => console.log('Error fetching: ' + error) );
         }
   render() {
   		return (
   				<View style={styles.container}>

   					<ListView
   					  dataSource={this.state.moviesData}
                             renderRow={this.renderRow}
                             enableEmptySections={true}
                             style={styles.ListViewcontainer}
                           />
                     </View>
   		);
   	}
   	renderRow(rowData: string, sectionID: number, rowID: number){
     	AsyncStorage.setItem('moviesData', JSON.stringify(rowData));
             return (
               <View style={styles.thumb} >
               <TouchableOpacity  onPress={() => this.goToDetailScreen.bind(this, rowData)}>
                 <Image
                   source={{uri:'https://image.tmdb.org/t/p/w500_and_h281_bestv2/'+rowData.poster_path}}
                   resizeMode="cover"
                   style={styles.img} />
                   <Text style={styles.txt}>{rowData.title} (Rating: {Math.round( rowData.vote_average * 10 ) / 10})</Text>
               </TouchableOpacity>
               </View>
             );
           }

   	renderLoader(){
     		return (
     			this.state.showLoader?<View><Spinner color='red' /></View>:null
     		)
     	}
     	goToDetailScreen (rowID, rowData){
             	alert('hi');
//             	<Router navigator={this.props.navigator} />
//                              this.props.navigator.push({
//                                 name: 'MovieDeatilScreen',
//                                 title: 'MovieDeatilScreen',
//                              });
                           }
     hideLoader(){
     		setTimeout(() => {
     			this.setState({showLoader:false})
     		}, 1);
     	}



 }
 class Router extends Component {
    constructor(){
       super()
    }
    render() {
       return (
          <Navigator
             initialRoute = {{ name: 'MovieDeatilScreen', title: 'MovieDeatilScreen' }}
             renderScene = { this.renderScene }
          />
       );
    }
    renderScene(route, navigator) {

       if(route.name == 'MovieDeatilScreen') {
          return (
             <MovieDeatilScreen
                navigator = {navigator}
                {...route.passProps}
             />
          )
       }
    }
 }
 const styles = StyleSheet.create({
   container: {
   position:'relative',
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
   },thumb: {
                                           backgroundColor: '#ffffff',
                                           marginBottom: 5,
                                           elevation: 1
                                         },
                                         img: {
                                           height: 300
                                         },
                                         txt: {
                                           margin: 10,
                                           fontSize: 16,
                                           textAlign: 'left'
                                         },ListViewcontainer:{
                                          marginTop:51,
                                           bottom: 50,
                                         }
 });

The problem is in renderRow(rowData) method in which i have taken TouchableOpacity when i am trying to navigate user to Detail screen it through me error.using onPress={() => this.props.navigation.navigate('MovieDeatilScreen')}.

Second Approach :-

Under Constructor i declare :-

this.goToDetailScreen = this.goToDetailScreen.bind(id, rowdata); then inside renderRow(rowData) i passed some thing like :-

<TouchableOpacity onPress={() => this.goToDetailScreen.bind(this, rowData)}>

Here is how i have made a function :-

goToDetailScreen (rowID, rowData){
             	alert('hi');
//             	<Router navigator={this.props.navigator} />
//                              this.props.navigator.push({
//                                 name: 'MovieDeatilScreen',
//                                 title: 'MovieDeatilScreen',
//                              });
                           }

Error with direct call of navigation is :- undefined is not an object(evaluating _this3.gotoDeatilScreen.bind) And with second approach i am not getting any call back in my function. Can you suggest me the way , your little help can be very useful to me

Thanks!!!