React-native expo image cache deprecated

React Native
1

Hi, I am just taking the ultimate react native course and i’m on part two of the series(specifically offline support). In the course Mosh is using the alternative
React-native expo image cache however, the library is deprecated. Any idea on the way foward?

1 Like
2

Moreover I get this error when i try using it (Android Bundling failed 2730ms
Unable to resolve “react-native-svg” from “node_modules\react-native-progress\Circle.js”)

i’m not using progress circle so i don’t understand why i’m getting this error.

I am trying to reinstall progress and i keep getting error

3

After struggling to debug the app all night, here’s what i found.

React-Native-Cache-Image has a serious bug, probably because it is deprecated. It broke the react native progress folder thereby causing that error above. I deleted the cached -image folder and remove all trace of the cache-image code from my project and now my project is fine. However, for some unknow reason, i cannot install react-native-progress with npm in this project only yarn. I tried installing it with npm in a new project and it work just fine, if someone got any idea why please let me know.

Lastly my project in running but i still cant complete the offline section due to image-cache being deprecated, I’m hoping @codewithmosh can look into this as the community seems quiet and outside help proving fruitless as well.

1 Like
4

you most open the terminal as administrators after that install:

npm install react-native-progress

expo install react-native-svg

focus on the lesson: 17- Adding a Progress Bar

5

I dont have problem with my progress bar. I had issue with the cache image library since it is deprecated.

1 Like
6

Screenshot of the code

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
            }
          />
        )}
      />
8

Hi guys, the latest expo-image uses caching, see Image - Expo Documentation