Don't forget to catch any errors that may be thrown by fetch, otherwise they will be dropped silently.
import React, { Component } from 'react';
-import { ActivityIndicator, ListView, Text, View } from 'react-native';
+import React from 'react';
+import { FlatList, ActivityIndicator, Text, View } from 'react-native';
-export default class Movies extends Component {
- constructor(props) {
+export default class FetchExample extends React.Component {
+
+ constructor(props){
super(props);
- this.state = {
- isLoading: true
- }
+ this.state ={ isLoading: true}
}
- componentDidMount() {
+ componentDidMount(){
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
- let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+
this.setState({
isLoading: false,
- dataSource: ds.cloneWithRows(responseJson.movies),
- }, function() {
- // do something with new state
+ dataSource: responseJson.movies,
+ }, function(){
+
});
+
})
- .catch((error) => {
+ .catch((error) =>{
console.error(error);
});
}
- render() {
- if (this.state.isLoading) {
- return (
- <View style={{flex: 1, paddingTop: 20}}>
- <ActivityIndicator />
+
+
+ render(){
+
+ if(this.state.isLoading){
+ return(
+ <View style={{flex: 1, padding: 20}}>
+ <ActivityIndicator/>
</View>
- );
+ )
}
- return (
- <View style={{flex: 1, paddingTop: 20}}>
- <ListView
- dataSource={this.state.dataSource}
- renderRow={(rowData) => <Text>{rowData.title}, {rowData.releaseYear}</Text>}
+ return(
+ <View style={{flex: 1, paddingTop:20}}>
+ <FlatList
+ data={this.state.dataSource}
+ renderItem={({item}) => <Text>{item.title}, {item.releaseYear}</Text>}
+ keyExtractor={(item, index) => index}
/>
</View>
);
}
}
+
+