Shopify / flash-list

A better list for React Native
https://shopify.github.io/flash-list/
MIT License
5.65k stars 284 forks source link

Got error loading when using moti/skeleton with FlashList #1330

Open LucasWilliams2622 opened 2 months ago

LucasWilliams2622 commented 2 months ago

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

<> {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}
      />