oblador / react-native-lightbox

Images etc in Full Screen Lightbox Popovers for React Native
MIT License
2.82k stars 501 forks source link

can i swipe few images as gallery? #55

Open roysG opened 8 years ago

roysG commented 8 years ago

I mean if i have few image on the page and i click on one of them, can i swipe with the hand to the next image?

prashen commented 8 years ago

@shidhincr My question is also same. Can we open image and slide as facebook did with multiple image view slide?

waleedarshad-vf commented 8 years ago

@anyone find any solutions?

prashen commented 8 years ago

I think there is already a solution! react-native-lightbox itself using carousel inside their example https://github.com/oblador/react-native-lightbox/blob/master/Example/app.js. You need to use page swipe and it will smooth gallery see example in the looped carousel plugin https://github.com/appintheair/react-native-looped-carousel#usage.

I have used only react-native-looped-carousel inside react-native native modal component and it's working fine and smooth. I have created a facebook type image popup and image swipe.

anhreg commented 7 years ago

@prashen thanks for the hint. I've looked into it. It works but not in the way I want. The list of items in Carousel content is not the content from the list that wraps lightbox, a scrollview for instance. You have to duplicate the content of the scrollview to make it work. This reduces the performance a lot. I hope in future release, we'll swipe left/right integrated into lightbox.

kashav commented 7 years ago

@anhreg Did you end up finding a better way to do this? I'm also looking for a more performant solution.

hoscarcito commented 6 years ago

Maybe it's too late, but I think you can use the renderItem function and pass the position of the item and in the render function use a map with the array to create the carousel components.

<FlatList
  horizontal
  data={Object.values(album.items)}
  renderItem={({ item, index }) => (
    <Lightbox activeProps={activeProps} renderContent={renderCarousel(index)}>
      <Image source={{ uri: item.URL }}/>
    </Lightbox>
  )}
  keyExtractor={(item, index) => index}
/>

Cheers!

WhiteRose7-pretty commented 2 years ago

Thanks @hoscarcito Your idea is good. But renderContent props is function, is not object. do you have idea to fix this ? Cheers!