-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathApp.js
61 lines (56 loc) · 1.58 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
import React from 'react'
import { StyleSheet, Text, View, ActivityIndicator, FlatList, Image } from 'react-native'
import HTML from 'react-native-render-html'
export default class App extends React.Component {
constructor(props){
super(props)
this.state ={ isLoading: true}
}
componentDidMount(){
return fetch('https://don.crakac.com/api/v1/timelines/public')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson,
})
})
.catch((error) =>{
console.error(error);
})
}
render() {
if(this.state.isLoading){
return(
<View style={{flex: 1, padding: 20, justifyContent: 'center'}}>
<ActivityIndicator size="large"/>
</View>
)
}
return(
<View style={{flex: 1, paddingTop:20}}>
<FlatList
data={this.state.dataSource}
renderItem={({item}) =>
<View style={{flex: 1, flexDirection: 'row', padding: 4}}>
<Image style={{width: 48, height: 48}} source={{uri: item.account.avatar}}/>
<View style={{flex:1, paddingLeft: 4}}>
<Text>{item.account.display_name}@{item.account.acct}</Text>
<HTML html={item.content}/>
</View>
</View>
}
keyExtractor={(item, index) => index}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});