From 37760c4ba461747cf2a29828a0cac733f76d78f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Fridmansk=C3=BD?=
 <luky.fridmansky@gmail.com>
Date: Sun, 28 Jan 2024 16:52:45 +0100
Subject: [PATCH] feat: image styles

---
 README.md                      | 1 +
 src/components/Image/index.tsx | 4 ++--
 src/components/List/index.tsx  | 3 ++-
 src/components/Modal/index.tsx | 5 ++++-
 src/core/dto/componentsDTO.ts  | 5 ++++-
 5 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index d2996e4..fde2a24 100644
--- a/README.md
+++ b/README.md
@@ -104,6 +104,7 @@ export default YourComponent;
  `progressActiveColor`      | string                                       | '#FFFFFF'                                  | Background color of progress bar item in active state
  `modalAnimationDuration`   | number                                       | 800                                        | Duration of modal animation in ms (showing/closing instagram stories)
  `mediaContainerStyle`      | ViewStyle                                    |                                            | Additional styles for media (video or image) container
+ `imageStyles`              | ImageStyle                                   | { width: WIDTH, aspectRatio: 0.5626 }      | Additional styles image component
  `onShow`                   | ( id: string ) => void                       |                                            | Callback when a story is shown.
  `onHide`                   | ( id: string ) => void                       |                                            | Callback when a story is hidden.
  `onSwipeUp`                | ( userId?: string, storyId?: string ) => void|                                            | Callback when user swipes up.
diff --git a/src/components/Image/index.tsx b/src/components/Image/index.tsx
index 8681a6b..5491cc4 100644
--- a/src/components/Image/index.tsx
+++ b/src/components/Image/index.tsx
@@ -11,7 +11,7 @@ import StoryVideo from './video';
 
 const StoryImage: FC<StoryImageProps> = ( {
   stories, activeStory, defaultImage, isDefaultVideo, paused, videoProps, isActive,
-  mediaContainerStyle, onImageLayout, onLoad,
+  mediaContainerStyle, imageStyles, onImageLayout, onLoad,
 } ) => {
 
   const [ data, setData ] = useState<{ uri: string | undefined, isVideo?: boolean }>(
@@ -113,7 +113,7 @@ const StoryImage: FC<StoryImageProps> = ( {
           ) : (
             <Image
               source={{ uri: data.uri }}
-              style={{ width: WIDTH, aspectRatio: 0.5626 }}
+              style={[ { width: WIDTH, aspectRatio: 0.5626 }, imageStyles ]}
               resizeMode="contain"
               testID="storyImageComponent"
               onLayout={( e ) => onImageLayout( Math.min( HEIGHT, e.nativeEvent.layout.height ) )}
diff --git a/src/components/List/index.tsx b/src/components/List/index.tsx
index 7fb42bd..1f076fa 100644
--- a/src/components/List/index.tsx
+++ b/src/components/List/index.tsx
@@ -12,7 +12,7 @@ import StoryFooter from '../Footer';
 
 const StoryList: FC<StoryListProps> = ( {
   id, stories, index, x, activeUser, activeStory, progress, seenStories, paused,
-  onLoad, videoProps, progressColor, progressActiveColor, mediaContainerStyle, ...props
+  onLoad, videoProps, progressColor, progressActiveColor, mediaContainerStyle, imageStyles, ...props
 } ) => {
 
   const imageHeight = useSharedValue( HEIGHT );
@@ -48,6 +48,7 @@ const StoryList: FC<StoryListProps> = ( {
           isActive={isActive}
           videoProps={videoProps}
           mediaContainerStyle={mediaContainerStyle}
+          imageStyles={imageStyles}
         />
         <Progress
           active={isActive}
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 2c26b78..085ff13 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -318,7 +318,10 @@ const StoryModal = forwardRef<StoryModalPublicMethods, StoryModalProps>( ( {
 
   const onPressOut = ( { nativeEvent: { locationX, locationY } }: GestureResponderEvent ) => {
 
-    if ( pressInformation.value.x !== locationX || pressInformation.value.y !== locationY ) {
+    const diffX = Math.abs( pressInformation.value.x - locationX );
+    const diffY = Math.abs( pressInformation.value.y - locationY );
+
+    if ( diffX >= 10 || diffY >= 10 ) {
 
       return;
 
diff --git a/src/core/dto/componentsDTO.ts b/src/core/dto/componentsDTO.ts
index 648cf35..1aa8996 100644
--- a/src/core/dto/componentsDTO.ts
+++ b/src/core/dto/componentsDTO.ts
@@ -1,5 +1,5 @@
 import { SharedValue } from 'react-native-reanimated';
-import { TextStyle, ViewStyle } from 'react-native';
+import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 import { InstagramStoryProps } from './instagramStoriesDTO';
 import { ProgressStorageProps } from './helpersDTO';
 
@@ -35,6 +35,7 @@ export interface StoryModalProps {
   progressColor?: string;
   modalAnimationDuration?: number;
   mediaContainerStyle?: ViewStyle;
+  imageStyles?: ImageStyle;
   onLoad: () => void;
   onShow?: ( id: string ) => void;
   onHide?: ( id: string ) => void;
@@ -76,6 +77,7 @@ export interface StoryImageProps {
   videoProps?: any;
   mediaContainerStyle?: ViewStyle;
   isActive: SharedValue<boolean>;
+  imageStyles?: ImageStyle;
   onImageLayout: ( height: number ) => void;
   onLoad: ( duration?: number ) => void;
 }
@@ -125,6 +127,7 @@ export interface StoryListProps extends InstagramStoryProps, StoryHeaderProps {
   progressActiveColor?: string;
   progressColor?: string;
   mediaContainerStyle?: ViewStyle;
+  imageStyles?: ImageStyle;
   onLoad: ( duration?: number ) => void;
 }