Advertisement
Guest User

Untitled

a guest
Mar 15th, 2019
91
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /**
  2.  * Sample React Native App
  3.  * https://github.com/facebook/react-native
  4.  *
  5.  * @format
  6.  * @flow
  7.  */
  8.  
  9. import React, {Component} from 'react';
  10. import {Platform, StyleSheet, Text, View} from 'react-native';
  11. import { Button ,TouchableOpacity,TouchableHighlight} from 'react-native';
  12. import { FlatList,List  } from 'react-native';
  13. export default class App extends Component {
  14.  
  15.   constructor(props){
  16.     super(props);
  17.     this.state ={ isLoading: true}
  18.   }
  19.  
  20.   componentDidMount(){
  21.     return fetch('https://dog.ceo/api/breeds/list/all?fbclid=IwAR15dxvCvmj0fHUqIAQQlioG0AKcL-47ATKZtsXcIzpiWLP1hRyl_hEuIQU')
  22.       .then((response) => response.json())
  23.       .then((responseJson) => {
  24.  
  25.         this.setState({
  26.           isLoading: false,
  27.            dataSource: responseJson,
  28.         }, function(){
  29.          
  30.         });
  31.  
  32.       })
  33.       .catch((error) =>{
  34.         console.error(error);
  35.       });
  36.   }
  37.   selectDog=(dog)=>{
  38. console.log(dog);
  39.   }
  40.  
  41.  
  42.   render() {
  43.    if(this.state.isLoading){
  44.       return(
  45.         <View style={{flex: 1, padding: 20}}>
  46.          <Text>Coming soon...</Text>
  47.         </View>
  48.       )
  49.     }
  50.  
  51.     return(
  52.       <FlatList
  53.        data={Object.keys(this.state.dataSource.message)}
  54.        renderItem={({item}) =>
  55.               <TouchableOpacity
  56.                onPress={ () => this.selectDog(item)}
  57.                
  58.               >
  59.               <Text style={styles.titleText}>{item}</Text>
  60.              
  61.               </TouchableOpacity>
  62.     }
  63.      
  64.      
  65.       />
  66.      
  67.    
  68.     );
  69.  
  70.   }
  71.  
  72. }
  73.  
  74. const styles = StyleSheet.create({
  75.   baseText: {
  76.     fontFamily: 'Cochin',
  77.   },
  78.   titleText: {
  79.     fontSize: 20,
  80.     fontWeight: 'bold',
  81.   },
  82. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement