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

[ghorbani-m]

OPEN TO HUNTERS

Action Performed:

1. Tap on an image to navigate to the single image view screen

Expected Result:

When the user navigated to the single image view screen, he/she has to be able to :

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

https://user-images.githubusercontent.com/16715868/162618847-7a14c950-5da1-4aa4-9575-9014393f25e9.mp4

Actual Result:

Till now We have created a single-image view screen to open the selected image with a transition on it. We have used react-native-shared-element and react-navigation packages to manage image transitions between screens.

https://user-images.githubusercontent.com/16715868/162619712-03192fd0-5c0a-4850-9ae8-863b69331956.mp4

Workaround:

Platform:

Where is this issue occurring?

• iOS
• Android

--- Did you fix this issue? Go claim the **[$1,000 bounty](https://app.bountysource.com/issues/106966971-feature-request-browsing-single-image-with-action-buttons-open-to-hunt?utm_campaign=plugin&utm_content=tracker%2F206746002&utm_medium=issues&utm_source=github)** on [Bountysource](https://app.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F206746002&utm_medium=issues&utm_source=github).

[caryoscelus]

is someone working on this? i'd be interested to implement this, but i don't want to waste efforts competing ;)

[ghorbani-m]

Hi @caryoscelus , Thanks for your attention, Yes, someone is working on this issue.

[richard-fairthorne]

For anyone following, I've got the panel view working on IOS and Android, with a minor bug on IOS which I will address later.

I am now working on incorporating the panel and outputting real information similar to that in another similar application.

[ehsan6sha]

@caryoscelus the person working on the issue did not deliver. If you want to start working on it please let me know

[ehsan6sha]

This issue is open for bounty hunters

[caryoscelus]

@ehsan6sha i'm a little busy with other projects right now , i'll asses my resources and get back to you

[priyeshshah11]

@ehsan6sha Can I pick this up?

[ehsan6sha]

@ehsan6sha Can I pick this up?

Hi, Sure. Can you please provide frequent updates

[priyeshshah11]

@ehsan6sha Can I pick this up?

Hi, Sure. Can you please provide frequent updates

Sure, will do. Getting started! :)

[vibhuti019]

Can I pick this one ?

[endurance21]

Would like to work on this issue ! If the admin is okay with this ?

[ehsan6sha]

hi @priyeshshah11 please update us if you have started work on this issue?

[ehsan6sha]

@endurance21 and @vibhuti019 I believe the way bountyhunt works is it allows multiple people work on the isue and provides the bounty to the accepted PR. Our criteria is performance and functionality.

[seanwestfall]

I could possibly work on this bounty too.

[priyeshshah11]

hi @priyeshshah11 please update us if you have started work on this issue?

Hi @ehsan6sha Yes I tried, but had several setup issues on a Mac M1 Pro and have other priority stuff going on, so others can pick it up/start work.

[ehsan6sha]

@seanwestfall sure. as long as it is open, anyone can start the work

[ehsan6sha]

@seanwestfall @vibhuti019 @endurance21 anyone who started working on it, might be a good idea to share the progress frequently

[vibhuti019]

I have created a view for single image view, working on the scroll action @ehsan6sha

[ehsan6sha]

@vibhuti019 any progress?

[vibhuti019]

I am working on it sir @ehsan6sha

[vibhuti019]

I testable working PR will be ready within 2-3 days.

[vibhuti019]

@ehsan6sha my iPhone is having problem can someone verify the app on iOS?

[ghorbani-m]

Hi @vibhuti019 , For now just Android platform is ready for build.

[seanwestfall]

I can confirm, when trying to build fotos in xcode I get this error:

unable to open file (in target "fotos" in project "fotos") Pods-fotos.debug.xcconfig

[vibhuti019]

@seanwestfall are you trying to use expo cli? There is some issue in code due to which expo is unable to fetch assets. We can raise a issue for this and then expo can compile the code for iOS.

[vibhuti019]

@ghorbani-m @ehsan6sha can anyone give any idea for scroll-up function which shows the details of the pic. I have tried some things but it is causing errors.

[ghorbani-m]

@ghorbani-m @ehsan6sha can anyone give any idea for scroll-up function which shows the details of the pic. I have tried some things but it is causing errors.

@vibhuti019 have you got a build successfully on the develop branch? There is a screen called "Photo" here that displays a single image. and here is where we navigate to Photoscreen

However, you have to create another screen, especially for the single image browsing feature.

[vibhuti019]

@ghorbani-m @ehsan6sha can anyone give any idea for scroll-up function which shows the details of the pic. I have tried some things but it is causing errors.

@vibhuti019 have you got a build successfully on the develop branch? There is a screen called "Photo" here that displays a single image. and here is where we navigate to Photoscreen

