Flashlist does not receive isLoading change event when using moti/skeleton here is my. code
const ItemTable = ({
data,
noShadow = false,
containerStyle,
navigation,
isLoading,
}: {
data: TableOrderProps
noShadow?: boolean
containerStyle?: StyleProp
navigation: any
isLoading?: boolean
}) => {
const { datetimebegin, status, num_guests } = data.bookings
const { image_mobile_photo, address, name } = data.shops
return (
<TouchableOpacity
style={[noShadow ? null : appStyle.shadow, styles.container, containerStyle]}
onPress={() => {
navigation.navigate("DetailTableOrder", { navigation: navigation, data: data })
}}
>
<Skeleton.Group show={isLoading}>
<>
<Skeleton colorMode={"light"} radius={4}>
<Image style={styles.image} source={{ uri: image_mobile_photo }} />
<View
style={[appStyle.columnBtw, { alignItems: "flex-start", marginLeft: 12, flex: 1 }]}
>
<Skeleton colorMode={"light"} width={"100%"}>
{name}
<AppSpacing height={4} />
<Text style={[appStyle.text10Medium, {}]} numberOfLines={1}>
{address}
</Text>
</View>
</Skeleton>
<Skeleton colorMode={"light"}>
<Text
style={[
styles.boxStatus,
appStyle.text12Medium,
{
backgroundColor:color.successColor2,
color: color.successColor,
},
]}
>
TEXT
</Text>
</Skeleton>
</View>
</View>
{status === "success" && (
<>
<AppSpacing height={12} />
<Skeleton colorMode={"light"}>
<View style={[appStyle.rowBtw, styles.boxInfo]}>
<View style={appStyle.rowCenter}>
<SVGS.IConClock color={color.text} width={14} />
<Text style={[appStyle.text12Medium, { marginLeft: 8 }]}>
{datetimebegin.slice(10)}
</Text>
</View>
<View style={[appStyle.rowCenter, {}]}>
<SVGS.IConCalendar color={color.text} />
<Text style={[appStyle.text12Medium, { marginLeft: 8 }]} numberOfLines={1}>
{datetimebegin.slice(0, 10)}
</Text>
</View>
<View style={appStyle.rowCenter}>
<SVGS.People color={color.text} />
<Text style={[appStyle.text12Medium, { marginLeft: 8 }]}>
{num_guests} người
</Text>
</View>
</View>
</Skeleton>
</>
)}
</>
</Skeleton.Group>
</TouchableOpacity>
)
}
export default ItemTable
==================| TableHome |===================
<FlashList
showsHorizontalScrollIndicator={false}
horizontal
data={listTable}
renderItem={({ item }) => (
)}
ItemSeparatorComponent={SeparatorComponent}
keyExtractor={(item) => item.id.toString()}
estimatedItemSize={listTable?.length > 0 ? listTable?.length : 1}
/>
Flashlist does not receive isLoading change event when using moti/skeleton here is my. code
const ItemTable = ({
data,
noShadow = false,
containerStyle,
navigation,
isLoading,
}: {
data: TableOrderProps
noShadow?: boolean
containerStyle?: StyleProp
navigation: any
isLoading?: boolean
}) => {
const { datetimebegin, status, num_guests } = data.bookings
const { image_mobile_photo, address, name } = data.shops
return (
<TouchableOpacity
style={[noShadow ? null : appStyle.shadow, styles.container, containerStyle]}
onPress={() => {
navigation.navigate("DetailTableOrder", { navigation: navigation, data: data })
}}
>
<Skeleton.Group show={isLoading}>
<>
<Skeleton colorMode={"light"} radius={4}>
<Image style={styles.image} source={{ uri: image_mobile_photo }} />
<View
style={[appStyle.columnBtw, { alignItems: "flex-start", marginLeft: 12, flex: 1 }]}
>
<Skeleton colorMode={"light"} width={"100%"}>
{name}
)
}
export default ItemTable
==================| TableHome |===================
<FlashList
showsHorizontalScrollIndicator={false}
horizontal
data={listTable}
renderItem={({ item }) => (
)}
ItemSeparatorComponent={SeparatorComponent}
keyExtractor={(item) => item.id.toString()}
estimatedItemSize={listTable?.length > 0 ? listTable?.length : 1}
/>