meliorence / react-native-image-gallery Goto Github PK

Hi,
I tried running the demo code. It works but I get the following warning. Does anyone know what the problem could be?
I am using react-native: 0.53.0

Currently it's hard to use tap and long press events on the images.

I want to use in the same time:

• tap (fast press) to show/hide photo infos
• long press to select the photo

Long press delay is hardcoded to 600ms here: https://github.com/archriss/react-native-image-gallery/blob/master/src/Gallery.js#L133

onSingleTapConfirmed is more suited to ensure that it is a singleTap (vs a double tap) but is slow to fire and has a 500ms delay: https://github.com/ldn0x7dc/react-native-gesture-responder/blob/master/library/createResponder.js#L220

It would be nice to make these 2 delays configurable so that it's easy to detect a single press / long press. The most annoying is to have the delay on single press. Could we have something like onPress, similar to the longpress code, but with a much shorter default delay (like 150) and make both delays configurable?

I need to check if half of the next image is shown.
I tried with something like that:

<Gallery
      style={{flex: 1}}
      images={this.state.images}
      pageMargin={20}
      onPageScroll={(event) => this.scrollEvent(event)}
   />
scrollEvent(event) {
    console.log(event);
    if (event["fraction"] == 0.5) {
      console.log("half page");
    }
}

It didn't work. What can i do?

It doesn't work at all for me. If you set initial page to more than 11 it always displays 12th picture, seems to ignore initial page. How to solve this?

i would like to have an option to show image fit with view width instead of height so users don't have to double tap, fix the zoom and scroll down.
i looked into the codes but there are so much happening and my brain hurts.
if you implement this option i and probably others who needs it will be appreciate it a lot.

I using react-native-image-gallery to view image,( using Demo ios and android work fine), when android it work perfectly, iOS i can NOT see image at all. Did i miss something when setup lib?

This is log of my Xcode.
Loading image at size {1366, 768}, which is larger than the screen size {750, 1334}

Any suggest?

