-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
116 lines (105 loc) · 2.64 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import Constants from 'expo-constants';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
import { FlatList } from 'react-native';
import { ListItem } from 'react-native-elements';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoaded: false,
posts: {}, //obj
};
}
showData = () => {
if (this.state.posts) {
return (
<Text style={styles.paragraph}>
DataCarQuery {JSON.stringify(this.state.posts)}
</Text>
);
} else {
return null;
}
};
//asynch version of the fetch
fetchAsyncCarApi = async url => {
try {
let data = await (await fetch(url)).json();
this.setState({ isLoaded: true, posts: data });
} catch (error) {
alert(error);
}
};
onPressShowCar = () => {
var urlCarQuery =
'https://www.carqueryapi.com/api/0.3/?&cmd=getModels&make=ford&year=2010&body=SUV';
this.fetchAsyncCarApi(urlCarQuery);
//synch version of the fetch
/*fetch(urlCarQuery).then(response=>response.json()).then((result)=>{
this.setState({
isLoaded: true,
posts: result
})
}).catch(error=>alert(error))*/
};
urlCarMakes = 'https://www.carqueryapi.com/api/0.3/?&cmd=getMakes';
list = [
{
name: 'Amy Farha',
avatar_url:
'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
subtitle: 'Vice President',
},
{
name: 'Chris Jackson',
avatar_url:
'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
subtitle: 'Vice Chairman',
},
];
keyExtractor = (item, index) => index.toString();
renderItem = ({ item }) => (
<ListItem
title={item.name}
subtitle={item.subtitle}
leftAvatar={{ source: { uri: item.avatar_url } }}
bottomDivider
chevron
/>
);
render() {
return (
<View style={styles.container}>
{this.showData()}
<Button
onPress={this.onPressShowCar}
title="View cars"
color="#841584"
/>
<FlatList
keyExtractor={this.keyExtractor}
data={this.list}
renderItem={this.renderItem}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});