Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { FlatList, ActivityIndicator, Text, View } from 'react-native';
- import React, { Component } from 'react';
- import { AppRegistry, StyleSheet, Alert, Button, Image } from 'react-native';
- export default class FetchExample extends React.Component {
- constructor(props){
- super(props);
- this.state ={ isLoading: true}
- }
- componentDidMount(){
- return fetch('https://api.myjson.com/bins/uvbl4')
- .then((response) => response.json())
- .then((responseJson) => {
- this.setState({
- isLoading: false,
- dataSource: responseJson.names,
- }, function(){
- });
- })
- .catch((error) =>{
- console.error(error);
- });
- }
- render(){
- if(this.state.isLoading){
- return(
- <View style={{flex: 1, padding: 20}}>
- <ActivityIndicator/>
- </View>
- )
- }
- return(
- <View style={{flex: 1, paddingTop:20}}>
- <View>
- <Text>Deli Paris</Text>
- <Text> </Text>
- </View>
- <FlatList
- data={this.state.dataSource}
- renderItem={this.renderItem.bind(this)}
- keyExtractor={({id}, index) => id}
- />
- </View>
- );
- }
- renderItem({ item }) {
- return (
- <View>
- <Image
- source={{uri: item.uri}}
- />
- <Text>
- {item.username}
- </Text>
- <Text>
- {item.name}
- </Text>
- </View>
- );
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement