Unable to show the SliderViewController

[sverdlov]

Describe the bug On iOS get this error

To Native ->  PhotoViewer show 5814777
ERROR MESSAGE:  {"errorMessage":"Show : Unable to show the SliderViewController","message":"Show : Unable to show the SliderViewController"}
⚡️  [error] - {"errorMessage":"Show : Unable to show the SliderViewController","message":"Show : Unable to show the SliderViewController"}
⚡️  [error] - Error: Uncaught (in promise): Error: Show : Unable to show the SliderViewController
i@capacitor://localhost/main-es2015.047b35b4b83c578f367b.js:1:161690
@user-script:2:406:49

Plugin version 1.1.1

Smartphone (please complete the following information):

• Device: iPhone 13 Pro Max Simulator
• OS: iOS 15.2

[jepiqueau]

@sverdlov can you share the package.json and the code where you call the photoviewer in slider mode

[jepiqueau]

@sverdlov if you do do answer i cannot help so i will close this issue if i do not get any of what i have been asking

[FabianTauriello]

Any way we can reopen this?

I'm getting the same issue on an iPad Pro (9.7-inch) simulator. Here is my package.json file:

{ "name": "church-times", "version": "0.0.1", "private": true, "dependencies": { "@awesome-cordova-plugins/file-transfer": "^5.39.0", "@awesome-cordova-plugins/ionic-webview": "^5.39.1", "@awesome-cordova-plugins/photo-viewer": "^5.39.1", "@awesome-cordova-plugins/social-sharing": "^5.39.1", "@awesome-cordova-plugins/status-bar": "^5.39.1", "@capacitor-community/photoviewer": "^1.1.1", "@capacitor/android": "3.4.0", "@capacitor/app": "1.1.0", "@capacitor/core": "3.4.0", "@capacitor/filesystem": "^1.1.0", "@capacitor/haptics": "1.1.4", "@capacitor/ios": "3.4.0", "@capacitor/keyboard": "1.2.1", "@capacitor/splash-screen": "^1.2.1", "@capacitor/status-bar": "^1.0.7", "@ionic-native/zip": "^5.36.0", "@ionic/react": "^6.0.0", "@ionic/react-router": "^6.0.0", "@ionic/storage": "^3.0.6", "@testing-library/jest-dom": "^5.11.9", "@testing-library/react": "^11.2.5", "@testing-library/user-event": "^12.6.3", "@types/jest": "^26.0.20", "@types/node": "^12.19.15", "@types/react": "^16.14.3", "@types/react-dom": "^16.9.10", "@types/react-router": "^5.1.11", "@types/react-router-dom": "^5.1.7", "axios": "^0.25.0", "buffer": "^6.0.3", "com-sarriaroman-photoviewer": "^1.2.5", "cordova-plugin-file": "^6.0.2", "cordova-plugin-file-transfer": "github:sitewaerts/cordova-plugin-file-transfer", "cordova-plugin-ionic-webview": "^5.0.0", "cordova-plugin-statusbar": "^3.0.0", "cordova-plugin-whitelist": "^1.3.5", "cordova-plugin-x-socialsharing": "^6.0.3", "cordova-plugin-zip": "^3.1.0", "es6-promise-plugin": "^4.2.2", "extract-zip": "^2.0.1", "fast-xml-parser": "^4.0.1", "framer-motion": "^6.2.4", "he": "^1.2.0", "image-size": "^1.0.1", "ionic-img-viewer": "^2.9.0", "ionicons": "^5.4.0", "moment": "^2.29.1", "react": "^17.0.1", "react-dom": "^17.0.1", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "react-scripts": "^5.0.0", "swiper": "^8.0.7", "timers": "^0.1.1", "typescript": "^4.1.3", "web-vitals": "^0.2.4", "workbox-background-sync": "^5.1.4", "workbox-broadcast-update": "^5.1.4", "workbox-cacheable-response": "^5.1.4", "workbox-core": "^5.1.4", "workbox-expiration": "^5.1.4", "workbox-google-analytics": "^5.1.4", "workbox-navigation-preload": "^5.1.4", "workbox-precaching": "^5.1.4", "workbox-range-requests": "^5.1.4", "workbox-routing": "^5.1.4", "workbox-strategies": "^5.1.4", "workbox-streams": "^5.1.4", "xml2js": "^0.4.23" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@capacitor/cli": "3.4.0", "@types/xml2js": "^0.4.9" }, "description": "An Ionic project" }

I'm calling it like so:

PhotoViewer.show({ images: [{ url: img.uri, title: "img title" }], options: { share: false, }, mode: "slider", startFrom: 1, });

[jepiqueau]

@FabianTauriello i will have a look again

[jepiqueau]

@FabianTauriello it seems that you have only one image in the images array so the startFrom must be 0 and not 1

[FabianTauriello]

@jepiqueau First of all, thanks for reopening this - I appreciate it.

Yeah, I tried putting 0 instead of 1 but that didn't work. The only solution I found was to put multiple images in the array but this is a bit of a problem for me because the number of images will be calculated at runtime. I suppose I could check the number of images required and change the mode to "one" if only one image is required....

FYI, the issue only seems to exist on iOS and not Android.

[jepiqueau]

@FabianTauriello if you want to display only one image at a time you must use the mode 'one' and not the mode 'slider'. Any how i will look at it for iOS as you said it works great on Android

[jepiqueau]

@FabianTauriello this should be fixed in version 1.1.2. Please confirm

[FabianTauriello]

@jepiqueau I get this error when I try to update to 1.1.2:

npm ERR! Found: @capacitor/core@3.4.0 npm ERR! node_modules/@capacitor/core npm ERR! @capacitor/core@"3.4.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @capacitor/core@"^3.4.1" from @capacitor-community/photoviewer@1.1.2 npm ERR! node_modules/@capacitor-community/photoviewer npm ERR! @capacitor-community/photoviewer@"^1.1.1" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

should I attempt it with --force?

[jepiqueau]

@FabianTauriello update your app

npm i --save @capacitor/core@3.4.1  @capacitor/ios@3.4.1 @capacitor/android@3.4.1
npm i --save-dev @capacitor/cli@3.4.1
npm i --save @capacitor-community/photoviewer@latest jeep-photoviewer@latest

and then

npm run buiild
npx cap sync
npm run build
npx cap copy

[jepiqueau]

@FabianTauriello look at 1.1.3, 1.1.2 must be discarded

[FabianTauriello]

@jepiqueau Thanks I'll look at 1.1.3.

But can I use the slider mode and zoom in/out on the images without having to click on an image first?

[jepiqueau]

@FabianTauriello did you try to pinch with your fingers. Which platform?

[jepiqueau]

@FabianTauriello forget about what i said it is valid for the mode 'one' not for the 'slider' mode this will require to rewrite part of the code

[FabianTauriello]

@jepiqueau that would be great if possible!

[jepiqueau]

@FabianTauriello i understand but it is extremely difficult to do as the tap allows to move from the slider mode to the picture zoom in and out which is a different view. So this will not be in a near futur.