import React , { useEffect , FC } from "react" ; import { FlatList , TextStyle , View , ViewStyle , ImageStyle } from "react-native" ; import { StackScreenProps } from "@react-navigation/stack" ; import { observer } from "mobx-react-lite" ; import { Header , Screen , Text , AutoImage as Image , GradientBackground } from "../../components" ; import { color , spacing } from "../../theme" ; import { useStores } from "../../models" ; import { NavigatorParamList } from "../../navigators" ; const FULL = { flex : 1 , } ; const CONTAINER = { backgroundColor : color . transparent , } ; const HEADER = { paddingBottom : spacing [ 5 ] - 1 , paddingHorizontal : spacing [ 4 ] , paddingTop : spacing [ 3 ] , } ; const HEADER_TITLE = { fontSize : 12 , fontWeight : "bold" , letterSpacing : 1.5 , lineHeight : 15 , textAlign : "center" , } ; const LIST_CONTAINER = { alignItems : "center" , flexDirection : "row" , padding : 10 , } ; const IMAGE = { borderRadius : 35 , height : 65 , width : 65 , } ; const LIST_TEXT = { marginLeft : 10 , } ; const FLAT_LIST = { paddingHorizontal : spacing [ 4 ] , } ; export const DemoListScreen = observer ( ( { navigation } ) => { const goBack = ( ) => navigation . goBack ( ) ; const { characterStore } = useStores ( ) ; const { characters } = characterStore ; useEffect ( ( ) => { async function fetchData ( ) { await characterStore . getCharacters ( ) ; } fetchData ( ) ; } , [ ] ) ; return ( < View testID = "DemoListScreen" style = { FULL } > < GradientBackground colors = { [ "#422443" , "#281b34" ] } /> < 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>); } ) ;