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]

https://github.com/user-attachments/assets/b937a9b5-c093-4c76-a57f-65e1a38065dd

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.