Video support?

[usmansbk]

Does this package support videos?

[chrizuuu]

Hi, no it doesn't support, I don't even see any use cases for video galleries.

[ameer-taghavi]

Hi, no it doesn't support, I don't even see any use cases for video galleries.

@chrizuuu
But this is useful for social networking apps. I have make a social networking app where a user can post multiple images and videos in one post.

I changed your code to support any components.

types.ts:
children: React.ReactNode;

GalleryPreview.tsx:

{React.Children.toArray(children).map((child, i) => {
  const visible = isImageVisible(i);
  return (
      <View key={i} style={{ ...dimensions }}>
          {visible && (
              <GalleryItem
                   item={child}
                   index={i}
                   isLast={i === React.Children.count(children) - 1}
                   ... />)}
         .../>

GalleryItem.tsx:

...
<GestureDetector gesture={doubleTap}>
  {item}
</GestureDetector>
...

Example:

<GalleryPreview ...>
  <Image .../>
  <Image .../>
  <Video .../>
</GalleryPreview>

if u agree i can send a pull request

[chrizuuu]

Ok, fine but for now I'm more inclined to simply make a separate component for such cas to not spoil the current interface. In the future maybe I'll somehow combine it into one component.

I'll try to figure it out over the weekend

[chrizuuu]

Sorry for the slight delay but managed to add a new version with support for any components 1.3.0

To use the new component just add the type='children' parameter to the main gallery component. This will change the interface and required parameters: 'images' to 'children'. Example below.

The API for the main component has not changed.

<GalleryPreview
        isVisible={isVisible}
        onRequestClose={handleCloseImageViewer}
        type="children”
      >
        <ImageItem source={images[0]}. />
        <VideoItem />
        <VideoItem />
        <ImageItem source={images[1]} />
        <ImageItem source={images[2]}. />
        <VideoItem />
      </GalleryPreview>.

This is still a development version so I am open if there are any problems.

[ameer-taghavi]

Thanks @chrizuuu
I'll test it

[ameer-taghavi]

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-10-29.at.14.15.10.mp4

video controls doesn't works

[chrizuuu]

@ameer-taghavi
This is because any clicks are captured by the component responsible for gestures. In this case, it is a single click that hides/shows the header component.

At this point, the only solution I have is to add a props that will block this func but then the header in the preview will be permanently visible or permanently hidden.

[ameer-orange]

@ameer-taghavi This is because any clicks are captured by the component responsible for gestures. In this case, it is a single click that hides/shows the header component.

At this point, the only solution I have is to add a props that will block this func but then the header in the preview will be permanently visible or permanently hidden.

can we have a prop to disable/enable gestures?
For example, disable gestures when the video is playing
@chrizuuu

[chrizuuu]

@ameer-taghavi

I tested the disabled prop, but it didn’t quite work as I initially expected. For now, I don’t have much time to dive deeper into this since I have other higher-priority tasks to focus on. However, I’d be happy to review and accept a PR if someone wants to implement this functionality.