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>
)
})
|
