Hello All.
I always use in IonAlert the mode=“ios” but what happens when the app runs in an android devices. Does it works in mode ios? or it will use mode “md”? or it wont work?
I would like it to work in android with ios mode because it is better visually
Thanks in advance.
2 posts - 2 participants
Hi,
We are tying to use ionic native app in app browser to login to site. Is there anyway to remember usename with this flow? We do get refresh token for biometric, but if biometric is not enabled it opens us in app browser for users to put in username and password. I wonder if there is anyway to pre populate username here?
1 post - 1 participant
I need to publish my new app but I received a error note from Apple for ios platform.
ITMS-90901: Missing full-screen support for the latest iPad mini display. The “OneToOne.app” bundle includes UIRequiresFullScreen=YES in the Info.plist or supports only a subset of UISupportedInterfaceOrientations, and is built with the 14.4 SDK. To take advantage of the full screen size, recompile with Xcode 13 and the SDK for iPadOS 15 or later.
I have xCode 12.4. I prefer not update my iOS system for now.
What is the best soluction? Can I configure ionic project to solve this issue or I need to configure my ios app into xcode?
Thanks
L
1 post - 1 participant
Hello, could someone tell me how I can modify the icon and the background splash screen of an ionic 6 vue application?
1 post - 1 participant
Hello Ionic community!
I have a quick question regarding Ionic PWAs.
Are there any build hooks I can use that are specific to the PWA target?
I’d like to add a hook just for building the PWA version of the app that updates the base href (for Firebase deployment), so I don’t have to do this manually every time. I don’t want this hook script to run for the IOS or Android builds, just PWA. Is this possible?
2 posts - 1 participant
Hi,
I am trying to connect with ionic cordova-plugin-bluetooth-serial 0.4.7 to connect with mi smart scale. I can scan, connect but can’t read data. how can I read mi smart scale data from ionic?
Kindly pls let me know.
Thank you!
Hema Wa Thi
1 post - 1 participant
I launched several ‘Ubuntu 20’ servers, and every time I’m getting the same error when starting ionic from ‘ionic start’.
It asks me whether I want to use the app creation wizard, and I type y, and proceed, then it get stuck there.
I tried with different other options, like to start in tabs app, and in react app etc… and it always freezes at some point. Never was able on any of my machines to get it to work.
I reinstalled nodejs, npm, tried with several older and newer versions of node and npm, and I tried installing @ionic/cli-latest even. I tried running ionic on several fresh machines as a user without root privileges, and even as root, nothing worked.
I installed Node 16, and tried with 17, and 12, and 10.
for npm I tried with 8.4, and 8.1.2, and 6.x
I tried the nvm method mentioned in one of the pages of ionic documentation.
This almost never happens when I use Reactjs or Nextjs or many other packages, as on the same machines I would add or remove these and run them without problems.
I ran
$ ionic start --verbose
to see what’s happening, and I got this:
ionic:utils-network checking for open port on 0.0.0.0:8123 +0ms
ionic:utils-network checking for open port on 127.0.0.1:8123 +7ms
ionic:utils-network checking for open port on ::1:8123 +1ms
ionic:utils-network checking for open port on 178.128.34.217:8123 +4ms
ionic:utils-network checking for open port on 10.16.0.6:8123 +1ms
ionic:utils-network checking for open port on fe80::c7f:61ff:fe61:7f8c:8123 +0ms
ionic:utils-network error while checking fe80::c7f:61ff:fe61:7f8c:8123: Error: listen EINVAL: invalid argument fe80::c7f:61ff:fe61:7f8c:8123 at Server.setupListenHandle [as _listen2] (net.js:1299:21) at listenInCluster (net.js:1364:12) at doListen (net.js:1501:7) at processTicksAndRejections (internal/process/task_queues.js:85:21) { code: ‘EINVAL’, errno: ‘EINVAL’, syscall: ‘listen’, address: ‘fe80::c7f:61ff:fe61:7f8c’, port: 8123 } +3ms
ionic:utils-network checking for open port on 10.106.0.3:8123 +2ms
ionic:utils-network checking for open port on fe80::3caa:edff:fed7:a269:8123 +1ms
ionic:utils-network error while checking fe80::3caa:edff:fed7:a269:8123: Error: listen EINVAL: invalid argument fe80::3caa:edff:fed7:a269:8123 at Server.setupListenHandle [as _listen2] (net.js:1299:21) at listenInCluster (net.js:1364:12) at doListen (net.js:1501:7) at processTicksAndRejections (internal/process/task_queues.js:85:21) { code: ‘EINVAL’, errno: ‘EINVAL’, syscall: ‘listen’, address: ‘fe80::3caa:edff:fed7:a269’, port: 8123 } +0ms
Thanks for any help.
1 post - 1 participant
Hello,
I’m new to Vue and Ionic so I’m learning as I go.
I want to fit some text into a certain DIV i have on my page. But I cannot seem to make it work.
I want with page load to run a certain function so it can check whether or not the text need to be fitted.
I have found the following function:
const input = document.querySelector('input');
const output = document.querySelector('.output');
const outputContainer = document.querySelector('.container');
function resize_to_fit() {
let fontSize = window.getComputedStyle(output).fontSize;
output.style.fontSize = (parseFloat(fontSize) - 1) + 'px';
if(output.clientHeight >= outputContainer.clientHeight){
resize_to_fit();
}
}
function processInput() {
output.innerHTML =this.value;
output.style.fontSize = '100px'; // Default font size
resize_to_fit();
}
input.addEventListener('input', processInput);
Now I have incorporated this into my app the following way:
...
<ion-text class="outputContainer">
<div class="output" style="word-break: break-all; word-wrap: break-word;">{{key}}</div>
</ion-text>
...
export default {
components: {
IonPage,
IonContent,
IonNavLink,
IonIcon,
IonText
},
created(){
return this.$store.getters.getStorageKey;
},
setup() {
return {
cog
};
},
mounted() {
this.resize_to_fit(".output", ".outputContainer");
},
computed: {
aandoening(){
return this.$store.getters.key;
}
},
methods:{
resize_to_fit(divOutputClassName, divOutputContainerClassName) {
const output = document.querySelector(divOutputClassName);
const outputContainer = document.querySelector(divOutputContainerClassName);
let fontSize = getComputedStyle(output).fontSize;
output.style.fontSize = (parseFloat(fontSize) - 1) + 'px';
if(output.clientHeight >= outputContainer.clientHeight){
//this.resize_to_fit(".output", ".outputContainer");
}
}
}
}
You see I have commented out that last line because I got an error in the Vue console:
Uncaught (in promise) RangeError: Maximum call stack size exceeded
When I remove that line it doesn’t work, nothing gets changed, font-size doesn’t get changed.
I am pretty new to this so I’m probably doing things wrong, but I cannot seem to figure it out. If someone could help me, that would be great. Thanks.
1 post - 1 participant
Hello, newbie here,
I want to obfuscate class in Android build, i’ve been searching in internet the whole day, all i found is just turn on minifyEnabled flag di build.gradle to true. But when i activate it, the all plugins i use in my application cannot be load.
Is there any suggestion?
1 post - 1 participant
Can anyone help me to how I rank my website in the top 5 in SERP?
1 post - 1 participant
Hello World,
this deep links i tried but not very successful. if i use whatsapp to click the url link, the App will open, but not happening in Chrome or Safari browser for iPhone
this is the url link to open the app
www.abc.com/logins/login
the above link i tried to modify the apple-app-site-association to specify some paths to the following
{
"applinks": {
"apps": [],
"details": [
{
"appID": "abc",
"paths": ["*" ]
},
{
"appIDs": [ "abc" ],
"components": [
{
"#": "no_universal_links",
"exclude": true,
"comment": "Matches any URL whose fragment equals no_universal_links and instructs the system not to open it as a universal link"
},
{
"/": "/logins/*",
"comment": "Matches any URL whose path starts with /logins/"
},
{
"/": "/logins/login/*",
"exclude": true,
"comment": "Matches any URL whose path starts with /logins/login/ and instructs the system not to open it as a universal link"
}
]
}
]
},
"webcredentials": {
"apps": [ "abc" ]
}
}
the following are the flow chat for your reference
step 1: user register at the app
step2 : after user register complete, an activation url will send to their Mail Box, example GMAIL
step 3 : at IOS version, when i clicked the activation url link, GMAIL will prompt an modal to Open link with, Chrome or Safari,
step 4a : if i select Chrome, it will redirect to Chrome to activate the account with a thank you page + button to click to Open App ('which did not work)
step 4b : if i select Google LLC, it will redirect to Chrome LLC to activate the account with a thank you page + button to click to Open App ('this is Working!!!)
step 4c : if i select Safari it will redirect to Safari to activate the account with a thank you page + button to click to Open App ('It only works if long press the button which will prompt Open or Open in App)
step 4a, 4b, 4c, in Android version has no issues at all, at least it will ask User to Open With options,
IOS does not have… seems like Chrome App ios is not handling the deep links, Whatsapp etc is working if click www.abc.com/logins/login
where am i missing out? based on your opinion?
thank you for anybody’s help 
1 post - 1 participant
ion-slide deprecated in I7.
So i replace ion-slldes with swiper in I6/Angular
But now i would like to add a slide dynamically
When you read Swiper API
Manipulation module adds useful Swiper methods to manipulate slides. It makes sense to use it only with Swiper Core version, not intended to be uses with Swiper Angular, React, Svelte or Vue.
Any idea ?
1 post - 1 participant
Hi, im building a web app with ionic and vue but found a brick wall when it comes to styles. The only way suggested by ionic to alter the global config on vue (Config | Ionic Documentation) is when first installing ionic vue. As i didnt do this when first creating my app, do i need to create a whole new app and switch the files over or is there a way to change the global config like in angular ionic that you can alter the app.module.ts file?
1 post - 1 participant
I would like to get access to the Capacitor group on Slack: https://getcapacitor.slack.com/
2 posts - 2 participants
When I click the next and previous arrow buttons or swipe left or right on the ion-datetime component it skips every other month. This behavior can be replicated on the documentation page ion-datetime: Ionic API Input for Datetime Format Picker
1 post - 1 participant
Is it possible to embed an Ionic Portal inside of an Ionic Framework 6 React App?
I would like to embed a few pages from a Shopify Store inside my Ionic Framework iOS and Android apps (on web we will just redirect you to a subdomain). We want the app experience to feel cohesive and not kick you out to the system default web browser.
Unfortunately, Shopify has their x-frame-options set to Deny and I am unable to change this, so an iframe isn’t an option.
I’ve looked at the various flavors of inAppBrowser, but it doesn’t look like there is any way to limit the size to a certain viewport in the Ionic App or overlay Ionic React components over the top of the browser? It always takes over the whole screen which breaks the seamless “in-app” experience that I am aiming for.
Ionic Portals has some images that suggest it can do EXACTLY what I want, unfortunately, it is aimed at native developers (which we don’t have a ton of experience on our team) and doesn’t include any instructions if you want to embed the portal via the JavaScript side of the app.
is there another plugin / npm module that I can look at to get this capability? Or are there some docs I’ve missed for Portals?
Any help, code examples, or suggestions greatly appreciated!
1 post - 1 participant
I am writing a Capacitor plugin for an Ionic Vue application. My question is pretty simple. I am getting an error when running “ionic build” in my Ionic app when it is trying to register the callback to subscribe to plugin events: “TS2339: Property ‘addListener’ does not exist on type ‘MyPlugin’.”
I have the following bit of code in my Ionic Vue project:
import { MyPlugin } from "@valmarc/myplugin"
.....
MyPlugin.addListener("myPluginEvent", myCallback)The TypeScript compiler error occurs on the “addListener” call above. The above code was written against following capacitor documentation: Capacitor - build cross platform apps with the web.
The error is not particularly surprising, because the datatype of “MyPlugin” is defined as follows in the auto-generated TypeScript file “index.ts”:
import { registerPlugin } from '@capacitor/core';
import type { MyPluginPlugin } from './definitions';
const MyPlugin= registerPlugin<MyPluginPlugin>('MyPlugin', {
web: () => import('./web').then(m => new m.MyPluginWeb()),
});
export * from './definitions';
export { MyPlugin };The above auto-generated code seems to assign an object of type “MyPluginPlugin” to the MyPlugin variable, which is exported. The type “MyPluginPlugin” is defined as follows in the “definitions.ts” file:
export interface MyPlugin {
createState(options: { source: string}): Promise<{ id: number}>;
callFunction(options: { id: number, function: string}): Promise<{ result: string}>;
closeState(options: { id: number}): Promise<void>;
}My plugin interface above does not define the “addListener” method that is referred to in the Capacitor documentation I referred to above.
So obviously I am missing something here. Where is the “addListener” method supposed to be declared on the object that is returned from registerPlugin? Unless the addListener method is declared somewhere, there is going to be a TypeScript error.
1 post - 1 participant
The first time I install my capacitor app on a device the app works correctly. But if I close my app, and open again the app don’t work anymore and get stuck on the white screen forever.The app also works fine in debug mode.
If I put debug point anywhere in the listener I get the output and even when I run the app for the first timeI get the output but from the second time if I run the app I get clank screen.
I am using TransferListner in my plugin and added plugin to capacitor app. This listener is not firing the second time and time after that.I have this problem on Android. I have tried so many solutions like adding permissions in manifest file,invalidate cache/restart, clean and rebuild…etc but still having same problem.
Can anyone suggest or help me resolve this issue.
1 post - 1 participant
I’ve built a custom component which depends on @ionic/core to show some buttons.
When compiling the component, I’ve imported the whole ionic library and it works fine, but it also generates the component with all unnecessary ion- components.
As discussed in https://github.com/ionic-team/stencil/issues/3233 with @sean-perkins I’ve tried to import only the required components. The component can be found at https://github.com/appfeel/pdf-component and I’ve made a branch optim-deps with the proposed solution, which does not output any ion- component from @ionic/core:
import 'ionicons';
import { defineCustomElement as ionBtnCustomComponent } from '@ionic/core/components/ion-button.js';
import { defineCustomElement as ionBtnsCustomComponent } from '@ionic/core/components/ion-buttons.js';
export { Components, JSX } from './components';
ionBtnCustomComponent();
ionBtnsCustomComponent();
In this case no ionic component is built and the necessary ion-button and ion-buttons components don’t render. I’ve also tried to place initialize() in index.ts with same result:
import { initialize } from "@ionic/core/components";
initialize();
Also tried to place initialize() inside component constructor with same result.
Is there any option to build the component with only the necessary components from @ionic/core?
1 post - 1 participant