ansh-099 / react-native-grid-image-viewer

A grid display for multiple images which you can view on clicking in fullscreen mode and swipe through.

👋 Hey there!! Github Profile !

I'm Anshul Singh and welcome to my brief intro...

• 👨‍💻 I'm an undergraduate majoring in Computer Engineering From NSIT, Delhi
• 📱 A Native Mobile App Developer
• ⚡ Deep Learning
• 🌐 Want to know me more? Checkout my products ICOS Rentals | ConnectMany | Foodpilu | Dr Kanwar Deep

Visitor Count

react-native-grid-image-viewer's Issues

How ca we add Headers?

Hello, This package is great! But is there any way to pass headers when accessing an image? I have a protected endpoint to avoid unauthorized users accessing images.

Repo still active to review PR ?

Hey @ansh-099, (the discussion tab is not active, so I'm opening a issue)
It seems the repo hasn't moved much in the last year.

I need to change some features/functions of this component to make it more configurable (without breaking everything),
If I make a PR, will it be reviewed or not?

Thank you.

ReferenceError: Property 'Alert' doesn't exist

When I use the phone back button instead of using the X button to close the modal an error occurred.

ReferenceError: Property 'Alert' doesn't exist

Images inside the scrollview not rendering

Upon tapping the item in the list , modal to show enlarged image opens but only renders one of the given images not all. It is totally random it sometimes renders first image or sometimes render last image, rest aren't rendered properly or not at all.

Loading local images

Hi! I'm building an image gallery with Expo and found your package to be extremely helpful. One thing I realized was that loading locally-available images was kinda tricky, given that the package loads images with source={{ uri: item.image }}. I thought about making a PR with the proposed solution for this.

I tried forking and testing a change locally but I keep getting errors with the npm installation (expo cant find the package). I tried installing it locally by cloning and doing npm install --save ../react-native-grid-image-viewer. I also tried using npm link but same result.

Given this, I have two questions:

• How do you test your changes locally? Should I use npm install --save ../react-native-grid-image-viewer, npm install --save ../react-native-grid-image-viewer/react-native-grid-image-viewer or something else?
• Should I modify this file https://github.com/ansh-099/react-native-grid-image-viewer/blob/master/components/GridImageViewer.js or this file https://github.com/ansh-099/react-native-grid-image-viewer/blob/master/react-native-grid-image-viewer/components/GridImageViewer.js ? I can't understand the difference between each other.

In essence, the change would be adding the parameter localImage to the data field, so the new interface would allow for something like this:

...
  <GridImageView data={[{ image: 'https://imgur.com/asdasd' }, { localImage: './assets/myfile.png' }]} />
...

In the meantime I will be using this workaround to grab the image URI, but well, it would be cool to help you out and offer a new interface 😀

Support for caption

Is there any way to add a caption to the images

Render No Content Text/Placeholder if Array is Empty

Is there a way to render an empty text or image showed when Array is empty? Something like, "No images to show" or ListEmptyComponer FlatList props.

How to restrict users from accessing Image

Hi there,
I found this package very useful almost in my every project to save a lot of time. But how to restrict users from accessing images?

Thanks

infinity scroll

how can i implement infinity scroll on this library ?

Thank you

How can I customize the rendering of image items ?

I'm currently using the 'react-native-grid-image-viewer' in my React Native project, and it's working great. However, I would like to customize the way image items are rendered within the grid. I want to add some additional styling, such as border radius.

Remove '.image' from remaining Image source uri values

Thank you for addressing my last request! That approach definitely helps my use case and it's simpler than the change I made in my previous PR.

But I am noticing that the remaining Images inside /components/GridImageViewer.js still need to be updated. The images aren't rendering bc of this. Removing the .image at lines 132, 156, and 180 fixes this, since data now represents an array of urls already.

Thanks again!

Problems to open image full screen mode.

Im trying to use this code to load my pictures in the grid:

useEffect(() => {
    const currentDiary = diaryData[diaryIndex];
    const reformPictures = [];
    if (currentDiary.pictures && currentDiary.pictures.length > 0) {
      currentDiary.pictures.forEach(pic => {
        reformPictures.push({
          name: `http://localhost:3000/${pic.name}`,
          type: pic.type,
        });
      });
      setPictures(reformPictures);
    }
  }, [diaryData, diaryIndex]);


 const renderPicture = item => {
    return (
      <ProfileView>
        <ProfileImage
          width={windowWidth}
          height={windowHeight}
          source={{uri: item.name}}
        />
      </ProfileView>
    );
  };

// render page
 <Container>
        <GridImageView
          data={pictures}
          renderGridImage={item => {
            return renderPicture(item);
          }}
        />
 </Container>

Pictures are load succesfully on the grid. But when i click over to open full screen viewer, the image dosent load.

How can I add dynamic array inside the data prop?

Hey, the grid image viewer is really awesome, great work, I could not find anything on stack overflow therefore I opened a issue here. I just wanted to know if there is a way I can do this:

data={mappedArrayOfImageUris}

instead of:

data={[{ image: 'url' }, { image: 'url' }, { image: 'url' }, { image: 'url' }]}