The initialPage option does not work correctly on Android without using getItemLayout (which is true since #47). Since the list does not know the dimensions of the views, it cannot "offset" to page 4 initially. So you end up with that flickering.

I'm posting an issue but am forced to go using 2.1.4 instead of the last one.

I test on my apple cell phone, I can't show the picture. I don't know why, please reply to me as soon as possible.

Can this library provide click handler for go next image? Or is there any way to make this?

It would be great if ActivityIndicator is displayed in case of a bigger image or slower connection. Even if not as a default behaviour, at least it would be great if it could be activated via new prop.

I dont know if this is by design, and there si something additional i should be doing, but whenever i get a image url that doesn't work, for any external reason, i get the following error:

I have omitted (scratch-out) the app name and hostname.

Hello, I've implemented your gallery which works great on Android but doesn't shows up as a black screen on iOS.

The code I'm using:

import React, {Component} from 'react'
import {Platform, View} from 'react-native'
import {Container, Content, Header, Left, Right, Title, Icon, Button, Text} from 'native-base'
import Gallery from 'react-native-image-gallery';

export default class GalleryScreen extends Component {
    static navigationOptions = {
        header: null,
    }
    
    render() {
        const { goBack } = this.props.navigation;
        const { params } = this.props.navigation.state;
        let data = params.images.map(item => {
            return {source: {uri: item}}
        })
        let initialPage = params.initialPage ? params.initialPage : 0
        return (
            <Container>
                <Header
                    style={{backgroundColor: 'transparent', position: 'absolute', top: 0, left:0, right: 0, zIndex: 5}}
                    androidStatusBarColor={'black'}
                    noShadow={true}
                    >
                    <Left>
                        <Button transparent onPress={() => goBack()}>
                            <Icon name="md-close"/>
                        </Button>
                    </Left>
                    <Right>
                        <Button transparent>
                            <Icon android="md-share" ios="ios-share-outline"/>
                        </Button>
                    </Right>
                </Header>
                <View style={{flex: 1}}>
                    <Gallery
                        initialPage={initialPage}
                        style={{ flex: 1, backgroundColor: 'black' }}
                        images={data}
                        />
                </View>
            </Container>
        )
    }
}

The images prop is an array of asset library items. I also tried using remote images but got the same result.

Is there something wrong with my implementation?

How can I achieve a grid display of images?

I have a large list of images, so that i am starting my Gallery images array with the size of 3.
When i slide left the initial image (my init is middle), i am adding new image to end of the array, there is no problem.
this.setState({images: [...this.state.images, newImage]})
But, when i slide right, adding new image to the beginning of array, results in rerendering the current image and selected page became my new image (index 0). Therefore, i cannot slide right again.
this.setState({images: [newImage, ...this.state.images]})

There should be a Loader feature while the image loads. Or how to implement this please help

hi there, firstly many thanks for this component.

How can I layer text in the same way that you display in the example screenshot here ?

Gallery should allow a prop extraData that shouldbe passed to FlatList
FlatList has extraData prop as doucumented here
so that it gets re-render

According to the README, this module requires React Native 0.28+.

But it's wrong. Since it uses FlatList, the module requires at least React Native 0.43.

Any way to support previous versions of React Native?

Would it be possible to add support for onLongPress? I would like to add the possibility to open an action sheet with additional actions for images.

I'm trying to figure out a way to spy on the gesture state to detect velocity and direction to close the gallery when criteria are met. Like when the user swipes down och "throw" a pic away. Any ideas how to do this?

Sometimes the picture did not appear. I looked into the code and discovered that there is an undocumented props: "loader". Passing a view the problem has resolved. I suggest inserting a default loading view and above all to add it to the documentation.

This component of yours is very good. Can you write a reference for the demo? Many places will not use me as a friend from China. Thank you, Mr. Writer

Hi, we released an app with this library on production. Our crash reporting tool is warning us about some crashes on iOS related to this library.

Here are the logs:
Error: transformedRect...invalid transform

Do you guys have an idea? I have trouble reproducing the crash.

The crashes occurred on two devices:

• iPad Mini iOS 9.3.5
• iPad 4th Gen iOS 8.0.2

I'm using version 2.1.3 and images are not displayed when coming from a React Navigation Screen on iOS.

When calling the component containing the Gallery outside of a React Navigation screen, the library works as expected.

React Native: 0.48.4
React Navigation: 1.0.0-beta.19

I want to set the gallery direction to be vertical, then I modify FlatList horizontal={false} of the source code, the screen looks correctly in vertical , but the gestures behavior not response correctly with vertical gallery, for example : In vertical gallery, my gestures should be vertical move direction to make page-change, but it still work in horizontal move direction, how could I get the function that I want or it seems like that I have to modify massive source code to get this function ?

Once I release touch, the image zooming bounces back to original position and size. Any idea what the problem might be?
I tried setting onTransformGestureReleased={() => true} from ldn0x7dc/react-native-transformable-image#13 (comment) but image still bounce back to original position and size.

I'm having an issue with loading 3 relatively large images (1600px on the the larger size). After some debugging it turned out that the images are not loaded correctly in . That's probably related to facebook/react-native#10470

I have added on each picture a delete button to remove pictures.
Deletion is ok but when I have 1 picture left and I move it, I have an issue (evaluating getCurrentImageTransformer)

Version

[email protected]

###dev Os: MAcOsX

Target Platforms

iOS | Android

Target OS version

iOS 10| android 5.1.1 or major...

React info:

react-native version: 0.49.3
react version: 16.0.0-beta.5
react-native-cli: 2.0.1
node version: 7.8.0
npm version: 5.5.1

To install I tried 2 way.

This the passes of the first

1. sudo npm install --save react-native-gallery-image

and this the second way:

1. sudo npm install npm@latest -g
2. sudo npm install --save react-native-gallery-image
3. sudo react-native link react-native-image-gallery

I don't have warning about gallery...

Expected behavior

install must go fine and use it in react project

Actual behavior

when I compile on my nexus 4 (Android 5.1.1) it throw exception:
_react3.default.PropTypes.bool as screencapture

Have you any solutions?

Thank you for all anyway

If I use this as a drop-in replacement for ldn0x7dc's lib (the only thing I'm changing is adding the { source: { uri } } structure of the data source, everything seems to work, but double tap to zoom stops working.

when I set the initialPage,it will go wrong that show scrollToIndex out of range : undefined vs -1

Ok, this might be a little question. Is there a reason why it could only render 10 images from an array or 24? And if this was intended, how do I render the rest of the array?

Where to display ActivityIndicator before the image has been loaded? Any prop or method to do this?

Used to use the initialPage prop in 1.x. I am sorry to see that it is not implemented in v2.

Is it possible to get hold of the current zoom level via an event? I'd like to know when the user tries to zoom in more than 100% so I can ask if the user wants to download the full res image from the server.

Hello!

Just testing this gallery with the example I get a black scene. I see some console.logs in debugger:

animate...equal rect, skip animation
performDoubleTapUp...pivot=197, 344.5

My code:

export default class ProposalImageGallery extends React.Component {
    static propTypes = {
    }
    static defaultProps = {
    }
    render() {
        return (
            <Gallery
                style={{flex: 1, backgroundColor: 'black'}}
                images={[
                    { source: { uri: 'http://p10.qhimg.com/t019e9cf51692f735be.jpg' } },
                    { source: { uri: 'http://ww2.sinaimg.cn/mw690/714a59a7tw1dxqkkg0cwlj.jpg' } },
                    { source: { uri: 'http://www.bz55.com/uploads/allimg/150122/139-150122145421.jpg' } },
                ]}
            />
        )
    }
}

We are using RN 0.45

Any advice @Exilz ?
Thanks for your time!

Hello! I'm just trying to use FastImage as image component by doing the following:

<Gallery 
	imageComponent={FastImage}
	images={this.state.images} 
	style={{ flex: 1 }} 
/>

Problem is, I always get a blank screen, no errors, nothing. Also tried with CachedImage, same result. Even though, I'm using the component directly, somewhere else, and works just fine, so it's not related to the modules themselves.

Any advice ?

I wonder if this module support dynamic images?
For eg, Flatlist, where support load more and refresh as well as appending urls to component.

There is

I have been struggling to display the selected image from the list of images on my app.
"this.state.currentPhotoIndex" is the index of the selected image and my render function is following :

            <Gallery
              images={this.state.allPhotos}
              initialPage={this.state.currentPhotoIndex}
              onPageSelected={(index) => this.onPageChange(index)}
            />

The problem is that inside nodemodules -> libraries -> viewPager, when I console log the following part,

componentDidUpdate (prevProps) {
if (!this.initialPageSettled) {
this.initialPageSettled = true;
console.log("THIS IS FROM DEEP INSIDE THE MODEL : ", this.props.initialPage);*
this.scrollToPage(this.props.initialPage, true);
} else if (this.layoutChanged) {
this.layoutChanged = false;
if (typeof this.currentPage === 'number') {
this.scrollToPage(this.currentPage, true);
}
} else if (this.currentPage + 1 >= this.props.images.length &&
this.props.images.length !== prevProps.images.length) {
this.scrollToPage(this.props.images.length, true);
}
}

it always shows "THIS IS FROM DEEP INSIDE THE MODEL : 0".

I am not quite sure this is because i am using redux and have been spending too much time on this. It would be helpful if there is someone who has finished struggling with this issue.

When having multiple images (more than 3) the scrolling to the correct position in the list after rotating the screen is not working correctly on android.
When i swipe to image with index 3, and then rotate the device from portrait to landscape, the scrolling to the postion of image with index 3 is not working, it ends up showing part of image on index 1 and part of image on index 2.

I created a PR where this will be fixed: #67

I guess that you left the scroller lib out on purpose when you copied the other components from the original repo as there will probably not be any need for new features or bug fixes.

@ldn0x7dc hasn't been heard from in a very long time. What will happen if his repos are removed? Would it be safer to have a bundled copy in this lib? I just forked scroller myself, just in case. I also noticed that there where only one other fork.

Firstly, thanks for creating your own repo and pushing @ldn0x7dc's work! 👏

Could it be possible to render an image dynamically (from the background) once the Gallery is in the foreground?

Example: there's an overlay with a slider that mirrors the number of pages from the gallery. When the slider is dragged, call a function to render such page # in the Gallery.

This could be something in the lines of: this.refs['gallery'].setPage(pageNumber)

when the component has been created <Gallery ref="gallery" ...

Thank you so much for taking care of this awesome seemingly abandoned library!

ldn0x7dc did an awesome work with his original library. I hope he is well and just abandoned his work due to priorities.

There is a minor link bug in the doc: The link to ldn0x7dc/react-native-gallery actually points to ldn0x7dc/react-native-image-gallery which does not exist.

Just wanted to say this repo is AWESOME!

I experienced some issues rendering approximately 10 of these 4K images from https://imgur.com/gallery/8Yxub. For example I would swipe back and forth and images would disappear then re-appear, some pages was completely blank, some pages would say image cannot be loaded.

Could be a memory issue rather than a dimension issue?

Currently I don't need to render 4K images so that's good!

Many Thanks

Im having a problem creating a X button on the top left corner. Anytime I place a Button before the Gallery, the button appears but not the gallery. How did you guys do it for your demo on github?

Hi,
On RTL mode, only the first image is shown, swiping left shows empty pages.
This happens due to wrong flexDirection (of ScrollView).
The normal solution would be something like:
flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row'

I know it will require a change in react-native-view-pager as well (no github repo?) , but can you please work something out? it is really critical for us.
Thanks!

Hi, I am new to react-native and wondering how to make the image to stay zoomed in when gesture release. Like in the showcase app I want to zoom in and see the zoomed image after i remove finger instead of it resetting to the initial state

What is default image preloading behavior? How many images will be loaded by default?

Getting red screen when I use this component.

import Gallery from 'react-native-image-gallery';
render() {
    return (
      <Gallery
        style={{ flex: 1, backgroundColor: 'black' }}
        images={[
          { source: require('yourApp/image.png'), dimensions: { width: 150, height: 150 } },
          { source: { uri: 'http://i.imgur.com/XP2BE7q.jpg' } },
          { source: { uri: 'http://i.imgur.com/5nltiUd.jpg' } },
          { source: { uri: 'http://i.imgur.com/6vOahbP.jpg' } },
          { source: { uri: 'http://i.imgur.com/kj5VXtG.jpg' } }
        ]}
      />
    );
  }