However, you have to create another screen, especially for the single image browsing feature.

@ghorbani-m Exactly I have done the same I have created another screen for browsing image feature buy I am unable to use the scroll up feature which will show the details of thr image. The last part is causing issues and also let me know what details I will have to show.

[ghorbani-m]

@vibhuti019 You need to implement this feature by react-native-reanimated and react-native-gesture-handler, For now, you can just display the image path, create date, and modified the date.

Sorry, I don't get the scroll-up issue, you mean, you can not implement this part of feature?

[vibhuti019]

No, I am working on it. While using the gesture handler it wasn't working on apple devices. And was causing constant errors. I will try with the second one today.

[seanwestfall]

@vibhuti019 These are the errors I see when trying to install the pods for ios, and then this is what I see when trying to run ios with yarn:

admin@DXU760 ios % pod install
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/universal-darwin21/rbconfig.rb:230: warning: Insecure world writable dir /Users/admin in PATH, mode 040757
Using Expo modules
Auto-linking React Native modules for target `fotos`: RNBackgroundFetch, RNCAsyncStorage, RNCMaskedView, RNFastImage, RNGestureHandler, RNKeychain, RNReanimated, RNScreens, RNSharedElement, RNVectorIcons, RealmJS, lottie-ios, lottie-react-native, react-native-background-actions, react-native-fula, react-native-netinfo, and react-native-safe-area-context
Analyzing dependencies
Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`
Fetching podspec for `RCT-Folly` from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`
Fetching podspec for `boost` from `../node_modules/react-native/third-party-podspecs/boost.podspec`
Fetching podspec for `glog` from `../node_modules/react-native/third-party-podspecs/glog.podspec`
Downloading dependencies
Installing CocoaAsyncSocket (7.6.5)
Installing DoubleConversion (1.1.6)
Installing EXApplication (4.0.2)
Installing EXConstants (13.0.2)
Installing EXErrorRecovery (3.0.5)
Installing EXFileSystem (13.1.4)
Installing EXFont (10.0.5)
Installing EXImageLoader (3.1.1)
Installing EXImageManipulator (10.2.1)
Installing EXKeepAwake (10.0.2)
Installing EXLinearGradient (10.0.3)
Installing EXLocalization (11.0.0)
Installing EXMediaLibrary (14.0.1)
Installing Expo (44.0.6)
Installing ExpoModulesCore (0.6.5)
Installing FBLazyVector (0.66.3)
Installing FBReactNativeSpec (0.66.3)
Installing Flipper (0.99.0)
Installing Flipper-Boost-iOSX (1.76.0.1.11)
Installing Flipper-DoubleConversion (3.1.7)
Installing Flipper-Fmt (7.1.7)
Installing Flipper-Folly (2.6.7)
Installing Flipper-Glog (0.3.6)
Installing Flipper-PeerTalk (0.0.4)
Installing Flipper-RSocket (1.4.3)
Installing FlipperKit (0.99.0)
Installing OpenSSL-Universal (1.1.180)
Installing RCT-Folly (2021.06.28.00-v2)
Installing RCTRequired (0.66.3)
Installing RCTTypeSafety (0.66.3)
Installing RNBackgroundFetch (4.1.0)
Installing RNCAsyncStorage (1.17.3)
Installing RNCMaskedView (0.1.10)
Installing RNFastImage (8.5.11)
Installing RNGestureHandler (2.4.1)
Installing RNKeychain (6.2.0)
Installing RNReanimated (2.8.0)
Installing RNScreens (3.13.1)
Installing RNSharedElement (0.8.4)
Installing RNVectorIcons (9.1.0)
Installing React (0.66.3)
Installing React-Core (0.66.3)
Installing React-CoreModules (0.66.3)
Installing React-RCTActionSheet (0.66.3)
Installing React-RCTAnimation (0.66.3)
Installing React-RCTBlob (0.66.3)
Installing React-RCTImage (0.66.3)
Installing React-RCTLinking (0.66.3)
Installing React-RCTNetwork (0.66.3)
Installing React-RCTSettings (0.66.3)
Installing React-RCTText (0.66.3)
Installing React-RCTVibration (0.66.3)
Installing React-callinvoker (0.66.3)
Installing React-cxxreact (0.66.3)
Installing React-jsi (0.66.3)
Installing React-jsiexecutor (0.66.3)
Installing React-jsinspector (0.66.3)
Installing React-logger (0.66.3)
Installing React-perflogger (0.66.3)
Installing React-runtimeexecutor (0.66.3)
Installing ReactCommon (0.66.3)
Installing RealmJS (10.20.0-alpha.2)
Installing SDWebImage (5.11.1)

