Hi
I would like to show the Metal performance HUD for my web app, I follow the instructions described in Monitoring your Metal app’s graphics performance, but I couldn’t make it work. Someone knows if it is even possible? Thanks.
1 post - 1 participant
Easy-to-Use Design
An Uber clone app with a simple and clear layout makes it easy for both passengers and drivers to use without confusion.
Live Location Tracking
Passengers and drivers can see each other’s location in real-time, ensuring a smooth and efficient ride.
Safe Payment Options
Multiple payment methods, such as credit/debit cards and digital wallets, make payments secure and quick in the Uber clone app.
Ride Booking & Scheduling
Users can book a ride right away or schedule it for later, giving them more flexibility in the Uber clone app.
Driver Ratings & Feedback
Passengers can rate their ride and leave reviews, helping to maintain the quality and safety of service in the Uber clone app.
1 post - 1 participant
I’ve got a Capacitor-built app that I’m working on and when my testers touch and drag, rather than scrolling the area, it tries to pick up the HTML element that was touched to start and acts like it’s drag-n-dropping it where none exists. There is drag-n-drop in one part of the system, but this is happening almost everywhere. Not sure how to identify the source of the issue, or where it does or doesn’t take place. Has anyone ever seen this? How did you address it? I’m running on @capacitor/core 6.2.0.
2 posts - 2 participants
Hi, when I am using angular router-outlet and I try for example
this.router.navigate(['/detail/' + id], { relativeTo: this.route.parent });
my navigation works OK
but when I switch to ion-router-outlet it stop working because this.route.parent is null
at the same time I tried to check children in parent and its null too while when I use angular router outlet I see all children of the parent
Am I missing some import in Ionic or is it how it should works ?
1 post - 1 participant
I am creating a capacitor plugin that wraps a 3rd party SDK. For IOS the SDK is available as a swift package. I am able to link the package to my plugin using the Package Dependencies tab in XCode after I build the app, but each time I build or run npx cap sync I need to relink the package.
I am wondering if there is a way to do this automatically with a build script or some other way so it doesn’t need to be done manually after each build.
1 post - 1 participant
When publish app to Testflight I got this email. I am using Ionic React. Please let me know the solution.
ITMS-91061: Missing privacy manifest - Your app includes “Frameworks/GTMAppAuth.framework/GTMAppAuth”, which includes GTMAppAuth, an SDK that was identified in the documentation as a commonly used third-party SDK. Starting February 12, 2025, if a new app includes a commonly used third-party SDK, or an app update adds a new commonly used third-party SDK, the SDK must include a privacy manifest file or you won’t be able to submit the app for review in App Store Connect. Please contact the provider of the SDK that includes this file to get an updated SDK version with a privacy manifest. For more details about this policy, including a list of SDKs that are required to include signatures and manifests, visit: Upcoming third-party SDK requirements - Support - Apple Developer.
ITMS-91061: Missing privacy manifest - Your app includes “Frameworks/GTMSessionFetcher.framework/GTMSessionFetcher”, which includes GTMSessionFetcher, an SDK that was identified in the documentation as a commonly used third-party SDK. Starting February 12, 2025, if a new app includes a commonly used third-party SDK, or an app update adds a new commonly used third-party SDK, the SDK must include a privacy manifest file or you won’t be able to submit the app for review in App Store Connect. Please contact the provider of the SDK that includes this file to get an updated SDK version with a privacy manifest. For more details about this policy, including a list of SDKs that are required to include signatures and manifests, visit: Upcoming third-party SDK requirements - Support - Apple Developer.
ITMS-91061: Missing privacy manifest - Your app includes “Frameworks/GoogleSignIn.framework/GoogleSignIn”, which includes GoogleSignIn, an SDK that was identified in the documentation as a commonly used third-party SDK. Starting February 12, 2025, if a new app includes a commonly used third-party SDK, or an app update adds a new commonly used third-party SDK, the SDK must include a privacy manifest file or you won’t be able to submit the app for review in App Store Connect. Please contact the provider of the SDK that includes this file to get an updated SDK version with a privacy manifest. For more details about this policy, including a list of SDKs that are required to include signatures and manifests, visit: Upcoming third-party SDK requirements - Support - Apple Developer.
//package.json
“@codetrix-studio/capacitor-google-auth”: “^3.4.0-rc.4”,
1 post - 1 participant
To refund money from Airtel wrong recharge 9973-919-178-or9153-276-772- immediately call Us today best regards service representative team available.
2 posts - 1 participant
The docs for IonReorderGroup give this code:
import React, { useState } from 'react';
import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
function Example() {
const [items, setItems] = useState([1, 2, 3, 4, 5]);
function handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
// Before complete is called with the items they will remain in the
// order before the drag
console.log('Before complete', items);
// Finish the reorder and position the item in the DOM based on
// where the gesture ended. Update the items variable to the
// new order of items
setItems(event.detail.complete(items));
// After complete is called the items will be in the new order
console.log('After complete', items);
}
return (
<IonList>
{/* The reorder gesture is disabled by default, enable it to drag and drop items */}
<IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
{items.map((item) => (
<IonItem key={item}>
<IonLabel>Item {item}</IonLabel>
<IonReorder slot="end"></IonReorder>
</IonItem>
))}
</IonReorderGroup>
</IonList>
);
}
export default Example;
In my app, I want to let users rearrange items in a certain order, and I want to save the state to my server.
I’m using react-hook-form and I can do that pretty easily.
But, how do I set the initial state of IonReorderGroup? For example, say the user previously updated the state of items to [5,4,3,2,1]; how do I get IonReorderGroup to show the items in that order when the component is loaded?
The problem is that you can’t just change the line const [items, setItems] = useState[5,4,3,2,1] like you would normally set state in React. It seems to be that you need to do something like a one-time useEffect() on component load and then manually trigger handleReorder(), but I’m having trouble getting that to work.
4 posts - 2 participants
I’m attempting to get an app to build in Appflow, but without success. The app lives in an Nx Monorepo, therefore I’ve added the following appflow.config.json:
{
"apps":
[
{
"appId": "xxxxxxxx",
"root": "apps/airsmart-user",
"dependencyInstallCommand": "## yarn install && cd ../../ && yarn install",
"webBuildCommand": "## cd ../../ && yarn nx build airsmart-user"
}
]
}
with the correct appId. I’ve commented out the dependency and web build commands above. They caused the build to crash at that line when left in. Here’s that log results:
[05:46:35]: Installing Dependencies (in /builds/monkeytronics/air-smart/apps/airsmart-user)
[05:46:35]: $ yarn install && cd ../../ && yarn install
[05:46:35]: ▸ ➤ YN0000: · Yarn 4.0.1
[05:46:36]: ▸ ➤ YN0000: ┌ Resolution step
[05:46:36]: ▸ ➤ YN0001: │ Error: @capacitor/android@file:../../node_modules/@capacitor/android::locator=airsmart-user%40workspace%3A.: ENOENT: no such file or directory, lstat '/builds/monkeytronics/air-smart/node_modules/@capacitor/android'
[05:46:36]: ▸ ➤ YN0000: └ Completed
[05:46:36]: ▸ ➤ YN0000: · Failed with errors in 0s 82ms
[05:46:36]: Failed to install dependencies using custom command: 'yarn install && cd ../../ && yarn install'
Shell command exited with exit status 1 instead of 0.
➤ YN0000: · Yarn 4.0.1
➤ YN0000: ┌ Resolution step
➤ YN0001: │ Error: @capacitor/android@file:../../node_modules/@capacitor/android::locator=airsmart-user%40workspace%3A.: ENOENT: no such file or directory, lstat '/builds/monkeytronics/air-smart/node_modules/@capacitor/android'
➤ YN0000: └ Completed
➤ YN0000: · Failed with errors in 0s 82ms
I have a capacitor.config.json & ionic.config.json in the root of the app itself. And this all seems to hang together when I build and serve the app locally.
Apologies if very obvious issues in my approach, but full disclosure - it’s not my area of expertise (hence, hoping to be able to lean on Appflow to make life a little easier).
Perhaps there is a step by step nx example available which would help in isolating the issues with my approach???
1 post - 1 participant
Hello!
I am working on a small personal project and have run into a bit of an issue. When I build my app and host it locally with http-server none of the Ionic components show, although they are present in my browsers DOM with a 0px height. What makes it confusing to me is that when I had been testing using Ionic serve everything had been showing up as expected and there were no errors present in the developer console.
Going off other forum posts it seems like the issue might be in the angular.json file so I have attached that below
Any pointers on where this issue could be coming from would be appreciated
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"app": {
"projectType": "application",
"schematics": {
"@ionic/angular-toolkit:page": {
"styleext": "scss",
"standalone": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": {
"base": "www",
"browser": ""
},
"index": "src/index.html",
"polyfills": [
"src/polyfills.ts"
],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
}
],
"styles": ["src/styles.scss", "src/theme/variables.scss",
"node_modules/@ionic/angular/css/core.css",
"node_modules/@ionic/angular/css/normalize.css",
"node_modules/@ionic/angular/css/structure.css",
"node_modules/@ionic/angular/css/typography.css",
"node_modules/@ionic/angular/css/padding.css",
"node_modules/@ionic/angular/css/float-elements.css",
"node_modules/@ionic/angular/css/text-alignment.css",
"node_modules/@ionic/angular/css/text-transformation.css",
"node_modules/@ionic/angular/css/flex-utils.css",
"node_modules/@ionic/angular/css/display.css"],
"scripts": [],
"browser": "src/main.ts"
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
},
"ci": {
"progress": false
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "app:build:production"
},
"development": {
"buildTarget": "app:build:development"
},
"ci": {
"progress": false
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
}
],
"styles": ["src/global.scss", "src/theme/variables.scss"],
"scripts": []
},
"configurations": {
"ci": {
"progress": false,
"watch": false
}
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
}
}
}
}
},
"cli": {
"schematicCollections": [
"@ionic/angular-toolkit"
],
"analytics": false
},
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss"
},
"@ionic/angular-toolkit:page": {
"styleext": "scss"
},
"@angular-eslint/schematics:application": {
"setParserOptionsProject": true
},
"@angular-eslint/schematics:library": {
"setParserOptionsProject": true
}
}
}
1 post - 1 participant
Hi All,
In addition to placing my Ionic app on the App Store, I am also hosting it on a web server. However, I am unsure whether the issue I’m experiencing is related to the web server or if something can be done in Ionic to expedite loading on the web server.
One issue I noticed is that when I upload the www folder to the web server, I need to clear my PC cache and internet files every time; otherwise, the updated app does not appear, and the previous version is still loaded.
I believe this is related to caching, either on the server or in the browser. If it’s a browser issue, we can’t expect all users to clear their cache manually every time we make an update. It seems that the browser does not recognize the changes.
Is there something we can do, such as adding a tag to each page, to ensure that browsers acknowledge updates and always download the latest version?
Looking forward to your suggestions.
1 post - 1 participant
Hi,
I’ve been caught off guard by the new privacy manifest requirements, which are asking for 11 declarations—mostly related to Firebase.
Unfortunately, my app is somewhat outdated, as I haven’t had time to update all the dependencies. I’m currently using:
I see two possible options:
I’m on a tight deadline and have very limited time to resolve this. Any advice would be greatly appreciated!
Cheers,
1 post - 1 participant
Hello, our app is performing perfectly on the first launch.
But when we exit the app and launch again, it is extremely slow, UI renders very slowly, all pages/components when navigating to for the first time is extremely slow but gets normal once it is loaded.
Project is based on ionic 5 and cordova with angular9, we have tried updating to angular16, ionic6 and it does nothing to fix this. Some has said it has got to do something with webview, we have also tried their given solutions like enabling/disabling hardware/software acceleration, but no fix till now.
Note: After 1st launch and exit, if we clear all the app storage and launch again as first time, it is back to normal. Also, this issue is not there on emulator, only physical devices
Please help.
1 post - 1 participant
Hi Team,
Our enterprise application is built using the Angular, Ionic, and Capacitor tech stack. We offer both web and mobile apps to our end users. We have a requirement to transition our application to a micro frontend architecture. Using Angular Module Federation, we can convert our Angular application into micro frontends:
According to the Capacitor documentation, the Capacitor Federation plugin enables mobile apps to adopt a micro frontend approach:
With the Ionic team discontinuing its enterprise offerings and no longer onboarding new customers Important Announcement: The Future of Ionic’s Commercial Products - Ionic Blog, could you please provide guidance on how we can use the Capacitor Federation plugin?
Thank you.
1 post - 1 participant
Hi. Not sure where to ask this.
So I want to be able to launch my ionic app right away on my phone - without connecting via USB - directly via Wi-Fi (Wireless Debugging).
I managed to successfully build and launch it on my phone. But now the problem is that - it does not see the .env variables.
So - how to pass the variables so that when it is deployed via wifi it will see them? (Hardcoding is not an option)
launching via ionic capacitor run android --device with the help of adb
3 posts - 1 participant
In my Ionic app, I have an element I want to make sticky. Once the user scrolls the element into view, I want it to stay at the top of the screen no matter how far down the user scrolls.
I can’t get position: sticky to work.
I saw a thread on keeping content at the top, but the solution in that thread relies on ion-list. Is there a way to use sticky without using ion-list? Currently, my page consists of several divs and ion-toggle; the content I am trying to make sticky is a div tag that contains a single p tag and one line of text.
I’ve got a pretty complicated page structure and I hope to avoid rebuilding it to use ion-list just to make one thing sticky.
1 post - 1 participant
I’m trying to figure out how to always have light mode, regardless of the system setting. Currently, the ionic app switches between light and dark in accordance with the ios or android setting.
In the docs, there’s instructions on how to force dark mode, but not light. There’s an implication of that the light mode will be the default regardless of the system, but that’s not true at all.
1 post - 1 participant
Does anyone know what pricing or costs we might have if using Ionic Portals? The pricing does not seem to be very clear and we would like to know what we might be looking at if we decided to use Portals.
1 post - 1 participant
.
.
.
.
.
.
.
.
.
…
.
.
.
.
.
…
.
.
.
.
.
.
.
.
.
.
…
.
.
.
.
.
…
.
.
.
.
.
.
.
.
.
.
…
.
.
.
.
.
…
.
.
.
.
.
.
.
.
.
.
…
.
.
.
.
.
…
.
1 post - 1 participant
1 post - 1 participant