Quantcast
Channel: Ionic Forum - Latest posts
Viewing all 230427 articles
Browse latest View live

Capacitor save image in gallery

$
0
0

Yes, I tried it before and I was able to do that. And in your case, it’s possible to create a specific folder in the “Pictures” or “DCIM” directories and manage it within your Capacitor ReactJS app.

You can use Capacitor’s Filesystem API to write images to those directories by specifying the path as Pictures or DCIM. Here’s an example for saving in the “Pictures” directory:

JS Code

const saveImage = async (photo) => {
  const result = await Filesystem.writeFile({
    path: `Pictures/MyApp/${new Date().getTime()}.jpeg`,
    data: photo.base64String,
    directory: FilesystemDirectory.External,
  });
};

For scheduling a task to clear the folder every 70 days, you can use a background task handler or a third-party plugin like cordova-plugin-background-mode to run a periodic cleanup function.

But make sure to check for the necessary permissions for managing files outside the app’s sandbox.

Thanks :slightly_smiling_face:


Styles Break When Using Custom Angular Library Component in AppModule

$
0
0

Hi everyone
I have created a new Angular Ionic project and integrated a custom component from an Angular library. When this component is added to the AppModule of the newly created blank app, the styles for the entire project break. However, when the same component is used within a feature module, such as HomePageModule , everything works as expected.

import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { RouteReuseStrategy } from ‘@angular/router’;

import { IonicModule, IonicRouteStrategy } from ‘@ionic/angular’;

import { AppComponent } from ‘./app.component’;
import { AppRoutingModule } from ‘./app-routing.module’;
import { AxAQImageEditorComponent } from ‘@al-toaima-ahmed/image-editor-library’; // Using the library here will break the style for the wohle project

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,AxAQImageEditorComponent],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent],
})
export class AppModule {}

thank you in advance for your support

Component ion-menu-button loads late

$
0
0

And how can I prevent the flicker?

Using a SPM dependency inside a capacitor plugin but the overall app is using Cocoapods

$
0
0

I am creating a capacitor plugin that relies on a third party dependency which is only distributed via Swift Package Manager and I keep on getting the module is not found.

Inside the capacitor plugin, I see there is a Package.swift.

In dependencies, I have added
.package(name: "...", url: "...", from: "...")

In targets, I have added
.product(name: "...", package: "...")

I have also tried manually adding this package through xcode (Package Dependencies → add my package) and this doesn’t work either.

I have built my capacitor app as a Cocopods project so I think this is the reason it’s not properly working. My question is, how can I get SPM to work for this specific plugin while all other plugins continue to use Cocoapods?

Using a SPM dependency inside a capacitor plugin but the overall app is using Cocoapods

$
0
0

You can’t, you have to choose between CocoaPods or SPM

Using a SPM dependency inside a capacitor plugin but the overall app is using Cocoapods

$
0
0

If my project is firm on using CocoaPods and the third party dependency is only available on SPM, are there any workarounds or alternatives?

From my Googling I see that both CocoaPods + SPM can be used together, but maybe thats for iOS projects only? Capacitor apps are different - it requires only choosing 1 package manager?

Using a SPM dependency inside a capacitor plugin but the overall app is using Cocoapods

$
0
0

You should be able to add the SPM dependency to your project directly from Xcode to your app, but you said you tried and didn’t work.
But even if that work, you would have to use a local plugin in your project, not a separate Capacitor plugin installable through npm.

Using a SPM dependency inside a capacitor plugin but the overall app is using Cocoapods


Deep Linking with iOS in Development

$
0
0

hi darce
im kinda having the same problem but for production app

its not working basically. i followed that guide too

info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
	<dict>
...
<key>com.apple.developer.associated-domains</key>
		<array>
				<string>applinks:my.link.com</string>
		</array>
	</dict>
</plist>

.well-known/apple-app-site-association

{
        "appID": "QQQV1Q1QEQ.ar.my.bundle.id",
        "paths": ["*"]
}

what i am doing wrong?
i had the associated domains active in apple dashboard.
i had checked AASA validator and everything ok

i generate an .ipa with appflow with store certificates and then i prove with testflight and browser stack and not works

any idea?

Custom SVG Icons showing in web view but not android

$
0
0

