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
|
import React, { useEffect } from 'react'
import { FlatList, TextStyle, View, ViewStyle, ImageStyle } from 'react-native'
import { useNavigation } from '@react-navigation/native'
import { observer } from 'mobx-react-lite'
import { Header, Screen, Text, Wallpaper, AutoImage as Image } from '../../components'
import { color, spacing } from '../../theme'
import { useStores } from '../../models'
const FULL: ViewStyle = {
flex: 1,
}
const CONTAINER: ViewStyle = {
backgroundColor: color.transparent,
}
const HEADER: TextStyle = {
paddingBottom: spacing[5] - 1,
paddingHorizontal: spacing[4],
paddingTop: spacing[3],
}
const HEADER_TITLE: TextStyle = {
fontSize: 12,
fontWeight: 'bold',
letterSpacing: 1.5,
lineHeight: 15,
textAlign: 'center',
}
const LIST_CONTAINER: ViewStyle = {
alignItems: 'center',
flexDirection: 'row',
padding: 10,
}
const IMAGE: ImageStyle = {
borderRadius: 35,
height: 65,
width: 65,
}
const LIST_TEXT: TextStyle = {
marginLeft: 10,
}
const FLAT_LIST: ViewStyle = {
paddingHorizontal: spacing[4],
}
export const DemoListScreen = observer(function DemoListScreen() {
const navigation = useNavigation()
const goBack = () => navigation.goBack()
const { characterStore } = useStores()
const { characters } = characterStore
useEffect(() => {
async function fetchData() {
await characterStore.getCharacters()
}
fetchData()
}, [])
return (
<View testID="DemoListScreen" style={FULL}>
<Wallpaper />
<Screen style={CONTAINER} preset="fixed" backgroundColor={color.transparent}>
<Header
headerTx="demoListScreen.title"
leftIcon="back"
onLeftPress={goBack}
style={HEADER}
titleStyle={HEADER_TITLE}
/>
<FlatList
contentContainerStyle={FLAT_LIST}
data={[...characters]}
keyExtractor={(item) => String(item.id)}
renderItem={({ item }) => (
<View style={LIST_CONTAINER}>
<Image source={{ uri: item.image }} style={IMAGE} />
<Text style={LIST_TEXT}>
{item.name} ({item.status})
</Text>
</View>
)}
/>
</Screen>
</View>
)
})
|
