Its more how capacitor creates android platform folder (doesnt have config.xml)… this is how I got it to work
I uninstalled APKs that aren’t API level 29.
I created android platform folder locally, change targetSdkVersion in android/app/build.gradle (NOT build.gradle in android root - made this mistake a few times)
push android platform folder to repo (it was gitignored) - if I dont push it AppFlow will create one but there is less control for gradle configs
Thank you man.
You saved my life 
I am using push notification in my app and I am using local notifications in
chat to notify the user and I want the icon should be displayed along with the message according to the type of message, for example, if a video is attached along with the text message then
the icon of the video should be shown in the notification, similar to what happens in WhatsApp, so how
would I do that please help me
Still can’t… I was paying $120/month before. I won’t anymore until this is solved.
My code is now working
My config.xml file looks like this ->
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
<application android:usesCleartextTraffic="true" />
</edit-config>
After That : ionic cordova platform rm android
ionic cordova platform add android
Hi all,
On my ionic 5 + Angular 9 application I have some issues with the page transitions on iOS Devices.
The ion-toolbar on top makes a weird animation on a lot of pages.
I don’t see what I’m doing wrong here. It works in the browser and on Android.
Does anyone know how to fix this?
I already tried moving code from my ngOnInit() and more potential solutions, but without any luck.
In the menu, I have created a list and want to add a click function but it isn’t working this way. Can’t find the problem. The menu displays fine
Side-Menu.component.html
<ion-grid style="margin-top: 32px;" >
<ion-row class="ion-justify-content-center" >
<ion-avatar style="width: 100px; height: 100px;">
<img src="../assets/profile.png">
</ion-avatar>
</ion-row>
<ion-row class="ion-justify-content-center">
<h1>Hello User</h1>
</ion-row>
</ion-grid>
<ion-list>
<ion-item>
<ion-icon name="people-outline" slot="start"></ion-icon>
<ion-label>Groups</ion-label>
</ion-item>
<ion-item>
<ion-icon name="settings-outline" slot="start"></ion-icon>
<ion-label>Settings</ion-label>
</ion-item>
// not clickable
<ion-item button (click)="logOut()">
<ion-icon name="log-out-outline" slot="start"></ion-icon>
<ion-label>Log Out</ion-label>
</ion-item>
</ion-list>
Side-Menu.component.ts
import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
@Component({
selector: 'app-side-menu',
templateUrl: './side-menu.component.html',
styleUrls: ['./side-menu.component.scss'],
})
export class SideMenuComponent implements OnInit {
constructor(public auth: AngularFireAuth) {
}
logOut(){
this.auth.signOut();
}
ngOnInit() {}
}
app.component.html
<ion-app>
<ion-menu side="start" contentId="main">
<ion-content id="main">
<app-side-menu></app-side-menu>
</ion-content>
</ion-menu>
<ion-router-outlet></ion-router-outlet>
</ion-app>
Hi @Aste
In my case, it is working in --livereload, but not working without it.
Hi @OthLah
In my case, geolocation is working in --livereload, but not working without --livereload.
is there any solution?
I’m new in ionic mobile apps, My goal is to build a dynamic news feed in my home page like the Facebook timeline using ionic and firebase.
Please help me to build a news feed that must be charged dynamically from different type struct (A {image,time, description, user-id, title}, B{image, title, button}, C{title, number}…) then displayed them in ion-cards with different disposition; mentioned in the image below
Did you read any of the search hits from the link in my previous post?
setTimeout, especially with a magic number like 200, makes me very suspicious. Why is that there?
We are using Ionic 4 framework. Here is my concern,
When we are using UIWebView able to display images, but recently we updated to WKWebView then can able to add images with jpge, png format but displaying only thumbnails but not the images.
So could you please let us know is there an alternative way to display images?
Please let me know in Cordova-Ionic native plugins rather than using Capacitor plugins.
Thanks for your support.
after seeing @sroby’s comment, I checked my tsconfig.json
and it was like this
Hello! I have a problem when I try to use File Pluging’s moveFile method, I get this error.
FileError {code: 1, message: “NOT_FOUND_ERR”}
The strange thing is that the emulator works fine, but when I use it on the real device it doesn’t work. Please, I need someone to help me. I’ve been with this problem for two days. Thank you.
I share my code.
After taking a photo, I make it go through the renameFile method.
getVideoFromCamera() {
const videoUrlBehaviorSubject: BehaviorSubject<string> = new BehaviorSubject<string>('');
this.mediaCapture.captureVideo({ limit: 1, duration: 60, quality: 0.5 })
.then((data: MediaFile[]) => {
const newFileNamePrefix = 'video-' + this.authProvider.getLoggedUserId();
this.fileService.renameFile(data[0].fullPath, newFileNamePrefix)
.then((entry) => {
let videoUrl = entry.nativeURL;
if (this.platform.is('ios')) {
videoUrl = videoUrl.replace(/^file:\/\//, '');
}
videoUrlBehaviorSubject.next(videoUrl);
})
.catch((err) => {
videoUrlBehaviorSubject.error(err);
});
}).catch((err: CaptureError) => {
if (err.code !== '3') {
videoUrlBehaviorSubject.error(err);
}
});
return videoUrlBehaviorSubject.asObservable();
}
public async renameFile(fileName: string, newFileNamePrefix: string): Promise<Entry> {
let filePath = fileName.substr(0, fileName.lastIndexOf('/') + 1);
if (this.platform.is('ios') && !filePath.startsWith('file://')) {
filePath = 'file://' + filePath;
}
const oldFileName = fileName.substring(fileName.lastIndexOf('/') + 1);
const newFileName: string = this.getUserFileName(fileName, newFileNamePrefix);
return this.file.moveFile(filePath, oldFileName, filePath, newFileName);
}
When the this.file.moveFile method is executed it throws the error.
I get very nervous when I see code that manipulates either (a) dates or (b) URLs as strings. I try to do my best to treat both of those things like black boxes, only to be passed around to dedicated libraries whose job it is to manage them.
So is there any way you can rewrite this code without any of the munging around with the guts of URLs? (Bonus points for also getting rid of stuff intended only to execute on iOS). That just seems like a huge maintenance nightmare, and eliminating it may expose the proximate problem as well.
I’m trying to make a page that show some items as a grid when the user is using the web app and the same items as a list when using in the mobile app. For this I used the example of this tutorial in Ionic’s blog.
The main problem is that the last item in the grid is showing as a full size item in larger screens:
Another problem is that I configured the column to show a maximum of 4 items in larger screens, but it is showing 5.
Here is what I did:
<ion-grid>
<ion-row>
<ion-col *ngFor="let project of projects" col-xs-12 col-xl-3 col-lg-4 col-md-6>
<ion-item lines="none" class="project-item">
<ion-thumbnail slot="start" (click)="openMap(project.projectId, project.name, project.area, project.date)">
<img src="assets/images/project.png">
</ion-thumbnail>
<ion-label>
<h2>{{project.name}}</h2>
<p>{{project.user}} • {{project.date}}</p>
</ion-label>
<ion-button clear slot="end">Opções</ion-button>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
Where, according to the blog article (modified in my code, maybe this is the problem?):
col-12: If no other rules match, the column will take all 12 units
col-md-4: At a minimum width of 768px, each column will only use 4 units. This means, a row can now handle 3 columns
col-lg-3: As the screen gets bigger than 992px, a column only needs 3 units which means the row now holds 4 columns
col-xl-2: On the largest screens (1200px+), a column only needs 2 units and a row will display 6 columns
Why do you need plugins to display images? What cannot be achieved by just using ordinary <img> (or <ion-img>) elements in your templates?
While you wait for better answers from somebody who actually uses Ionic’s grid, maybe take a look at CSS Tricks’ Grid Layout Guide. I’m not entirely clear what you’re attempting to achieve, but I am pretty confident that there’s a CSS Grid way of doing it.