Try this
import { IonRouterOutlet, Platform } from ‘@ionic/angular’;
import { Plugins } from ‘@capacitor/core’;
const { App } = Plugins;
…
constructor(
private platform: Platform,
private routerOutlet: IonRouterOutlet
) {
this.platform.backButton.subscribeWithPriority(-1, () => {
if (!this.routerOutlet.canGoBack()) {
App.exitApp();
}
});
}
I’m trying to authenticate a user using Firebase Auth. When using ionic serve --ssl everything works as you would expect.
However, when using ionic cordova run android -l --ssl and attempting to login the phone switches to the browser and opens a new tab. Selecting the account you would like to use (Google Auth) closes the tab. And that’s where it ends. Closing the browser and switching back to the app reveals the login page without any authentication occurring.
Here’s a video of it in action. IMGUR
I’ve tried the following guides:
And the following libs:
Any help I can get at this point would be greatly appreciated!
Hello everyone! I am asking this question since UIWebView is being deprecated. I did read the following ionic article:
If I understand this article correctly, we have 2 options:
Here comes my question. By curiosity, I went through the native code generated by capacitor on an ionic4 + capacitor and saw the following code:
Note that we do have some custom plugins, but the article states that Capacitor will replace every reference to UIWebView.
That being said, I can still see some references to UIWebView. I was wondering if that was normal and if I can be sure that Apple won’t reject the app if I use ionic 3 + capacitor or ionic 4 + capacitor.
Also me and my fellows had in mind that maybe Apple Testflight would help us figuring out whether or not Apple would reject our app. Is that the case? Can testflight actually determine if we will get the warning?
Thank you a lot for your time, this is a huge concern for me.
I hope you have a great week 
This kind of error message can happen if there is no head tag in the HTML file. See this comment.
I did encounter this issue when migrating a small test app from Cordova to Capacitor. I do think the requirement to use a head element should be documented.
(This post is permitted by ionic team in advance)
Hello, Ionic and Capacitor developers.
This is the author of @ionic-native/google-maps and cordova-plugin-googlemaps.
I would like to make fundraising to support these plugins on Capacitor platform, especially iOS platform.
Purpose: Give the ability to this plugin works on Capacitor iOS platform
Fundraising amount: $3,000 USD
Work duration : maximum 3 months
Start date: after amount is reached
Refund: if I fail to implement in 3 months, I will refund full amount.
@ionic-native/google-maps and cordova-plugin-googlemaps are able to implement Google Maps APIs for each platforms on ionic framework (with Cordova)
These plugins also run on Capacitor Android platform at this time, however they do not run on iOS platform due to the internal technical reason.
I know how to resolve the technical problem, and I already confirmed this plugin works on Capacitor iOS in a test app before.
However I have to make a big internal changes to support for Capacitor iOS platform.
Not only iOS code, but also overall of this plugin code.
In order to work for this, I would like to make a fundraising for my work.
The goal of the fundraising amount is $3,000 USD.
I will start working after the fundraising amount is reached to the 3,000 USD at least.
Estimate working duration is 3 months.
If I fail to implement the code in 3 months, I will refund the amount fully (Exception: If I get illness (i.e. COVID-19), or meet troubles (car hits) something, I will discuss with you)
Please donate some amount from https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/2781
Thank you for considering.
Best regards,
Please help
HTML code
<ion-refresher (ionRefresh)=“doRefresh($event)” class=“refresher” pullFactor=“0.5” pullMin=“0” pullMax=“0”>
<ion-refresher-content refreshingSpinner="circles" refreshingText="">
</ion-refresher-content>
</ion-refresher>
<ion-list class="list" id='admissionList' *ngIf="ListCount >0 ">
<ion-item class="listRow" *ngFor="let item of searchList; let i = index" tappable (click)="ViewIP(item)">
<div slot="start" style="text-align: center;">
<input type="hidden" id="{{'img_'+(i+1)}}" value="{{item.PatientPhoto}}">
<img class="listIcon" src="" id="{{'imgControl_'+(i+1)}}" />
<p>
<ion-button *ngIf="item.PatientStatus == 'VIP'" class="vipButton" color='warning' disabled>{{item.PatientStatus}}
</ion-button>
</p>
<span style="display: none;"> {{LoadImage(i+1)}}</span>
</div>
<ion-label class="listTitle">
<h4 class="listHeading">{{item.PatientName}}</h4>
<p class="listSubHeading">{{item.PatientGender +'/'+item.PatientAge}}</p>
<p class="listSubHeading">{{item.Bed}}</p>
<p class="listSubHeading">{{item.Dept}}</p>
<ion-button class="smallButton" color="tertiary" disabled >{{item.AdmitPatientStatus}}
</ion-button>
</ion-label>
<img class="listArrow" slot="end" src="assets/imgs/listItem_arrow.png" />
</ion-item>
</ion-list>
ts file:
/************* Load Image in listView Function **************/
public async LoadImage(Index) {
let ImgSrc = $("#img_" + Index).val();
if (ImgSrc === “” || ImgSrc === null || ImgSrc === “undefined”) {
$("#imgControl_" + Index).attr(“src”, ProjParams.DefaultImage);
}
else {
$("#imgControl_" + Index).attr(“src”, "data:image/jpeg;base64, " + ImgSrc);
}
}
We have an Ionic project that we would like to publish in Google Play. However, we would like to install the Ionic deploy plugin in order to update the application on client’s devices easily. However, after installing the plugin the expected behavior is not met. I will now try to explain the steps I followed in order to give a good overview:
“cordova-plugin-ionic”: “5.4.7”
I would like to note that I tried the second alternative from the docs (installing cordova plugins) here: https://ionicframework.com/docs/appflow/deploy/api#plugin-variables however this did not work out either.
Last but not least, following the steps above I created the .apk file myself using AndroidStudio but the result was the same - live update does not work.
I would appreciate if anyone has an idea what is causing the issue.
@ionic-native/google-maps and cordova-plugin-googlemaps work on Capacitor Android, however they do not work on Capacitor iOS, due to the technical problem of Capacitor iOS.
In order to work on iOS, I have to work for the plugin lots of time.
Please support the fundraising.
Thanks for having this option here. As first, I want to write about my query in this platform but one issue not able me to write my query and this is the fourth time I am writing. Visit my website to know about my business. Now I am going to discuss this site and how it affected and take my time.
Your site is really good and very easy to use but while writing a forum and please take it as feedback. Whenever I want to write a query then I have to submit 2 or 3 times because it always works in a very slow manner and sometimes after refreshing the page I am not able to see my query.
Note that, I am not saying that this problem is happening to all but there is no issue regarding my internet server or my pc so I think this is the problem which I am facing right now.
Thanks and be sure to reply.
any idea is appreciated.
If you think of refresh in web technology its the same as re-loading, which is what you’d like to avoid since performance will definitely hit a snag as your list grows big.
Am assuming that you are fetching data from a database which is being updated by other users elsewhere. Combining virtual scroll and infinite scroll could serve you better as it keep on loading data and show a small list on the screen at the same time.
image courtesy of
https://medium.com/frontend-journeys/how-virtual-infinite-scrolling-works-239f7ee5aa58
Here is a tutorial showing how to combine both…
Add Virtual Scroll & Infinite Scroll Component in Home Page
Hi,
My scenario is as below.
I have 4 tabs- tab1, tab2, tab3, and tab4. If I will navigate from the login page after login the tabs will open with active tab tab1. then I will navigate to tab 3.
From Tab3 I will navigate to page A->page B -> page C. From page C I want to set root tab3. then I start back navigation from android hardware back, then ideally it should not go to either page A, page B, or page C. But It is navigating to that pages.
for navigation , I am using this.router.navigate([‘X’, ‘a’, ‘b’]) and for setting roo I am using this.navCtrl.navigateRoot(‘A/B’,{ replaceUrl: true });
I want to use the hardware back button for subpages to go back but not from the root tab. I don’t want to navigate back from the tab to the login page.
Thanks in advance.
Thanks
In that code newProfiles refers to the same array as profiles, so React thinks nothing has changed and there’s no need to re-render.
Never mutate objects or arrays with React state. Always treat them as immutable. Try creating a new array instead:
const newProfiles = [...profiles, profile]
setProfiles(newProfiles)
Hi,
I’m migrating an app from Ionic3 to Ionic5 by copying the code from the old app to the new and updating the code with the new rules.
Now I have to define some custom colors, I’ve used this code in the file variables.scss:
:root {
...
--ion-color-evenItemAcceptedBg: #006600;
--ion-color-oddItemAcceptedBg: #006600;
--ion-color-evenItemPendingBg: #f9bb06;
--ion-color-oddItemPendingBg: #f9bb06;
}
I’d like to use these colors in a page.
This code doesn’t work:
<ion-item *ngFor="let pendingDoc of filteredPendingDocuments; let even = even"
class="pendingItem"
[color]="even? 'evenItemPendingBg' : 'oddItemPendingBg'">
If a use default colors the same code works:
<ion-item *ngFor="let pendingDoc of filteredPendingDocuments; let even = even"
class="pendingItem"
[color]="even ? 'primary' : 'secondary'">
So which is the correct way to define and use custom colors?
Thank you very much
cld
I would guess IonSegmentButtons should be directly children of the IonSegment.
An IonSegment is designed to be a horizontal group of buttons. like the iOS Segmented Controls.
Seems like you’re trying to create a vertical group instead?
Where are you testing it? In the browser? In Android? In iOS?
I have used these to solve the problem:
:root {
--ion-color-oddItemPendingBg: #f9bb06;
}
.ion-color-oddItemPendingBg {
--ion-color-base: var(--ion-color-oddItemPendingBg);
}
I am also facing the same error. Didn’t find any solution yet.
Right, the problem is, that I want to have 7 SegmentButtons in the Segment Element .
So sometimes it looks and feels right:
But Than if i click around the following happens:
I have no idea why and how to fix it. Do you have any ideas?
