Is the Photoviewer only for Cordova projects?

[Th-Barth]

Hi,
when I click on an image, I get the error message:

Native: tried calling PhotoViewer.show, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

I have an Ionic 6, Angular, Capacitor App and I am trying to implement this photoviewer plugin

I followed these steps
https://ionicframework.com/docs/native/photo-viewer
https://github.com/sarriaroman/photoviewer
npm i com-sarriaroman-photoviewer
npm install --save @ionic-native/photo-viewer

The the Ionic extension for Visual Studio Code said I had to migrate to awesome cordova plugins

`
[Ionic] Replace @ionic-native/photo-viewer...

npm install @awesome-cordova-plugins/photo-viewer --save-exact && npm uninstall @ionic-native/photo-viewer
[Ionic] @ionic-native/photo-viewer Completed.

[Ionic] Install...

npm install @awesome-cordova-plugins/core --save-exact

Installed @awesome-cordova-plugins/core
[Ionic] @awesome-cordova-plugins/core Completed.
`

In the code with the showPhoto() method

`
import { PhotoViewer } from '@awesome-cordova-plugins/photo-viewer';

var photooptions = {
share: true, // default is false
closeButton: false, // default is true
copyToReference: true, // default is false
headers: '', // If this is not provided, an exception will be triggered
piccasoOptions: { } // If this is not provided, an exception will be triggered
};

showPhoto(image) {
console.log("image clicked", image);
PhotoViewer.show(image, 'Photo', photooptions);
}
`

The error message says: "Make sure to include cordova.js" How? Will this mess up my project?

[Th-Barth]

The photoviewer works on my android device. Ok, I didnt know that Cordova is only for ios/android devices and not for the browser. Are there plans to make it available for Capacitor as well?

[rvcroffi]

The photoviewer works on my android device. Ok, I didnt know that Cordova is only for ios/android devices and not for the browser. Are there plans to make it available for Capacitor as well?

You should try this Capacitor plugin https://github.com/capacitor-community/photoviewer

[Th-Barth]

The photoviewer works on my android device. Ok, I didnt know that Cordova is only for ios/android devices and not for the browser. Are there plans to make it available for Capacitor as well?

You should try this Capacitor plugin https://github.com/capacitor-community/photoviewer

Hi, your comment comes at the right time. Today I wanted to start the app on my smartphone after long time and I get an depricated gradle build error:

FAILURE: Build failed with an exception.

     * Where:
     Script 'E:\ionic-workspace\myapp\node_modules\com-sarriaroman-photoviewer\src\android\photoviewer.gradle' line: 6
     
     * What went wrong:WARNING:Using flatDir should be avoided because it doesn't support any meta-data formats.
     
     A problem occurred evaluating script.
     > Could not find method compile() for arguments [com.commit451:PhotoView:1.2.4] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.
     
     * Try:
     > Run with --stacktrace option to get the stack trace.
     > Run with --info or --debug option to get more log output.
     > Run with --scan to get full insights.
     
     Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.

[Th-Barth]

https://github.com/capacitor-community/photoviewer

Unfortunately I get an error when installating this photoviewer, not compatible with capacitor 4:

npm install @capacitor-community/photoviewer
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @capacitor/[email protected]
npm ERR! node_modules/@capacitor/core
npm ERR! @capacitor/core@"^4.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @capacitor/core@"^3.4.1" from @capacitor-community/[email protected]
npm ERR! node_modules/@capacitor-community/photoviewer
npm ERR! @capacitor-community/photoviewer@"*" 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.

[rvcroffi]

Hmm, it's a @capacitor/core dependency conflict. Try to force the installation.
npm install @capacitor-community/photoviewer --force
I tested on web with Capacitor 4 and it worked.
For iOS and Android the installation has extra steps: https://github.com/capacitor-community/photoviewer#installation

[Th-Barth]

Hmm, it's a @capacitor/core dependency conflict. Try to force the installation. npm install @capacitor-community/photoviewer --force I tested on web with Capacitor 4 and it worked. For iOS and Android the installation has extra steps: https://github.com/capacitor-community/photoviewer#installation

I installed the packages with --force and tried it for web, but I dont get to see the images as desribes here https://github.com/capacitor-community/photoviewer/blob/main/docs/Ionic-Angular-Usage.md

I only get the toast message: "echo Hello from PhotoViewer" called in the ngAfterViewInit-Method. But the urls to the images are valid!

I dont understand this photoviewer, so I cant use it. I just wish a Photoviewer to fullscreen images by one tap, that can be part of chat messages.

[loic-parent]

Hello,

The package @capacitor-community/photoviewer is no longer maintained.
Is there a Capacitor V6 compatible package to use instead?

Regards,
Loïc