162 add loader color and background customization

README.md

@@ -129,6 +129,8 @@ export default YourComponent;
  `hideOverlayOnLongPress`   | `boolean`                                    | The value of `hideElementOnLongPress`      | Controls whether the image overlay hides when `hideElementOnLongPress` is set to `true`. If `true`, the overlay will hide along with other elements on long press. If `false`, only the other elements (e.g., header, progress bar) will hide, and the overlay will remain visible.
  `loopingStories`           | `'none'` | `'onlyLast'` | `'all'`            | `'none'`                                   | A string indicating whether to continue stories after last story was shown. If set to `'none'` modal will be closed after all stories were played, if set to `'onlyLast'` stories will loop on last user only after all stories were played. If set to `'all'` stories will play from beginning after all stories were played.
  `statusBarTranslucent`     | boolean                                      | false                                      | A property passed to React native Modal component
+ `loaderColor`              | string                                       | '#FFFFFF'                                  | The color of the loading spinner.
+ `loaderBackgroundColor`    | string                                       |                                            | Background color of the loading overlay.
  `footerComponent`          | ReactNode                                    |                                            | A custom component, such as a floating element, that can be added to the modal.
  `imageOverlayView`         | ReactNode                                    |                                            | Image overlay compontent
  `onShow`                   | ( id: string ) => void                       |                                            | Callback when a story is shown.

src/components/Image/Image.styles.ts

