fidme / react-native-photo-gallery Goto Github PK

View Code? Open in Web Editor NEW

119.0 119.0 29.0 5.4 MB

Simple, yet powerful image gallery for React Native. Features zoom and pagination ! 🖼

License: MIT License

JavaScript 100.00%

android gallery ios photos react-native

react-native-photo-gallery's People

Contributors

Stargazers

Watchers

react-native-photo-gallery's Issues

Failed to build in android RN 0.47.2

android/src/main/java/com/reactnative/photoview/PhotoViewPackage.java:18: error: method does not override or implement a method from a supertype
@OverRide
^
Note: node_modules/react-native-photo-view/android/src/main/java/com/reactnative/photoview/ResourceDrawableIdHelper.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
1 error
:react-native-photo-view:compileReleaseJavaWithJavac FAILED

react-native-cli: 2.0.1
react-native: 0.47.2

alwx/react-native-photo-view#80

Thumbnails Don't Render

Facing an issue with this plugin. I have a Gallery that is loading a dynamic array of images, anywhere from 8 to 30. Now, I've added logic to disable scrolling on the <FlatList component, and instead want to rely on scrolling/clicking the thumbnails from <Pagination to navigate. However, on occasion, the thumbnails don't render (the black ribbon does, but not the individual thumbnails):

The only way I can reliably get the thumbnails to render is by scrolling the component, which, since it is invisible, is not obvious UX:

Note: I've added an <ActivityIndicator to each <SwiperThumb, so I can tell if they are loading, so it's not an issue with the individual thumbnails not rendering:

Aside from the modifications to disable scrolling and the add an activity indicator on loading thumbnails, I haven't changed this plugin.

Any ideas what could be causing this?

Slowness on 100+ images.

Hi,

I tried with 100+ images. When click on the thumb it is taking time to load that slide. Also the image in the slide cutting from left and right end.

how can i customize this according to my use ?

Add custom components to each image slide

Hi Michael,

first of all thank you for this awesome library. Really slick, good looking solution!
I was wondering if there is a way to add some custom views to each slide. In my case I wanna show some tags, related to the image. Any idea how I could achieve this?

Best wishes, Sven.

Support remote images

E.g.:

<Gallery
    data={[
      {
          id: 0,
          image: 'http://lorempixel.com/300/170/animals/',
      },
    ]}
/>

Warning on clicking on the carousel

I'm receiving this warning when I touch any picture on the carousel:

iOS: Invariant Violation on 5+ remote images

Whenever I have more than 4 images I get the following error:

Invariant Violation: [9017,"RCTView",191,{"width":"<>"}] is not usable as a native method argument

This is all the code I have, change the length to render more/fewer images:

import React, { Component } from 'react'
import { View } from 'react-native'
import PhotoGallery from 'react-native-photo-gallery';

const length = 4;

export default class Gallery extends Component {
  static defaultProps = {
    data: Array.from(
      { length },
      (v, i) => ({
        id: `image_${i}`,
        image: { uri: `https://dummyimage.com/1500x1500/0ff/ff0.png&text=Image+${i}` },
        thumb: { uri: `https://dummyimage.com/150x150/0ff/ff0.png&text=Image+${i}` },
        // overlay: <Overlay />
      })
    )
  }

  render () {
    return (
      <View style={{ flex: 1 }}>
        <PhotoGallery data={this.props.data} />
      </View>
    )
  }
}

Load dynamic images

Is there a way to load dynamic images? require() needs static images from the assets. In my case I do have an array of file paths pointing to images that just got created by react-native-camera. Any way to do it with uri: ... f.e.?

Regards!

Add rtl support for gestures and carousel

A property that can have direction default left if not chosen, or can be right in order to make the carousel align to right and the gestures to be reversed

Header bar covered by photo

I'm using NativeBase. The view is something like

<Container>
  <Header>
    <Left>
        <Button transparent>
          <Icon name='arrow-back' />
        </Button>
      </Left>
      <Body>
        <Title>Header</Title>
      </Body>
    <Right />
  </Header>
  // <Content>
      <Gallery backgroundColor="transparent" data={data} />
  // </Content>
</Container>

If put in block, the header is shown, but the gallery paginator is pushed to below the bottom of view.