1 files changed, 86 insertions, 0 deletions
diff --git a/app/screens/demo/demo-list-screen.tsx b/app/screens/demo/demo-list-screen.tsx
new file mode 100644
index 0000000..ae66307
--- /dev/null
+++ b/app/screens/demo/demo-list-screen.tsx
@@ -0,0 +1,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>
+  )
+})