fx-fotos
fx-fotos copied to clipboard
functionland
Single image viewer feature
PR for the following issue. https://github.com/functionland/fotos/issues/145
- [x] Browse between images (Allow the user to scroll images horizontally in a single view mode)
- [x] Zoom in/out the image
- [x] View the image information when pulled up the image
- [x] Display action buttons at the end of the screen
https://user-images.githubusercontent.com/32268377/181275251-0eb55206-a4d2-4593-b45a-633cf97010aa.mp4
@dhruvtailor7 can we somehow do a pre-load of next image to eliminate the brief black screen when scrolling fast to the next one (without loss of performance)?
Hi @dhruvtailor7, good job. have you worked on the iOS platform too? I see that It's not working on iOS simulator at all
Sure, will try it.
As @ehsan6sha had mentioned, we should cache the images that we want to load, there is a bit of flicker and black screen while we are moving to between images
@dhruvtailor7 another issue is, the header buttons for the Single Image View screen are missing while I'm running on my machine. Could please check that to make sure that we have the buttons back?
Hi @dhruvtailor7, good job. have you worked on the iOS platform too? I see that It's not working on iOS simulator at all
Yes. I am working on this. It will be resolved in the next commit.
@emadbaqeri @ehsan6sha What action button do I have to add at the bottom of the screen? Also, I have fixed the black screen, header issue and it is working on iOS now.
@emadbaqeri @ehsan6sha What action button do I have to add at the bottom of the screen? Also, I have fixed the black screen, header issue and it is working on iOS now.
@dhruvtailor7 You're amazing. Can you please add a Delete, Print, Upload, Add to Album, Move, Open With, and Help button to the bottom? Just the buttons and a simple alert action on Press that says "Action X is being developed"
Great job @dhruvtailor7, there are some issues. Can you please fix the placement of action buttons in the header in iOS build? Also we have a panGesture handler for going back by a smooth animation, that would be great if you add them back to the screen. The other thing is that we should also have the smooth animation while we are pressing back button in the screen.
Hi @dhruvtailor7 , Thanks for contributing, I had a test on a real device that has around 3700 assets. It seems there are some performance issues to display the image-gallery-viewer screen.
- Transition from the main screen to image-gallery-viewer screen does not work
- It takes time to initiate the screen
I took a video in debug mode intentionally so that we can see the issue, please note the time between tapping an image and viewing it on the new screen
https://user-images.githubusercontent.com/16715868/182032387-0df9a3d1-df82-49c6-9b19-ef89e3f12a29.mp4
@emadbaqeri @ehsan6sha @ghorbani-m I have added the following
- action button at the bottom of the screen
- panResponder to go back
The performance issue is because of the shared element transition so I have removed it.
Hi @dhruvtailor7, Thanks for the updates, I've had a test on updates and the issues are:
- There is a tangible delay to display the image after opening the screen
- We expect to back to the main screen when pulling the
image-gallery-viewerscreen down - We need the transition from the main screen to the
image-gallery-viewerscreen same as the previous version
https://user-images.githubusercontent.com/16715868/182586614-b07f7feb-2e51-40d1-9605-0095dde92a8c.mp4
Thanks.
@ghorbani-m I have added the code for swipe down to go back to the main screen. If we use the shared element transition, it is causing a delay in the opening of the image-gallery-view screen. What do you suggest can be done here?
@ghorbani-m I have added the code for swipe down to go back to the main screen. If we use the shared element transition, it is causing a delay in the opening of the image-gallery-view screen. What do you suggest can be done here?
Hi @dhruvtailor7 , I had a look at the code and solved the performance issue, the reason was passing a large data to the image-gallery-viewer screen through navigation params.
I have committed the fixes to my repo, please have a look at them and merge if they are okay.
Now, You just need to tune the SharedElement component to have a smooth transition when the user taps on an image.
@ghorbani-m I have pushed the code for transition. Please check.
Thanks @dhruvtailor7 , I've checked it out, and it seems the image transition issue is improved, but I think the solution is not the best solution (setting delay in transitionSpec config), it causes an issue (gray box before transition) on transition, please have a look to below video
I believe FlatList is more compatible with the SharedElement library, I had a simple test and replaced RCL with FlatList (imported from react-native) and removed delay config in transitionSpec and the below issue was fixed! Could you please have a test with FlatList instead of RCL?
https://user-images.githubusercontent.com/16715868/184500974-39ac5b32-3e96-4ae2-b8d9-7a9aaa5dae28.mp4
Hi @dhruvtailor7 , I have checked your latest commit, the image transition issue is fixed, but the slider performance is not smoth!
Hello @ghorbani-m, I have added a few more optimization parameters to the flatlist. I think this is the best we can achieve with Flatlist.
Hello @ghorbani-m, Have you checked the scroll performance after the optimization?
Hello @ghorbani-m, Have you checked the scroll performance after the optimization?
Hello @dhruvtailor7 , Yes, I have, the scroll performance is better than previous version, but some time we have black screen while scroll images fast! (because of delay on rendering images at flatlist)
Anyway , I worked on your old code that was based on RCL, and found out what is the performance issue on transition, so I used a trick to solve the issue. please have a look at this baranch.