Feature request: hide elements on pause

[geertvansoest]

Would it be possible to hide elements like the progress bar when you press and hold the screen (when the story is paused)? Like Instagram does, so that users can make screenshots of specific story content.

[LukasFridmansky]

Hello, you can use hideElementsOnLongPress and set it to true.

[geertvansoest]

@LukasFridmansky Many thanks for this feature! But after upgrading from 1.2.6 to 1.2.10 we receive an error when we click on a story:

ERROR TypeError: property is not configurable

We found out that this issue is related to this feature. In our project, we fixed it with this patch file:

diff --git a/node_modules/@birdwingo/react-native-instagram-stories/src/components/List/index.tsx b/node_modules/@birdwingo/react-native-instagram-stories/src/components/List/index.tsx
index 6c4730a..ab63368 100644
--- a/node_modules/@birdwingo/react-native-instagram-stories/src/components/List/index.tsx
+++ b/node_modules/@birdwingo/react-native-instagram-stories/src/components/List/index.tsx
@@ -28,7 +28,6 @@ const StoryList: FC<StoryListProps> = ( {
   const animatedStyles = useAnimatedStyle( () => ( { height: imageHeight.value } ) );
   const contentStyles = useAnimatedStyle( () => ( {
     opacity: withTiming( hideElements.value ? 0 : 1 ),
-    ...ListStyles.content,
   } ) );

   const onImageLayout = ( height: number ) => {
@@ -59,7 +58,7 @@ const StoryList: FC<StoryListProps> = ( {
           imageProps={imageProps}
           videoDuration={videoDuration}
         />
-        <Animated.View style={contentStyles}>
+        <Animated.View style={[contentStyles, ListStyles.content]}>
           {imageOverlayView}
           <Progress
             active={isActive}

The fix makes sense since you did already apply the combined styling the same way to the container component in that file:

<Animated.View style={[ animatedStyles, ListStyles.container ]}>

[geertvansoest]

In the meantime, I found out this error didn't occur before we also updated the (other) packages, under which react-native-reanimated from 3.8.1 to 3.12.0. So I think it's also related to that new version.