Hello everyone! I’ve been developing using vue for a while but am a little new with capacitor and android. Anyways, Im having a little trouble with the <ion-icon> Vue 3 component. The icons show when Im running my project as a web app but when I compile it into a android native apk, they do not load.

Im trying to use my own svgs for icons utilizing the src or the name property. When utilizing the src property I provide the correct directory starting - /src/assets/icon/icon-name.svg . I have also tried using the name property in junction with the addIcon() function but get the same results. Tried placing the addIcon() function in both my main.ts and App.vue files.

Can someone please point out what Im not doing correctly? Thanks!

Using:
Ionic Vue 8
Capacitor 6
Vue 3.3

Tested in both the android emulator and using my personal android device with the same results. As a side note, i did try to submit a ticket but was referred to community support.

Custom SVG Icons showing in web view but not android

$
0
0

To anyone who stumbles across this post in the future, the fix can be found here:

TLDR - put your custom SVGs in the public/assets/icons/ directory of your project. From there you can reference them however you like. I decided to stick with the addIcon() function approach to keep my SVG icons organized and in one place. This also allows me to utilize the name property of the <ion-icon> component.

Advice on Integrating Ionic with AWS Services?

$
0
0

Hey everyone!

I have been working on an app using Ionic, and I am considering integrating it with AWS for backend services like authentication, storage, and maybe even some Lambda functions. Before I dive in, I wanted to check in with the community here for any advice or recommendations.

Has anyone done an Ionic + AWS integration? I am particularly curious about:

  1. Authentication: Is AWS Amplify a good way to handle user authentication in an Ionic app, or are there better alternatives?
  2. Storage and File Uploads: I’m planning to use S3 for file uploads. How’s the experience been with Ionic apps? Any gotchas to watch out for?
  3. Serverless Functions: Anyone using AWS Lambda with their Ionic projects? I am thinking about offloading some processing tasks to Lambda but would love to hear if it’s worth it or if there are easier approaches.
  4. General Integration Tips: If you’ve integrated AWS with Ionic in any capacity, what’s been your experience? Are there any must-know tips or pitfalls to avoid?

When I was Googling for the same I came across these resources CORS issue when uploading to AWS S3, and I'm not supposed to use cordova or fix it on the AWS, but on the client side AWS DevOps Tutorial, however they are good but I want to learn more from community members.

Any help or insight would be awesome. I am hoping to make this as smooth as possible, so any suggestions from your own experiences would be really appreciated.

Thanks in advance :slightly_smiling_face:

Capacitor plugin "App" already registered

$
0
0

Hi,

I recently upgraded our Capacitor app from version 5 to 6 using the guide here.

The app works great on both Android and iOS, but I’m seeing a terminal message that says: “Capacitor plugin ‘App’ already registered. Cannot register plugins twice.”

Any ideas on how to fix this? Thanks a lot!

Capacitor barcode scanner error

$
0
0

Hello,

I use the package @capacitor/barcode-scanner version 1.0.1 but when I send a new archive to TestFlight, I have a warning about the UUIDs and the symbols:

I use the latest version of xCode.

What does this mean and what are the implications of this warning?
Can I send the app in App Store with this?

Thanks for your help,
Loïc

Capacitor barcode scanner alert

$
0
0

Hello,

I’m looking for a way to translate the texts in the modal that appears on Android devices when the user rejects the access permission to the camera.

Given that this only happens on Android devices, is it possible to disable this modal to have a similar behavior as IOS?

Thanks for your help,
Loïc


Ionic capacitor android plugin dependency not found in app build

$
0
0

i am experiencing a very similar problem while building a custom capacitor plugin, i am importing an external .aar library, the plugin builds correctly but it is not found in app build. Did you solve this?

Custom plugin with aar library

$
0
0

same here, 4 years later and I have found no documentation or possible fix, did anyone manage to solve it?

Ionic capacitor android plugin dependency not found in app build

New to Ionic - Excited to Learn and Build!

$
0
0

You are welcome to the community John

White page when run app - Ios 16.4

$
0
0

This occurs to me when I updated to Capacitor v6.

Add this to package.json to resolve:

“browserslist”: [
“Chrome >=61”,
“ChromeAndroid >=61”,
“Firefox >=63”,
“Firefox ESR”,
“Edge >=79”,
“Safari >=13”,
“iOS >=13”
]

Viewing all 230427 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>