Hello,
Here is the repo: GitHub - AlvinStefanus/ionic-nav-route-error
In the main page (which is /tabs/tab1) click the “Go to Tab2” link in the middle of the screen. After you are being redirected to tab2, go back by clicking the browser back button. The error will show. The component of tab1 is gone, also try to click forward from the browser after that, the tab2 will be gone too.
It seems that for the moment you need to add support to both Google Universal Analytics and Google Analytics V4 because the V4 is not fully implemented (it still does not have the same set of features as the old Universal Analytics).
To add support to the V4 you “just” need to integrate Firebase Analytics and I’ve used this plugin: GitHub - capacitor-community/firebase-analytics: Enable Firebase Analytics for Capacitor Apps</tit
But should I use for Google Universal Analytics? I can’t find anything useful searching the internet. Could you please give me a hand?
any solution for this type case ?
for example we have stripe checkout page into ionic app then if we open into inappbrowser then how to back to app open page from where checkout started?
The test renderer not able to find Alert / Popover content
Here is my component
const ExploreContainer: React.FC<ContainerProps> = () => {
const [ showAlert ] = useIonAlert();
return (
<div className="container">
<IonButton expand="block" onClick={ () =>
showAlert({ header: 'Alert', message: 'alert from hook', buttons: [ 'Ok' ] })
}
>Show Alert
</IonButton>
</div>
);
};
This is my test case
describe("Test component", () => {
beforeEach(()=>{
render(
<IonApp>
<ExploreContainer />
</IonApp>
);
});
test("Alert test", async () => {
fireEvent.click(screen.getByText("Show Alert"));
await waitFor(()=>{
expect(screen.getByText("alert from hook")).toBeVisible();
});
})
});
This is the error
Test component › Alert test
Unable to find an element with the text: alert from hook. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
<body>
<div>
<ion-app>
<div
class="container"
>
<ion-button
expand="block"
>
Show Alert
</ion-button>
</div>
</ion-app>
</div>
</body>
15 | test("Alert test", async () => {
16 | fireEvent.click(screen.getByText("Show Alert"));
> 17 | await waitFor(()=>{
| ^
18 | expect(screen.getByText("alert from hook")).toBeVisible();
19 | });
20 | })
at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:173:27)
at Object.test (src/components/ExploreContainer.test.tsx:17:9)
Test Suites: 1 failed, 1 passed, 2 total
Tests: 1 failed, 1 passed, 2 total
Snapshots: 0 total
Time: 9.408 s
Please help me to solve the issue.
Hello Team,
I am facing conversion bytes to binary we don’t have a any solution please post it in same here
Adv Thanks
Hi everybody,
I have a problem using a nested array in Ionic 5, I have to create it after retrieving data from my backend service.
I can correctly display the data, the hide/show works, but I have several problems:
Here is the code
this.nestService.getMultiples(listParam)
.subscribe((data) => {
this.arrayOne = _.orderBy(data[0], ['Name'], ['asc']);
this.arrayTwo = _.orderBy(data[1], ['Name'], ['asc']);
this.arrayTwoModified = this.arrayTwo;
this.arrayTwoModified.forEach(item => item.numberSelect = 1);
this.arrayOneModified = this.arrayOne;
this.arrayOneModified.map(i => {
i.show = true;
i.arrayTwoModified = this.arrayTwoModified;
});
});
And this is the template
<div *ngSwitchCase="'One'">
<ion-item-group *ngFor="let arrayOne of arrayOneModified; let i= index">
<ion-item-divider tappable (click)="arrayOne.show = !arrayOne.show" color="medium">
<ion-label>{{arrayOne.Name}}</ion-label>
<ion-icon slot="end" *ngIf="arrayOne.show" name="arrow-down-outline"></ion-icon>
<ion-icon slot="end" *ngIf="!arrayOne.show" name="arrow-up-outline"></ion-icon>
</ion-item-divider>
<ion-list *ngIf="arrayOne.show" lines="full">
<ion-item *ngFor="let arrayTwo of arrayOne.arrayTwoModified ; let j= index">
<ion-label>{{arrayTwo.Name}} - {{i}} - {{j}}</ion-label>
<ion-input class="right" type="number" min="0" [(ngModel)]="arrayTwo.numberSelect"></ion-input>
<!-- <ion-input class="right" type="number" min="0" [(ngModel)]="arrayOneModified[i].arrayTwoModified[j].numberSelect"></ion-input> -->
<!-- <ion-input class="right" type="number" min="0" [(value)]="arrayOneModified[i].arrayTwoModified[j].numberSelect"></ion-input> -->
</ion-item>
</ion-list>
</ion-item-group>
</div>
If anybody have an idea, it will be nice!
Thanks
update ur ionic and capacitor version to the latest it should be solved, this was a bug in cap v3 beta and now stable is out. If u still feel the issue u can report on this issue as active bug in the ionic github-issue. they have also added a option to disable haptic as a feature request. so u can keep track on.
Hello folks,
do you know how much energy ionic (hybrid apps in ionic-angular) typically takes power consumptions (especially in comparison to native apps)?
In my case:
any recommendations or suggestions which makes my app more efficient are highly appreciated!
I’m currently developing an application in Ionic 5. One of the only things left to do is integrate Square Payments into the app. Currently I load the script using a script service and then run the code to generate the payment form etc:
/// within ngOnInit
this.scriptService.load('square-sandbox').then(async data => {
const payments = await Square.payments(this.applicationId, this.locationId);
//Card payments
let card;
const cardButton = document.getElementById(
'card-button'
);
const backBtn = document.getElementById('toggle-drawer');
try {
card = await this.initializeCard(payments);
} catch (e) {
console.error('Initializing Card failed', e);
return;
}
//googlepayments
let googlePay;
try {
googlePay = await this.initializeGooglePay(payments);
} catch (e) {
console.error('Initializing Google Pay failed', e);
}
async function handlePaymentMethodSubmission(event, paymentMethod) {
event.preventDefault();
try {
const token = await this.tokenize(paymentMethod);
const paymentResults = await this.createPayment(token);
console.log("SUCCESS")
setTimeout(()=>{
window.location.href = "/payment-success";
},250);
console.debug('Payment Success', paymentResults);
} catch (e) {
cardButton.setAttribute("disabled ", "false");
backBtn.setAttribute("disabled ", "false");
console.log('FAILURE');
console.error(e.message);
}
}
if (googlePay !== undefined) {
const googlePayButton = document.getElementById('google-pay-button');
googlePayButton.addEventListener('click', async function (event) {
await handlePaymentMethodSubmission(event, googlePay);
});
}
}).catch(error => console.log(error));
this part all works fine. However after the loading of square.js it seems to take over the application? All console.logs will come from square.js and all routing seems to also go through square.js with angular throwing an error.
Hi @aaronksaunders , thanks for the reply
I’m trying to use this one => Native Geocoder: Forward and Reverse Geocoding in iOS/Android
When using it, It requires to install cordova & angular js
Finally I find a way to use an api without key.
If someone is interessted, it’s : https://api.bigdatacloud.net/data/reverse-geocode-client
Purchasing the latest iPhone Mobile, is considered to be the most expensive as well as the most premium Phone. Many people believe that this phone has the ability to do everything which an Android phone is unable to perform or the functionality or features of any app or phone introduced first to this Premium Phone.
Let’s jump on to our Topic and click on this link i.e., IOS Emulator for PC. Before introducing or listing down the best Emulator Software for IOS, we should be aware of the Definition of Emulator, What an Emulator does and How Emulators acts Like?
Hello,
Thank you for your response, I will see this solution.
But as I know, there is no IonInfiniteScroll & IonInfiniteScrollContent official component in
@ionic/react, in the official Web Site of Ionic with React.
Thank you for the help.
I use @ionic/react version 5.0.7, and IonInfiniteScroll & IonInfiniteScrollContent and it works fine.
import {
IonContent,
IonInfiniteScroll,
IonInfiniteScrollContent,
IonLabel,
IonPage,
useIonViewDidEnter,
} from "@ionic/react";
import React, { useEffect, useState } from "react";
import { RootStateOrAny, useDispatch, useSelector } from "react-redux";
import { Col, Container, Row } from "reactstrap";
import { alertActions } from "../../actions/alert";
import Header from "../../components/Shared/Header";
import GeneralSkeletonText from "../../components/skeleton_text/general_restaurant";
import axios from "../../helpers/axiosInterceptor";
const Orders: React.FC = (props: any) => {
const [orderList, setOrderList] = useState<any>([]);
const [load, setLoad] = useState(false);
const [disableInfiniteScroll, setDisableInfiniteScroll] =
useState<boolean>(false);
const [page, setPage] = useState(1);
const dispatch = useDispatch();
async function fetchData(temp) {
axios
.get("/orders?page=" + temp)
.then(async (res: any) => {
if (res && res.data && res.data.length > 0) {
setOrderList([...orderList, ...res.data]);
setDisableInfiniteScroll(res.data.length < 5);
} else {
setDisableInfiniteScroll(true);
}
})
.catch((err) => console.error(err));
}
async function searchNext($event: CustomEvent<void>) {
let temp = page + 1;
setPage(temp);
await fetchData(temp);
($event.target as HTMLIonInfiniteScrollElement).complete();
}
useIonViewDidEnter(() => {
axios
.get(`/orders`)
.then((res) => {
const data = res.data;
setOrderList(data);
setDisableInfiniteScroll(data.length < 5);
setLoad(true);
})
.catch((err) => {
dispatch(alertActions.error("There are errors, please try again!"));
dispatch(alertActions.page_loader(false));
});
});
useEffect(() => {
if (!load) {
axios
.get(`/orders`)
.then((res) => {
const data = res.data;
setOrderList(data);
setDisableInfiniteScroll(data.length < 5);
setLoad(true);
})
.catch((err) => {
console.log(err);
});
}
}, [load]);
return (
<IonPage>
<Header
name="Orders"
click={() => props.history.goBack()}
back={false}
></Header>
<IonContent fullscreen>
{load ? (
orderList.length == 0 ? (
<Container fluid={true} className="h-100 d-flex align-items-center">
<Col>
....
</Col>
</Container>
) : (
<div>
{orderList.map((data: any, key) => {
return (
<div
className="h-flex pt-20"
key={key}
style={
key == orderList.length - 1 ? { marginBottom: 20 } : {}
}
onClick={() => props.history.push(`/order/${data.id}`)}
>
<div className="col-12">
....
</div>
</div>
);
})}
<IonInfiniteScroll
threshold="100px"
disabled={disableInfiniteScroll}
onIonInfinite={(e: CustomEvent<void>) => searchNext(e)}
>
<IonInfiniteScrollContent loadingText="Loading..."></IonInfiniteScrollContent>
</IonInfiniteScroll>
</div>
)
) : (
[...Array(5)].map((e, i) => (
<Container className="mt-3 p-0" key={i}>
<GeneralSkeletonText />
</Container>
))
)}
</IonContent>
</IonPage>
);
};
export default Orders;
This is my code, maybe can help.
Hello,
Thank you for your great help 
, this code I think it works with Data that come from an API, and sending 20 Data per page ?
I’m developing an app and I will definitely upgrade to v6 - should I wait until the stable release, or is it better to upgrade now to v6 beta?
I recommend waiting until at least the Release Candidate (RC) to begin updating your app. Until then, APIs are subject to change. With an RC, the API is finalized and the team will be focusing on bug fixes only.
Hi All,
I built my new ionic5 app but I receive build.gradle error in my log.
Command failed with exit code 1: C:\projects\mgdlab\ionic\oto-app\platforms\android\gradlew cdvBuildRelease -b C:\projects\mgdlab\ionic\oto-app\platforms\android\build.gradle
I solved an equal problem by modifying the file build.gradle but I don’t remember how.
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
ext.kotlin_version = '1.3.50'
apply from: 'repositories.gradle'
repositories repos
dependencies {
classpath 'com.android.tools.build:gradle:4.0.0'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
apply from: 'repositories.gradle'
repositories repos
//This replaces project.properties w.r.t. build settings
project.ext {
defaultBuildToolsVersion="29.0.2" //String
defaultMinSdkVersion=22 //Integer - Minimum requirement is Android 5.1
defaultTargetSdkVersion=29 //Integer - We ALWAYS target the latest by default
defaultCompileSdkVersion=29 //Integer - We ALWAYS compile with the latest by default
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}
I get the error message error: unknown option ‘–npm-client’
when I try to run the following command ionic capacitor run ios.
I think that I use the latest version of Ionic
Can you help me here. Thanks a lot
My versions:
onic:
Ionic CLI : 6.13.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.6.12
@angular-devkit/build-angular : 12.1.4
@angular-devkit/schematics : 12.1.4
@angular/cli : 12.1.4
@ionic/angular-toolkit : 2.3.3
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res (update available: 0.15.3) : 0.10.0
native-run : 1.4.0
System:
NodeJS : v15.2.1 (/usr/local/Cellar/node/15.2.1/bin/node)
npm : 7.20.3
i did every possible solution in this thread but nothing works