fix: image preload

README.md

@@ -20,12 +20,10 @@ npm install react-native-gesture-handler
 npm install @birdwingo/react-native-instagram-stories
 ```
 
-## Integration with Storage, Preloading and Video
+## Integration with Storage and Video
 
 The component offers an option to save and track the progress of seen stories using `saveProgress`. If you use `saveProgress`, please make sure you have `@react-native-async-storage/async-storage` installed.
 
-Additionally, the component preloads images to improve performance when navigating between stories using `preloadImages`. If you use `preloadImages`, please make sure you have `react-native-blob-util` installed.
-
 If you use video in your stories, please make sure you have `react-native-video` installed.
 
 ## Usage
@@ -68,7 +66,6 @@ export default YourComponent;
 ----------------------------|----------------------------------------------|--------------------------------------------|---------------------
  `stories`                  | [InstagramStoryProps](#instagramstoryprops)[]| **required**                               | An array of stories.
  `saveProgress`             | boolean                                      | false                                      | A boolean indicating whether to save and track the progress of seen stories.
- `preloadImages`            | boolean                                      | false                                      | A boolean indicating whether to preload images.
  `avatarBorderColors`       | string[]                                     | [DEFAULT_COLORS](#default-gradient-colors) | An array of string colors representing the border colors of story avatars.
  `avatarSeenBorderColors`   | string[]                                     | [ '#2A2A2C' ]                              | An array of string colors representing the border colors of seen story avatars.
  `avatarSize`               | number                                       | 60                                         | The size of the story avatars.

package.json

@@ -54,7 +54,6 @@
     "eslint-config-airbnb-typescript": "^16.1.0",
     "husky": "^8.0.3",
     "jest": "^29.6.2",
-    "react-native-blob-util": "^0.19.0",
     "react-native-video": "^5.2.1",
     "react-test-renderer": "^18.2.0",
     "standard-version": "^9.5.0",

src/components/Image/index.tsx

@@ -1,27 +1,24 @@
 import { Image, View } from 'react-native';
-import React, {
-  FC, memo, useState, useEffect, useRef,
-} from 'react';
+import React, { FC, memo, useState } from 'react';
 import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
 import { StoryImageProps } from '../../core/dto/componentsDTO';
 import Loader from '../Loader';
 import { HEIGHT, LOADER_COLORS, WIDTH } from '../../core/constants';
 import ImageStyles from './Image.styles';
-import { loadImage } from '../../core/helpers/image';
 import StoryVideo from './video';
 
 const StoryImage: FC<StoryImageProps> = ( {
-  stories, active, activeStory, defaultImage, isDefaultVideo, preloadImages, paused,
+  stories, active, activeStory, defaultImage, isDefaultVideo, paused,
   onImageLayout, onLoad,
 } ) => {
 
-  const [ data, setData ] = useState<{ uri: string, isVideo?: boolean }>( { uri: '' } );
+  const [ data, setData ] = useState<{ uri: string, isVideo?: boolean }>(
+    { uri: defaultImage, isVideo: isDefaultVideo },
+  );
 
   const loading = useSharedValue( true );
   const color = useSharedValue( LOADER_COLORS );
 
-  const storyImgUrl = useRef( '' );
-
   const onImageChange = async () => {
 
     if ( !active.value ) {
@@ -38,58 +35,22 @@ const StoryImage: FC<StoryImageProps> = ( {
 
     }
 
-    if ( storyImgUrl.current === story.sourceUrl ) {
+    if ( data.uri === story.sourceUrl ) {
 
       onLoad();
 
-      if ( preloadImages ) {
-
-        const nextStory = stories[stories.indexOf( story ) + 1];
-
-        if ( nextStory ) {
-
-          loadImage( nextStory.sourceUrl );
-
-        }
-
-      }
-
-      return;
-
-    }
-
-    loading.value = true;
-
-    if ( preloadImages ) {
-
-      setData( { uri: '', isVideo: false } );
-
-      const uri = await loadImage( story.sourceUrl );
-
-      setData( { uri, isVideo: story.mediaType === 'video' } );
-
-      storyImgUrl.current = story.sourceUrl;
-
     } else {
 
-      storyImgUrl.current = story.sourceUrl;
+      loading.value = true;
       setData( { uri: story?.sourceUrl, isVideo: story?.mediaType === 'video' } );
 
     }
 
-  };
-
-  const setDefaultImage = async () => {
+    const nextStory = stories[stories.indexOf( story ) + 1];
 
-    if ( preloadImages ) {
+    if ( nextStory ) {
 
-      const uri = await loadImage( defaultImage );
-      setData( { uri, isVideo: isDefaultVideo } );
-      storyImgUrl.current = defaultImage;
-
-    } else {
-
-      setData( { uri: defaultImage, isVideo: isDefaultVideo } );
+      Image.prefetch( nextStory.sourceUrl );
 
     }
 
@@ -108,12 +69,6 @@ const StoryImage: FC<StoryImageProps> = ( {
 
   };
 
-  useEffect( () => {
-
-    setDefaultImage();
-
-  }, [] );
-
   return (
     <>
       <View style={ImageStyles.container}>

src/components/InstagramStories/index.tsx

@@ -2,7 +2,7 @@ import React, {
   forwardRef, useImperativeHandle, useState, useEffect, useRef, memo,
 } from 'react';
 import { useSharedValue } from 'react-native-reanimated';
-import { ScrollView } from 'react-native';
+import { Image, ScrollView } from 'react-native';
 import StoryAvatar from '../Avatar';
 import { clearProgressStorage, getProgressStorage, setProgressStorage } from '../../core/helpers/storage';
 import { InstagramStoriesProps, InstagramStoriesPublicMethods } from '../../core/dto/instagramStoriesDTO';
@@ -13,12 +13,10 @@ import {
 } from '../../core/constants';
 import StoryModal from '../Modal';
 import { StoryModalPublicMethods } from '../../core/dto/componentsDTO';
-import { preloadStories } from '../../core/helpers/image';
 
 const InstagramStories = forwardRef<InstagramStoriesPublicMethods, InstagramStoriesProps>( ( {
   stories,
   saveProgress = false,
-  preloadImages = false,
   avatarBorderColors = DEFAULT_COLORS,
   avatarSeenBorderColors = SEEN_LOADER_COLORS,
   avatarSize = AVATAR_SIZE,
@@ -69,11 +67,18 @@ const InstagramStories = forwardRef<InstagramStoriesPublicMethods, InstagramStor
 
     seenStories.value = await ( saveProgress ? getProgressStorage() : {} );
 
-    if ( preloadImages ) {
+    const promises = stories.map( ( story ) => {
 
-      await preloadStories( data, seenStories.value );
+      const seenStoryIndex = story.stories.findIndex(
+        ( item ) => item.id === seenStories.value[story.id],
+      );
+      const seenStory = story.stories[seenStoryIndex + 1] || story.stories[0];
 
-    }
+      return Image.prefetch( seenStory.sourceUrl );
+
+    } );
+
+    await Promise.all( promises );
 
     loadedStories.value = true;
 
@@ -207,7 +212,6 @@ const InstagramStories = forwardRef<InstagramStoriesPublicMethods, InstagramStor
         onLoad={onLoad}
         onSeenStoriesChange={onSeenStoriesChange}
         backgroundColor={backgroundColor}
-        preloadImages={preloadImages}
         videoDuration={videoAnimationMaxDuration}
         {...props}
       />

src/components/List/index.tsx

@@ -10,7 +10,7 @@ import { HEIGHT } from '../../core/constants';
 import StoryContent from '../Content';
 
 const StoryList: FC<StoryListProps> = ( {
-  id, stories, index, x, activeUser, activeStory, progress, seenStories, preloadImages, paused,
+  id, stories, index, x, activeUser, activeStory, progress, seenStories, paused,
   onLoad, ...props
 } ) => {
 
@@ -54,7 +54,6 @@ const StoryList: FC<StoryListProps> = ( {
           isDefaultVideo={( stories[lastSeenIndex + 1]?.mediaType ?? stories[0].mediaType ) === 'video'}
           onImageLayout={onImageLayout}
           onLoad={onImageLoad}
-          preloadImages={preloadImages}
           paused={paused}
         />
         <Progress

src/components/Modal/index.tsx

@@ -17,7 +17,7 @@ import ModalStyles from './Modal.styles';
 
 const StoryModal = forwardRef<StoryModalPublicMethods, StoryModalProps>( ( {
   stories, seenStories, duration, videoDuration, storyAvatarSize, textStyle, containerStyle,
-  backgroundColor, preloadImages, onLoad, onShow, onHide, onSeenStoriesChange,
+  backgroundColor, onLoad, onShow, onHide, onSeenStoriesChange,
 }, ref ) => {
 
   const [ visible, setVisible ] = useState( false );
@@ -321,7 +321,6 @@ const StoryModal = forwardRef<StoryModalPublicMethods, StoryModalProps>( ( {
                 avatarSize={storyAvatarSize}
                 textStyle={textStyle}
                 buttonHandled={buttonHandled}
-                preloadImages={preloadImages}
                 paused={paused}
                 key={story.id}
               />

src/core/dto/componentsDTO.ts

@@ -29,7 +29,6 @@ export interface StoryModalProps {
   textStyle?: TextStyle;
   containerStyle?: ViewStyle;
   backgroundColor?: string;
-  preloadImages: boolean;
   onLoad: () => void;
   onShow?: ( id: string ) => void;
   onHide?: ( id: string ) => void;
@@ -61,7 +60,6 @@ export interface StoryImageProps {
   activeStory: SharedValue<string>;
   defaultImage: string;
   isDefaultVideo: boolean;
-  preloadImages: boolean;
   paused: SharedValue<boolean>;
   onImageLayout: ( height: number ) => void;
   onLoad: ( duration?: number ) => void;
@@ -105,7 +103,6 @@ export interface StoryListProps extends InstagramStoryProps, StoryHeaderProps {
   activeStory: SharedValue<string>;
   progress: SharedValue<number>;
   seenStories: SharedValue<ProgressStorageProps>;
-  preloadImages: boolean;
   paused: SharedValue<boolean>;
   onLoad: ( duration?: number ) => void;
 }

src/core/dto/instagramStoriesDTO.ts

@@ -18,7 +18,6 @@ export interface InstagramStoryProps {
 export interface InstagramStoriesProps {
   stories: InstagramStoryProps[];
   saveProgress?: boolean;
-  preloadImages?: boolean;
   avatarBorderColors?: string[];
   avatarSeenBorderColors?: string[];
   avatarSize?: number;