feat: Add footer component to StoryModal

The `footerComponent` prop has been added to the `StoryModal` component in order to allow the addition of a custom component, such as a floating element, to the modal.
birdwingo · Jul 16, 2024 · 880d091 · 880d091
1 parent d7d9ce3
commit 880d091
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -122,6 +122,7 @@ export default YourComponent;
  `progressContainerStyle`   | ViewStyle                                    |                                            | Additional styles for the story progress container
  `hideAvatarList`           | boolean                                      | false                                      | A boolean indicating whether to hide avatar scroll list
  `hideElementsOnLongPress`  | boolean                                      | false                                      | A boolean indicating whether to hide all elements when story is paused by long press
+ `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.
  `onHide`                   | ( id: string ) => void                       |                                            | Callback when a story is hidden.
@@ -179,4 +180,4 @@ Default colors for avatar gradient are the same as on Instagram - `[ '#F7B801',
 ## Sponsor
 
 **react-native-instagram-stories** is sponsored by [Birdwingo](https://www.birdwingo.com).\
-Download Birdwingo mobile app to see react-native-instagram-stories in action!
+Download Birdwingo mobile app to see react-native-instagram-stories in action!
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -20,7 +20,7 @@ const StoryModal = forwardRef<StoryModalPublicMethods, StoryModalProps>( ( {
   backgroundColor, videoProps, closeIconColor, modalAnimationDuration = STORY_ANIMATION_DURATION,
   storyAnimationDuration = STORY_ANIMATION_DURATION, hideElementsOnLongPress,
   onLoad, onShow, onHide,
-  onSeenStoriesChange, onSwipeUp, onStoryStart, onStoryEnd, ...props
+  onSeenStoriesChange, onSwipeUp, onStoryStart, onStoryEnd, footerComponent, ...props
 }, ref ) => {
 
   const [ visible, setVisible ] = useState( false );
@@ -489,6 +489,7 @@ const StoryModal = forwardRef<StoryModalPublicMethods, StoryModalProps>( ( {
               ) )}
             </Animated.View>
           </Pressable>
+          {footerComponent && footerComponent}
         </Animated.View>
       </GestureHandler>
     </Modal>

diff --git a/src/core/dto/componentsDTO.ts b/src/core/dto/componentsDTO.ts
@@ -42,6 +42,7 @@ export interface StoryModalProps {
   mediaContainerStyle?: ViewStyle;
   imageStyles?: ImageStyle;
   imageProps?: ImageProps;
+  footerComponent?: ReactNode;
   hideElementsOnLongPress?: boolean;
   onLoad: () => void;
   onShow?: ( id: string ) => void;