testing on backend example screen

Author: olafch

src/screens/DataFromBeScreen_EXAMPLE.tsx

@@ -2,8 +2,8 @@ import { useArticlesControllerFindAll } from '@baca/api/query/articles/articles'
 import { ArticleEntity } from '@baca/api/types'
 import { Loader, Center, Text, Box, Spacer } from '@baca/design-system'
 import { useScreenOptions, useTranslation } from '@baca/hooks'
+import { FlashList } from '@shopify/flash-list'
 import { useCallback } from 'react'
-import { ListRenderItem, FlatList } from 'react-native'
 
 export const DataFromBeScreen_EXAMPLE = () => {
   const { t } = useTranslation()
@@ -15,7 +15,7 @@ export const DataFromBeScreen_EXAMPLE = () => {
   const { data: articles, isInitialLoading: isInitialLoadingArticles } =
     useArticlesControllerFindAll({ page: 1, pageSize: 10 })
 
-  const renderItem: ListRenderItem<ArticleEntity> = useCallback(({ item: { id, title } }) => {
+  const renderItem = useCallback(({ item: { id, title } }: { item: ArticleEntity }) => {
     return (
       <Box mb="1" bg="fg.brand.primary" borderRadius={2} m={2}>
         <Text>{'id: ' + id}</Text>
@@ -26,24 +26,23 @@ export const DataFromBeScreen_EXAMPLE = () => {
 
   return (
     <Box flex={1}>
-      <Center flex={1}>
-        <Text.XlRegular>THIS IS EXAMPLE SCREEN</Text.XlRegular>
-        <Text.XlRegular>which contains data from backend</Text.XlRegular>
-        <Spacer y="1" />
-        <FlatList
-          ListEmptyComponent={
-            !isInitialLoadingArticles ? (
-              <Center height={400} flex={1}>
-                <Loader type="circle" />
-              </Center>
-            ) : (
-              <Text>No data found</Text>
-            )
-          }
-          data={articles}
-          renderItem={renderItem}
-        />
-      </Center>
+      <Text.XlRegular alignSelf="center">THIS IS EXAMPLE SCREEN</Text.XlRegular>
+      <Text.XlRegular alignSelf="center">which contains data from backend</Text.XlRegular>
+      <Spacer y="1" />
+      <FlashList
+        ListEmptyComponent={
+          !isInitialLoadingArticles ? (
+            <Center height={400} flex={1}>
+              <Loader type="circle" />
+            </Center>
+          ) : (
+            <Text>No data found</Text>
+          )
+        }
+        data={articles}
+        renderItem={renderItem}
+        estimatedItemSize={81}
+      />
     </Box>
   )
 }