feat: onStoryHeaderPress

Added onStoryHeaderPress callback function that is called when clicked to header in stories modal
birdwingo · Jul 22, 2024 · a08c4a9 · a08c4a9
1 parent ced3105
commit a08c4a9
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -156,6 +156,7 @@ export default YourComponent;
  `avatarSource`        | ImageProps['source']                   | false
  `renderAvatar`        | () => ReactNode                        | false
  `renderStoryHeader`   | () => ReactNode                        | false
+ `onStoryHeaderPress`  | () => void                             | false
  `name`                | string                                 | false
  `stories`             | [StoryItemProps](#storyitemprops)[]    | true
 

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -1,6 +1,7 @@
 import React, { FC, memo } from 'react';
 import {
   View, Text, Image, TouchableOpacity,
+  Pressable,
 } from 'react-native';
 import { WIDTH } from '../../core/constants';
 import HeaderStyles from './Header.styles';
@@ -9,7 +10,7 @@ import Close from '../Icon/close';
 
 const StoryHeader: FC<StoryHeaderProps> = ( {
   avatarSource, imgUrl, name, onClose, avatarSize, textStyle, closeColor, headerStyle,
-  headerContainerStyle, renderStoryHeader,
+  headerContainerStyle, renderStoryHeader, onStoryHeaderPress,
 } ) => {
 
   const styles = { width: avatarSize, height: avatarSize, borderRadius: avatarSize };
@@ -33,14 +34,14 @@ const StoryHeader: FC<StoryHeaderProps> = ( {
       { width }, headerContainerStyle,
     ]}
     >
-      <View style={[ HeaderStyles.left, headerStyle ]}>
+      <Pressable style={[ HeaderStyles.left, headerStyle ]} onPress={() => onStoryHeaderPress?.()}>
         {( Boolean( avatarSource ) || Boolean( imgUrl ) ) && (
           <View style={[ HeaderStyles.avatar, { borderRadius: styles.borderRadius } ]}>
             <Image source={avatarSource ?? { uri: imgUrl }} style={styles} />
           </View>
         )}
         {Boolean( name ) && <Text style={textStyle}>{name}</Text>}
-      </View>
+      </Pressable>
       <TouchableOpacity
         onPress={onClose}
         hitSlop={16}

diff --git a/src/core/dto/componentsDTO.ts b/src/core/dto/componentsDTO.ts
@@ -120,6 +120,7 @@ export interface StoryHeaderProps {
   headerContainerStyle?: ViewStyle;
   onClose: () => void;
   renderStoryHeader?: () => ReactNode;
+  onStoryHeaderPress?: () => void;
 }
 
 export interface IconProps {

diff --git a/src/core/dto/instagramStoriesDTO.ts b/src/core/dto/instagramStoriesDTO.ts
@@ -27,6 +27,7 @@ export interface InstagramStoryProps {
   avatarSource?: ImageProps['source'];
   renderAvatar?: () => ReactNode;
   renderStoryHeader?: () => ReactNode;
+  onStoryHeaderPress?: () => void;
   name?: string;
   stories: StoryItemProps[];
 }