Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow
- */
- import React, {Component} from 'react';
- import {Platform, StyleSheet, Text, View} from 'react-native';
- import { Button ,TouchableOpacity,TouchableHighlight} from 'react-native';
- import { FlatList,List } from 'react-native';
- export default class App extends Component {
- constructor(props){
- super(props);
- this.state ={ isLoading: true}
- }
- componentDidMount(){
- return fetch('https://dog.ceo/api/breeds/list/all?fbclid=IwAR15dxvCvmj0fHUqIAQQlioG0AKcL-47ATKZtsXcIzpiWLP1hRyl_hEuIQU')
- .then((response) => response.json())
- .then((responseJson) => {
- this.setState({
- isLoading: false,
- dataSource: responseJson,
- }, function(){
- });
- })
- .catch((error) =>{
- console.error(error);
- });
- }
- selectDog=(dog)=>{
- console.log(dog);
- }
- render() {
- if(this.state.isLoading){
- return(
- <View style={{flex: 1, padding: 20}}>
- <Text>Coming soon...</Text>
- </View>
- )
- }
- return(
- <FlatList
- data={Object.keys(this.state.dataSource.message)}
- renderItem={({item}) =>
- <TouchableOpacity
- onPress={ () => this.selectDog(item)}
- >
- <Text style={styles.titleText}>{item}</Text>
- </TouchableOpacity>
- }
- />
- );
- }
- }
- const styles = StyleSheet.create({
- baseText: {
- fontFamily: 'Cochin',
- },
- titleText: {
- fontSize: 20,
- fontWeight: 'bold',
- },
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement