feat: image styles

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.

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

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}

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;
 

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;
 }