Single image viewer feature by dhruvtailor7 · Pull Request #239 · functionland/fx-fotos

dhruvtailor7 · 2022-07-27T14:44:37Z

PR for the following issue.
#145

Browse between images (Allow the user to scroll images horizontally in a single view mode)
Zoom in/out the image
View the image information when pulled up the image
Display action buttons at the end of the screen

Screenrecorder-2022-07-27-11-53-12-599.mp4

license file has been added

Privacy policy

…duct_and_contributing_files code of conduct and contributing guideline files added

Wallet connect integeration

Bumps [moment](https://github.com/moment/moment) from 2.29.3 to 2.29.4. - [Release notes](https://github.com/moment/moment/releases) - [Changelog](https://github.com/moment/moment/blob/develop/CHANGELOG.md) - [Commits](moment/moment@2.29.3...2.29.4) --- updated-dependencies: - dependency-name: moment dependency-type: direct:production ... Signed-off-by: dependabot[bot] <[email protected]>

Bumps [terser](https://github.com/terser/terser) from 4.8.0 to 4.8.1. - [Release notes](https://github.com/terser/terser/releases) - [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md) - [Commits](https://github.com/terser/terser/commits) --- updated-dependencies: - dependency-name: terser dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]>

Bumps [jpeg-js](https://github.com/eugeneware/jpeg-js) from 0.4.3 to 0.4.4. - [Release notes](https://github.com/eugeneware/jpeg-js/releases) - [Commits](jpeg-js/jpeg-js@v0.4.3...v0.4.4) --- updated-dependencies: - dependency-name: jpeg-js dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]>

Bumps [eventsource](https://github.com/EventSource/eventsource) from 1.1.0 to 1.1.2. - [Release notes](https://github.com/EventSource/eventsource/releases) - [Changelog](https://github.com/EventSource/eventsource/blob/master/HISTORY.md) - [Commits](EventSource/eventsource@v1.1.0...v1.1.2) --- updated-dependencies: - dependency-name: eventsource dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]>

…and_yarn/eventsource-1.1.2 Bump eventsource from 1.1.0 to 1.1.2

…and_yarn/moment-2.29.4 Bump moment from 2.29.3 to 2.29.4

…and_yarn/terser-4.8.1 Bump terser from 4.8.0 to 4.8.1

…and_yarn/jpeg-js-0.4.4 Bump jpeg-js from 0.4.3 to 0.4.4

ehsan6sha · 2022-07-27T14:57:03Z

@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)?

dhruvtailor7 · 2022-08-01T10:35:27Z

@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.

ghorbani-m · 2022-08-03T10:39:41Z

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-viewer screen down
We need the transition from the main screen to the image-gallery-viewer screen same as the previous version

20220803-144517-720x1600.mp4

Thanks.

dhruvtailor7 · 2022-08-04T12:52:29Z

@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 · 2022-08-08T05:53:06Z

@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.

dhruvtailor7 · 2022-08-11T08:06:20Z

@ghorbani-m I have pushed the code for transition. Please check.

remove remote-db-service

ghorbani-m · 2022-08-13T16:11:58Z

@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?

20220813-195553-720x1600.mp4

ghorbani-m · 2022-08-14T14:13:01Z

Hi @dhruvtailor7 , I have checked your latest commit, the image transition issue is fixed, but the slider performance is not smoth!

This reverts commit 1bef72e, reversing changes made to 235ef66.

dhruvtailor7 · 2022-08-15T11:43:44Z

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.

dhruvtailor7 · 2022-08-22T06:27:41Z

Hello @ghorbani-m, Have you checked the scroll performance after the optimization?

ghorbani-m · 2022-08-22T13:57:01Z

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.

ghorbani-m · 2022-08-23T13:54:07Z

closed by this PR

Emad Baqeri and others added 28 commits June 20, 2022 16:04

license file has been added

ab71668

Merge pull request functionland#196 from emadbaqeri/feature/license_file

9daab96

license file has been added

Add Privacy Policy

53e56ec

Add terms and conditions

88160cb

Merge branch 'functionland:main' into main

10676f1

Merge pull request functionland#215 from ghorbani-m/main

fe5fba7

Privacy policy

code of conduct and contributing guideline files added

c6d3376

Merge pull request functionland#218 from emadbaqeri/feature/codeofcon…

d3ba97f

…duct_and_contributing_files code of conduct and contributing guideline files added

Merge pull request functionland#230 from ghorbani-m/develop

027160f

Wallet connect integeration

Merge pull request functionland#232 from functionland/dependabot/npm_…

91e21f8

…and_yarn/eventsource-1.1.2 Bump eventsource from 1.1.0 to 1.1.2

Merge pull request functionland#231 from functionland/dependabot/npm_…

2304dfb

…and_yarn/moment-2.29.4 Bump moment from 2.29.3 to 2.29.4

Merge pull request functionland#229 from functionland/dependabot/npm_…

8661705

…and_yarn/terser-4.8.1 Bump terser from 4.8.0 to 4.8.1

Merge pull request functionland#193 from functionland/dependabot/npm_…

4fc430c

…and_yarn/jpeg-js-0.4.4 Bump jpeg-js from 0.4.3 to 0.4.4

created a new screen for viewer.

16704c6

added tap, pinch and pan gesture handler

70c9acf

refactor code

b89d64c

image infomation view added

bbf3781

added goback on zoom out

d99aceb

replace double tap gesture handler and added getItemLayout

c08a258

added zoom at the tapped location when double tapped instead of center

7b0ebbc

refactor code

71588a7

merge commit fix

4f139a6

disable double tap when bottom sheet is opened

9495499

added shared element on image

948f284

dhruvtailor7 changed the title ~~Single image viewer feature for issue #145~~ Single image viewer feature Jul 27, 2022

Daksh Bhardwaj and others added 4 commits August 1, 2022 13:06

added action button to bottom screen

80a983d

added pinch to go back.

4ecff50

remove shared element for the time being

42d3e68

remove console log

4fa1627

dhruvtailor7 added 2 commits August 4, 2022 11:36

swipe down to go back gesture added

e31e1f0

added useCallback

3e1c95e

ehsan6sha mentioned this pull request Aug 7, 2022

FEATURE REQUEST: Browsing single image with action buttons [OPEN TO HUNT] [$1,000] #145

Closed

SharedElements performance issue is fixed

954c8aa

ghorbani-m linked an issue Aug 9, 2022 that may be closed by this pull request

FEATURE REQUEST: Browsing single image with action buttons [OPEN TO HUNT] [$1,000] #145

Closed

smooth transition animation

ad7cd32

dhruvtailor7 and others added 3 commits August 11, 2022 15:35

updating asset it in route params

17d3604

handle shared element transaction after scroll

60d70a9

Merge pull request functionland#240 from ghorbani-m/main

d2341ac

remove remote-db-service

dhruvtailor7 and others added 2 commits August 14, 2022 15:06

replace RV with Flatlist

235ef66

Merge branch 'functionland:main' into single-image-viewer

1bef72e

dhruvtailor7 and others added 3 commits August 15, 2022 16:44

Revert "Merge branch 'functionland:main' into single-image-viewer"

660d1b1

This reverts commit 1bef72e, reversing changes made to 235ef66.

Merge branch 'develop' into single-image-viewer

3a81d28

flatlist optimization

5fa7f78

ghorbani-m closed this Aug 23, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Single image viewer feature#239

Single image viewer feature#239
dhruvtailor7 wants to merge 48 commits intofunctionland:developfrom
dhruvtailor7:single-image-viewer

dhruvtailor7 commented Jul 27, 2022 •

edited

Loading

Uh oh!

ehsan6sha commented Jul 27, 2022

Uh oh!

dhruvtailor7 commented Aug 1, 2022

Uh oh!

ghorbani-m commented Aug 3, 2022

Uh oh!

dhruvtailor7 commented Aug 4, 2022 •

edited

Loading

Uh oh!

ghorbani-m commented Aug 8, 2022

Uh oh!

dhruvtailor7 commented Aug 11, 2022

Uh oh!

ghorbani-m commented Aug 13, 2022 •

edited

Loading

Uh oh!

ghorbani-m commented Aug 14, 2022

Uh oh!

dhruvtailor7 commented Aug 15, 2022

Uh oh!

dhruvtailor7 commented Aug 22, 2022

Uh oh!

ghorbani-m commented Aug 22, 2022 •

edited

Loading

Uh oh!

ghorbani-m commented Aug 23, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

dhruvtailor7 commented Jul 27, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ehsan6sha commented Jul 27, 2022

Uh oh!

dhruvtailor7 commented Aug 1, 2022

Uh oh!

ghorbani-m commented Aug 3, 2022

Uh oh!

dhruvtailor7 commented Aug 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ghorbani-m commented Aug 8, 2022

Uh oh!

dhruvtailor7 commented Aug 11, 2022

Uh oh!

ghorbani-m commented Aug 13, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ghorbani-m commented Aug 14, 2022

Uh oh!

dhruvtailor7 commented Aug 15, 2022

Uh oh!

dhruvtailor7 commented Aug 22, 2022

Uh oh!

ghorbani-m commented Aug 22, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ghorbani-m commented Aug 23, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

dhruvtailor7 commented Jul 27, 2022 •

edited

Loading

dhruvtailor7 commented Aug 4, 2022 •

edited

Loading

ghorbani-m commented Aug 13, 2022 •

edited

Loading

ghorbani-m commented Aug 22, 2022 •

edited

Loading