@@ -9,6 +9,7 @@ export default StyleSheet.create( {
     right: 0,
     alignItems: 'center',
     justifyContent: 'center',
+    zIndex: 2,
   },
   image: {
     alignItems: 'center',

src/components/Image/index.tsx

@@ -12,22 +12,27 @@ import { StoryItemProps } from '../../core/dto/instagramStoriesDTO';
 
 const StoryImage: FC<StoryImageProps> = ( {
   stories, activeStory, defaultStory, isDefaultVideo, paused, videoProps, isActive,
-  mediaContainerStyle, imageStyles, imageProps, videoDuration, onImageLayout, onLoad,
+  mediaContainerStyle, imageStyles, imageProps, videoDuration, loaderColor,
+  loaderBackgroundColor, onImageLayout, onLoad,
 } ) => {
 
   const [ data, setData ] = useState<{ data?: StoryItemProps, isVideo?: boolean }>(
     { data: defaultStory, isVideo: isDefaultVideo },
   );
 
   const loading = useSharedValue( true );
-  const color = useSharedValue( LOADER_COLORS );
+  const color = useSharedValue( loaderColor ? [ loaderColor ] : LOADER_COLORS );
   const duration = useSharedValue<number | undefined>( undefined );
   const isPaused = useDerivedValue( () => paused.value || !isActive.value );
 
   const loaderHideStyle = useAnimatedStyle( () => ( {
     opacity: loading.value ? 1 : 0,
   } ) );
 
+  const loaderBackgroundStyle = useAnimatedStyle( () => ( {
+    backgroundColor: loaderBackgroundColor || 'transparent',
+  } ) );
+
   const onImageChange = async () => {
 
     if ( !activeStory.value ) {
@@ -98,7 +103,7 @@ const StoryImage: FC<StoryImageProps> = ( {
 
   return (
     <>
-      <Animated.View style={[ ImageStyles.container, loaderHideStyle ]}>
+      <Animated.View style={[ ImageStyles.container, loaderHideStyle, loaderBackgroundStyle ]}>
         <Loader loading={loading} color={color} size={50} />
       </Animated.View>
       <View style={[ ImageStyles.image, mediaContainerStyle ]}>

src/components/InstagramStories/index.tsx

@@ -34,6 +34,8 @@ const InstagramStories = forwardRef<InstagramStoriesPublicMethods, InstagramStor
   isVisible = false,
   hideAvatarList = false,
   avatarBorderRadius,
+  loaderColor,
+  loaderBackgroundColor,
   ...props
 }, ref ) => {
 
@@ -257,6 +259,8 @@ const InstagramStories = forwardRef<InstagramStoriesPublicMethods, InstagramStor
         videoDuration={videoAnimationMaxDuration}
         videoProps={videoProps}
         closeIconColor={closeIconColor}
+        loaderColor={loaderColor}
+        loaderBackgroundColor={loaderBackgroundColor}
         {...props}
       />
     </>

src/components/List/index.tsx

@@ -16,7 +16,7 @@ const StoryList: FC<StoryListProps> = ( {
   id, stories, index, x, activeUser, activeStory, progress, seenStories, paused,
   onLoad, videoProps, progressColor, progressActiveColor, mediaContainerStyle, imageStyles,
   imageProps, progressContainerStyle, imageOverlayView, hideElements, hideOverlayViewOnLongPress,
-  videoDuration, ...props
+  videoDuration, loaderColor, loaderBackgroundColor, ...props
 } ) => {
 
   const imageHeight = useSharedValue( HEIGHT );
@@ -58,6 +58,8 @@ const StoryList: FC<StoryListProps> = ( {
           imageStyles={imageStyles}
           imageProps={imageProps}
           videoDuration={videoDuration}
+          loaderColor={loaderColor}
+          loaderBackgroundColor={loaderBackgroundColor}
         />
         <Animated.View
           style={[

src/components/Modal/index.tsx

@@ -19,7 +19,7 @@ const StoryModal = forwardRef<StoryModalPublicMethods, StoryModalProps>( ( {
   stories, seenStories, duration, videoDuration, storyAvatarSize, textStyle, containerStyle,
   backgroundColor, videoProps, closeIconColor, modalAnimationDuration = STORY_ANIMATION_DURATION,
   storyAnimationDuration = STORY_ANIMATION_DURATION, hideElementsOnLongPress, loopingStories = 'none',
-  statusBarTranslucent, onLoad, onShow, onHide,
+  statusBarTranslucent, loaderColor, loaderBackgroundColor, onLoad, onShow, onHide,
   onSeenStoriesChange, onSwipeUp, onStoryStart, onStoryEnd, footerComponent, ...props
 }, ref ) => {
 
@@ -499,6 +499,8 @@ const StoryModal = forwardRef<StoryModalPublicMethods, StoryModalProps>( ( {
                   closeColor={closeIconColor}
                   hideElements={hideElements}
                   videoDuration={videoDuration}
+                  loaderColor={loaderColor}
+                  loaderBackgroundColor={loaderBackgroundColor}
                   key={story.id}
                   {...props}
                 />

src/components/Progress/Progress.styles.ts

@@ -8,6 +8,7 @@ export default StyleSheet.create( {
     height: 2,
     flexDirection: 'row',
     gap: 4,
+    zindex: 3,
   },
   item: {
     height: 3,

src/core/dto/componentsDTO.ts

@@ -64,6 +64,8 @@ export interface StoryModalProps {
   hideOverlayViewOnLongPress?: boolean;
   loopingStories?: 'none' | 'all' | 'onlyLast';
   statusBarTranslucent?: boolean;
+  loaderColor?: string;
+  loaderBackgroundColor?: string;
   onLoad: () => void;
   onShow?: ( id: string ) => void;
   onHide?: ( id: string ) => void;
@@ -112,6 +114,8 @@ export interface StoryImageProps {
   imageStyles?: ImageStyle;
   imageProps?: ImageProps;
   videoDuration?: number;
+  loaderColor?: string;
+  loaderBackgroundColor?: string;
   onImageLayout: ( height: number ) => void;
   onLoad: ( duration?: number ) => void;
 }
@@ -173,6 +177,8 @@ export interface StoryListProps extends InstagramStoryProps, StoryHeaderProps {
   hideElements: SharedValue<boolean>;
   hideOverlayViewOnLongPress?: boolean;
   videoDuration?: number;
+  loaderColor?: string;
+  loaderBackgroundColor?: string;
   onLoad: ( duration?: number ) => void;
 }
 

src/core/dto/instagramStoriesDTO.ts

@@ -63,6 +63,8 @@ export interface InstagramStoriesProps {
   statusBarTranslucent?: boolean;
   footerComponent?: ReactNode;
   avatarBorderRadius?: number;
+  loaderColor?: string;
+  loaderBackgroundColor?: string;
   onShow?: ( id: string ) => void;
   onHide?: ( id: string ) => void;
   onSwipeUp?: ( userId?: string, storyId?: string ) => void;