React-native expo image cache deprecated

React Native
7

import { Image } from “react-native-expo-image-cache”;

just a little update: React Native Expo Image Cache library works in 2024.

IMPORT THE PACKAGE

import { Image } from "react-native-expo-image-cache";

INCLUDE THE ATTRIBUTES TO YOUR COMPONENT

function Card({
  title,
  subTitle,
  imageUrl,
  onPress,
  numberOfLines = 2,
  thumbnailUrl,
}) {
  return (
    <TouchableWithoutFeedback onPress={onPress}>
      <View style={styles.background}>
        <View style={styles.cardContainer}>
          <Image
            style={styles.image}
            tint="light"
            preview={{ uri: thumbnailUrl }}
            uri={imageUrl}
          />

MAKE THE CHANGES ON THE SCREEN

      <FlatList
        data={getListingsApi.data}
        keyExtractor={(listings) => listings.id.toString()}
        renderItem={({ item }) => (
          <Card
            title={item.title}
            subTitle={"$" + item.price}
            imageUrl={
              item.images && item.images.length > 0 ? item.images[0].url : null
            }
            onPress={() => navigation.navigate(routes.LISTING_DETAILS, item)}
            thumbnailUrl={
              item.images && item.images.length > 0
                ? item.images[0].thumbnailUrl
                : null
            }
          />
        )}
      />