67 unable to use local images

README.md

@@ -49,11 +49,14 @@ If you use video in your stories, please make sure you have `react-native-video`
 To use the `InstagramStories` component, you need to import it in your React Native application and include it in your JSX code. Here's an example of how to use it:
 
 ```jsx
-import React from 'react';
+import React, { useRef } from 'react';
 import { View } from 'react-native';
-import InstagramStories from '@birdwingo/react-native-instagram-stories';
+import InstagramStories, { InstagramStoriesPublicMethods } from '@birdwingo/react-native-instagram-stories';
 
 const YourComponent = () => {
+
+  // to use public methods:
+  const ref = useRef( null ); // if using typescript - useRef<InstagramStoriesPublicMethods>( null )
 
   const stories = [{
     id: 'user1',
@@ -65,13 +68,18 @@ const YourComponent = () => {
       // ...
     ]}, // ...
   ];
+
+  // usage of public method
+  const setStories = () => ref.current?.setStories( stories );
 
   return (
     <View>
       <InstagramStories
+        ref={ref}
         stories={stories}
         // ...
       />
+     <Pressable onPress={setStories}>{...}</Pressable>
     </View>
   );
 };
@@ -144,7 +152,7 @@ export default YourComponent;
  Parameter             | Type                                   | Required
 -----------------------|----------------------------------------|----------------
  `id`                  | string                                 | true
- `imgUrl`              | string                                 | false
+ `avatarSource`        | ImageProps['source']                   | false
  `renderAvatar`        | () => ReactNode                        | false
  `renderStoryHeader`   | () => ReactNode                        | false
  `name`                | string                                 | false

src/components/Avatar/index.tsx

@@ -14,6 +14,7 @@ const AnimatedImage = Animated.createAnimatedComponent( Image );
 
 const StoryAvatar: FC<StoryAvatarProps> = ( {
   id,
+  avatarSource,
   imgUrl,
   name,
   stories,
@@ -52,7 +53,7 @@ const StoryAvatar: FC<StoryAvatarProps> = ( {
         <TouchableOpacity activeOpacity={0.6} onPress={onPress} testID={`${id}StoryAvatar${stories.length}Story`}>
           <Loader loading={isLoading} color={loaderColor} size={size + AVATAR_OFFSET * 2} />
           <AnimatedImage
-            source={{ uri: imgUrl }}
+            source={avatarSource ?? { uri: imgUrl }}
             style={[
               AvatarStyles.avatar,
               imageAnimatedStyles,

src/components/Header/index.tsx

@@ -8,7 +8,7 @@ import { StoryHeaderProps } from '../../core/dto/componentsDTO';
 import Close from '../Icon/close';
 
 const StoryHeader: FC<StoryHeaderProps> = ( {
-  imgUrl, name, onClose, avatarSize, textStyle, closeColor, headerStyle,
+  avatarSource, imgUrl, name, onClose, avatarSize, textStyle, closeColor, headerStyle,
   headerContainerStyle, renderStoryHeader,
 } ) => {
 
@@ -34,9 +34,9 @@ const StoryHeader: FC<StoryHeaderProps> = ( {
     ]}
     >
       <View style={[ HeaderStyles.left, headerStyle ]}>
-        {Boolean( imgUrl ) && (
+        {( Boolean( avatarSource ) || Boolean( imgUrl ) ) && (
           <View style={[ HeaderStyles.avatar, { borderRadius: styles.borderRadius } ]}>
-            <Image source={{ uri: imgUrl }} style={styles} />
+            <Image source={avatarSource ?? { uri: imgUrl }} style={styles} />
           </View>
         )}
         {Boolean( name ) && <Text style={textStyle}>{name}</Text>}

src/components/InstagramStories/index.tsx

@@ -228,7 +228,8 @@ const InstagramStories = forwardRef<InstagramStoriesPublicMethods, InstagramStor
     <>
       {!hideAvatarList && (
       <ScrollView horizontal {...listContainerProps} {...avatarListContainerProps} contentContainerStyle={[ listContainerStyle, avatarListContainerStyle ]} testID="storiesList">
-        {data.map( ( story ) => story.renderAvatar?.() ?? ( story.imgUrl && (
+        {data.map( ( story ) => story.renderAvatar?.()
+        ?? ( ( story.avatarSource || story.imgUrl ) && (
           <StoryAvatar
             {...story}
             loadingStory={loadingStory}

src/core/dto/componentsDTO.ts

@@ -109,6 +109,7 @@ export interface StoryProgressItemProps extends Omit<StoryProgressProps, 'length
 }
 
 export interface StoryHeaderProps {
+  avatarSource?: ImageProps['source'];
   imgUrl?: string;
   name?: string;
   avatarSize: number;

src/core/dto/instagramStoriesDTO.ts

@@ -20,7 +20,11 @@ export interface StoryItemProps {
 
 export interface InstagramStoryProps {
   id: string;
+  /**
+    * @deprecated Use {@link avatarSource} instead (set avatarSource to {uri: 'your url'}).
+  */
   imgUrl?: string;
+  avatarSource?: ImageProps['source'];
   renderAvatar?: () => ReactNode;
   renderStoryHeader?: () => ReactNode;
   name?: string;