[!] Error installing SDWebImage
[!] /usr/bin/git clone https://github.com/SDWebImage/SDWebImage.git /var/folders/lh/l0n6c00s5rg31ysmn9sc87c80000gn/T/d20220702-29700-t0tdwa --template= --single-branch --depth 1 --branch 5.11.1

Cloning into '/var/folders/lh/l0n6c00s5rg31ysmn9sc87c80000gn/T/d20220702-29700-t0tdwa'...
fatal: unable to access 'https://github.com/SDWebImage/SDWebImage.git/': Failed to connect to github.com port 443: No route to host

admin@DXU760 ios % cd ..

admin@DXU760 fotos % yarn run ios
yarn run v1.22.19
$ react-native run-ios
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually: 
  - react-native-shared-element (to unlink run: "react-native unlink react-native-shared-element")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
error Could not find the following native modules: react-native-netinfo, lottie-ios, lottie-react-native, react-native-background-actions, RNBackgroundFetch, RNFastImage, react-native-fula, RNReanimated, RNSharedElement, RNVectorIcons, RealmJS. Did you forget to run "pod install" ?
info Found Xcode workspace "fotos.xcworkspace"
info Building (using "xcodebuild -workspace fotos.xcworkspace -configuration Debug -scheme fotos -destination id=1392BE91-1E46-4EAB-8F24-58306D21894E")
error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening fotos.xcworkspace.
Command line invocation:
    /Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -workspace fotos.xcworkspace -configuration Debug -scheme fotos -destination id=1392BE91-1E46-4EAB-8F24-58306D21894E

User defaults from command line:
    IDEPackageSupportUseBuiltinSCM = YES

note: Using new build system
note: Planning
Analyze workspace

Create build description
Build description signature: b448d2ffbd8d2c6a13c39acdde41c1f0
Build description path: /Users/admin/Library/Developer/Xcode/DerivedData/fotos-gambjaqyvlxlmpcozkedfvrhkjpr/Build/Intermediates.noindex/XCBuildData/b448d2ffbd8d2c6a13c39acdde41c1f0-desc.xcbuild

note: Build preparation complete
note: Building targets in dependency order
/Users/admin/Development/fotos/ios/Pods/Target Support Files/Pods-fotos/Pods-fotos.debug.xcconfig:1:1: error: unable to open file (in target "fotos" in project "fotos")
/Users/admin/Development/fotos/ios/Pods/Target Support Files/Pods-fotos/Pods-fotos.debug.xcconfig:1:1: error: unable to open file (in target "fotos" in project "fotos")
/Users/admin/Development/fotos/ios/Pods/Target Support Files/Pods-fotos/Pods-fotos.debug.xcconfig:1:1: error: unable to open file (in target "fotos" in project "fotos")
/Users/admin/Development/fotos/ios/Pods/Target Support Files/Pods-fotos/Pods-fotos.debug.xcconfig:1:1: error: unable to open file (in target "fotos" in project "fotos")

** BUILD FAILED **

info Run CLI with --verbose flag for more details.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

So for ios there are issues with some of the cocoa pod dependencies it would appear.

[vibhuti019]

@seanwestfall Please try with Xcode. There is some issue with the iOS side of the application.
Currently, I am focusing on the Android part.

[ehsan6sha]

hi @vibhuti019 and @seanwestfall thanks for the effort and collaboration. any merge-able commits so far?

[ehsan6sha]

@seanwestfall Please try with Xcode. There is some issue with the iOS side of the application. Currently, I am focusing on the Android part.

hi, any progress on this?

[seanwestfall]

@ehsan6sha Haven't fixed the issue with the ios application not building -- yet. I'm trying to implement the single view and zoom function with an Android emulator.

I'm having trouble figuring out how to engage the zoom button on an emulator, this requirement: "Zoom in/out the image"

But I have been testing things with an andriod emulator, that's how I've been trying to get this figured out:

[vibhuti019]

@ehsan6sha That part is easy I was having issue in swipeup gesture.

[emadbaqeri]

Hi @vibhuti019, you should be using gesture handlers and reanimated for swipe up gestures and something line that

[i-mighty]

Hi, is there any reason why existing photo viewing libraries are not being considered? My solution would involve using one...

[ghorbani-m]

@i-mighty, We need some customization on this screen and also we have to consider some performance aspects, however, you can propose your proposal.

[prmichaelsen]

this is a large task. perhaps breaking it into smaller tasks would increase the likelihood of completion? that way you don't have as many abandoned takers

[vibhuti019]

@ehsan6sha Should I need to work for PR or the issue is now completed?

[ehsan6sha]

Here is the pr with the feature. Small issues that are being worked on https://github.com/functionland/fotos/pull/239

[d0rtz]

Is this issue closed?

[ghorbani-m]

Is this issue closed?

Hi @d0rtz , Yes, this issue is done and closed.