Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

can i swipe few images as gallery? #55

Open
roysG opened this issue Sep 20, 2016 · 7 comments
Open

can i swipe few images as gallery? #55

roysG opened this issue Sep 20, 2016 · 7 comments

Comments

@roysG
Copy link

roysG commented Sep 20, 2016

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
Copy link

prashen commented Oct 2, 2016

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

@waleedarshad-vf
Copy link

@anyone find any solutions?

@prashen
Copy link

prashen commented Oct 15, 2016

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
Copy link

anhreg commented May 16, 2017

@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
Copy link

kashav commented Jul 29, 2017

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

@hoscarcito
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants