Select a row in ListView react-native to get detail - react-native

Question

i'm new in react-native. I saw an example in https://facebook.github.io/react-native/docs/sample-application-movies.html .
It is building a movies app that fetch movies and display them in a ListView. How can we select a row to get its detail data and display it in other view? Please help. thanks :)
Here's what i've done so far:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
import React, {
Component,
} from 'react';
import {
AppRegistry,
Image,
ListView,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
} from 'react-native';
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';
var SCREEN_WIDTH = require('Dimensions').get('window').width;
var BaseConfig = Navigator.SceneConfigs.FloatFromRight;
var CustomLeftToRightGesture = Object.assign({}, BaseConfig.gestures.pop, {
snapVelocity: 8,
edgeHitWidth: SCREEN_WIDTH,
});
var CustomSceneConfig = Object.assign({}, BaseConfig, {
springTension: 100,
springFriction: 1,
gestures: {
pop: CustomLeftToRightGesture,
}
});
var PageOne = React.createClass({
getInitialState:function(){
return{
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
loaded: false,
}
},
componentDidMount() {
this.fetchData();
},
fetchData() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
loaded: true,
});
})
.done();
},
render() {
if (!this.state.loaded) {
return this.renderLoadingView();
}
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderMovie}
style={styles.listView}
/>
);
},
renderLoadingView() {
return (
<View style={styles.container}>
<Text>
Loading movies...
</Text>
</View>
);
},
renderMovie(movie) {
title1 = movie.title;
year1 = movie.year;
return (
<TouchableOpacity onPress={this._handlePressList}>
<View style={styles.container}>
<Image
source={{uri: movie.posters.thumbnail}}
style={styles.thumbnail}
/>
<View style={styles.rightContainer}>
<Text style={styles.title}>{movie.title}</Text>
<Text style={styles.year}>{movie.year}</Text>
</View>
</View>
</TouchableOpacity>
);
},
_handlePressList(){
this.props.navigator.push({id: 2, title1, year1});
},
});
var PageTwo = React.createClass({
render(){
return(
<View style={styles.rightContainer}>
<Text style={styles.title}>{title1}</Text>
<Text style={styles.year}>{year1}</Text>
</View>
)
}
})
class SampleAppMovies extends Component{
_renderScene(route, navigator) {
if (route.id === 1) {
return <PageOne navigator={navigator} />
} else if (route.id === 2) {
return <PageTwo navigator={navigator} />
}
}
_configureScene(route) {
return CustomSceneConfig;
}
render() {
return (
<Navigator
initialRoute={{id: 1, }}
renderScene={this._renderScene}
configureScene={this._configureScene} />
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
rightContainer: {
flex: 1,
},
title: {
fontSize: 20,
marginBottom: 8,
textAlign: 'center',
},
year: {
textAlign: 'center',
},
thumbnail: {
width: 53,
height: 81,
},
listView: {
paddingTop: 20,
backgroundColor: '#F5FCFF',
},
});
module.exports = SampleAppMovies;

Answer 1

In your renderRow method (in your case renderMovie), simply pass the movie in onPress prop of TouchableOpacity, something like this:
renderMovie(movie) {
title1 = movie.title;
year1 = movie.year;
return (
<TouchableOpacity onPress={() => _handlePressList(movie)}> // SEE HERE!!
<View style={styles.container}>
<Image
source={{uri: movie.posters.thumbnail}}
style={styles.thumbnail}
/>
<View style={styles.rightContainer}>
<Text style={styles.title}>{movie.title}</Text>
<Text style={styles.year}>{movie.year}</Text>
</View>
</View>
</TouchableOpacity>
);
},
_handlePressList(movie){
this.props.navigator.push({id: 2, movie.title1, movie.year1});
},
Then you can do whatever you want with the movie.
Hope it's helpful.

Answer 2

renderMovie(movie) {
title1 = movie.title;
year1 = movie.year;
return (
<TouchableOpacity onPress={this._handlePressList.bind(this, movie)}
<View style={styles.container}>
<Image
source={{uri: movie.posters.thumbnail}}
style={styles.thumbnail}
/>
<View style={styles.rightContainer}>
<Text style={styles.title}>{movie.title}</Text>
<Text style={styles.year}>{movie.year}</Text>
</View>
</View>
</TouchableOpacity>
);
},
_handlePressList(movie){
this.props.navigator.push({id: 2, movie.title1, movie.year1});
},
This will solve the problem