Hey guys!!

I am utilizing Vue alongside Ionic and employing ion-nav for navigation between pages outside the router as per the documentation (ion-nav: Nav View Component for Ionic Framework Apps). I have followed the tutorial and everything works as expected until I attempt to define PageTwo using defineComponent from Vue directly within PageOne.vue, instead of creating a separate file for the component.

Here’s a snippet of my code in PageOne.vue:

<template>
  <!-- ... rest of the template -->
  <ion-nav-link
    router-direction="forward"
    :component="component"
  >
    <ion-button>Go to Page Two</ion-button>
  </ion-nav-link>
</template>

<script lang="ts">
// ... imports
export default {
  data() {
    const PageTwo = defineComponent(() => `<h1>Page two</h1>`);
    return {
      component: markRaw(PageTwo)
    };
  },
};
</script>

The issue arises when navigating from PageOne to PageTwo - the exit animation for PageOne executes correctly, but PageTwo doesn’t render at all.

I’ve created a minimal reproduction repository to demonstrate the issue: https://github.com/onmax/ionic-ion-nav-bug-vue/blob/main/src/components/PageOne.vue

I am seeking assistance to resolve this rendering problem. Any insights or suggestions would be highly appreciated! Thanks

1 post - 1 participant

Read full topic

We have an ionic v6 App serving to both Android and iOS. I want to track user conversion events such as “Add to Cart”, “Purchases” for users coming from Facebook and Instagram Ads that we are promoting.

However, when I tried to add manual App events as suggested by Facebook (Android - Meta App Events - Documentation - Meta for Developers) , I observed this will work only on Native Android code and not on Ionic as these methods and object will have no relevance.

Can someone please guide me how to add “App Events” manually on my ionic code.

Any guidance , reference will be super appreciated

1 post - 1 participant

Read full topic

I am trying to test native custom codes. So I read documentation and tried to test it.
I tried everything as possible. But eventually it says Error: “kamer” plugin is not implemented on android.
My Android camera.java

package com.ionic.multi;

import com.getcapacitor.JSObject;
import com.getcapacitor.Plugin;
import com.getcapacitor.PluginCall;
import com.getcapacitor.PluginMethod;
import com.getcapacitor.annotation.CapacitorPlugin;

@CapacitorPlugin(name = “kamer”)
public class camera extends Plugin {

@PluginMethod()
public void echo(PluginCall call) {
    String value = call.getString("value");

    JSObject ret = new JSObject();
    ret.put("value", value);
    call.resolve(ret);
}

}
my MainActivity.class
package com.ionic.multi;
import android.os.Bundle;
import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
registerPlugin(com.ionic.multi.camera.class);
super.onCreate(savedInstanceState);
}
}
my vuejs ts
import { registerPlugin } from ‘@capacitor/core’;

const MultiCamera = registerPlugin(‘kamer’);

export default MultiCamera;

1 post - 1 participant

Read full topic

I am puzzled by this error from Google Play Store pre-launch report and would appreciate anyone who can help or point me to the right direction :

Exception java.lang.RuntimeException: java.lang.reflect.InvocationTargetException
at android.os.Handler.handleCallback (Handler.java:942)
at android.os.Handler.dispatchMessage (Handler.java:99)
at android.os.Looper.loopOnce (Looper.java:201)
at android.os.Looper.loop (Looper.java:288)
at android.os.HandlerThread.run (HandlerThread.java:67)
Caused by java.lang.reflect.InvocationTargetException:
at java.lang.reflect.Method.invoke
at com.getcapacitor.PluginHandle.invoke (PluginHandle.java)
Caused by java.lang.NullPointerException:
at com.getcapacitor.Plugin.getPermissionStates (Plugin.java)
at com.getcapacitor.Plugin.checkPermissions (Plugin.java)
at com.capacitorjs.plugins.pushnotifications.PushNotificationsPlugin.checkPermissions (PushNotificationsPlugin.java)

package.json (partial)
“@angular-devkit/architect”: “^0.1200.5”,
“@angular/common”: “~12.1.1”,
“@angular/core”: “~12.1.1”,
“@angular/forms”: “~12.1.1”,
“@angular/google-maps”: “^12.2.13”,
“@angular/platform-browser”: “~12.1.1”,
“@angular/platform-browser-dynamic”: “~12.1.1”,
“@angular/router”: “~12.1.1”,
“@awesome-cordova-plugins/android-permissions”: “^6.2.0”,
“@awesome-cordova-plugins/core”: “6.2.0”,
“@awesome-cordova-plugins/in-app-browser”: “^6.3.0”,
“@awesome-cordova-plugins/status-bar”: “^6.2.0”,
“@capacitor-community/fcm”: “^5.0.1”,
“@capacitor-community/firebase-analytics”: “^1.0.1”,
“@capacitor/android”: “^5.2.3”,
“@capacitor/app”: “^5.0.0”,
“@capacitor/browser”: “^5.0.0”,
“@capacitor/camera”: “^5.0.0”,
“@capacitor/core”: “^5.3.1”,
“@capacitor/device”: “^5.0.0”,
“@capacitor/filesystem”: “^5.0.0”,
“@capacitor/geolocation”: “^5.0.0”,
“@capacitor/haptics”: “^5.0.0”,
“@capacitor/ios”: “^5.0.0”,
“@capacitor/keyboard”: “^5.0.0”,
“@capacitor/network”: “^5.0.0”,
“@capacitor/preferences”: “^5.0.0”,
“@capacitor/push-notifications”: “^5.1.0”,
“@capacitor/share”: “^5.0.0”,
“@capacitor/splash-screen”: “^5.0.0”,
“@capacitor/status-bar”: “^5.0.0”,
“@ionic-enterprise/auth”: “^5.0.8”,
“@ionic-enterprise/identity-vault”: “^5.12.0”,
“@ionic-enterprise/secure-storage”: “^3.0.2”,
“@ionic-native/core”: “^5.36.0”,
“@ionic-native/file-opener”: “^5.36.0”,
“@ionic-native/social-sharing”: “^5.36.0”,
“@ionic-native/splash-screen”: “^5.36.0”,
“@ionic-native/status-bar”: “^5.36.0”,
“@ionic/angular”: “^6.2.6”,
“@ionic/storage”: “^3.0.6”,
“@ionic/storage-angular”: “^3.0.6”,

AndroidManifest.xml includes this permission

<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>

The codebase includes a requestPermissions() during initialization of the app:

  private async registerPush() {
    PushNotifications.requestPermissions().then( async ( requestPermissions ) => {
      if ( requestPermissions.receive === 'granted' ) {
        this.granted = true;
        await PushNotifications.register();
      } else {
        this.granted = false;
      }
    } );

    // Several PushNotifications.addListener follows
}

1 post - 1 participant

Read full topic

When we design a page with Swiper.js which is used in replace with Ion-Slides, the form has the checkbox , toggle and input fields . but when the Voice over is triggered in IOS device and the focus is placed over the checkbox or toggle control then the Voice over is reading all the tags present inside the swiper along with the control .

Please let us know incase we need to use any specific attribute in Swiper tags to control the excessive words been spelt in the voice over in IOS device

1 post - 1 participant

Read full topic

PROBLEM

We are in the process to move from Ionic 7 to Ionic 6 and we would like to handle the warnings that we are hitting with ion-label old syntax.

In our old original code we have the following component:

<ion-item>
    <ion-label position="floating">AAA</ion-label>
    <ion-input disabled="true" 
      type="text"
      value="BBB"
    ></ion-input>
  </ion-item>

And we are applying some change of styling like this:

ion-item > ion-label.label-floating,
ion-item > ion-label.label-stacked {
  transform: translateY(50%) scale(1) !important; // the scale is 1 instead of 0.75
}

We would like to achieve the same with the new modern syntax. How to do this?

What we have already tried

Try to use a shadow part

<div>NEW IONIC STYLE WITH LABEL</div>
  <ion-item>
    <ion-input
      disabled="true"
      type="text"
      value="BBB"
      labelPlacement="floating"
      label = "AAA"
    >
    </ion-input>
  </ion-item>

We noticed that ion-select has label as a CSS shadow part and we were able to create the previous style by using this CSS logic.

ion-select::part(label) {
  transform: scale(1) !important;
}

However ion-input does not seems to have the same CSS shadow part and the following CSS logic does not work:

ion-input::part(label) {
   transform: scale(1) !important;
}

Using a class in the slot label

We also tried to use slot with a class.

<div>NEW IONIC STYLE WITH SLOT</div>
  <ion-item>
    <ion-input
      disabled="true"
      type="text"
      value="BBB"
      labelPlacement="floating"
    >
      <div slot="label" class="aaa">AAA</div>
    </ion-input>
  </ion-item>

And the only possibility to achieve what to wish what to do the reverse operation against the ionic behavior.

.aaa{
 transform: translateY(-50%) scale(1.3) !important;
 }

But we would like to overwrite instead to revert the transformation already happened.

Using legacy mode

<div>OLD IONIC STYLE WITH LEGACY</div>
  <ion-item>
    <ion-label position="floating">AAA</ion-label>
    <ion-input disabled="true" 
      type="text"
      value="BBB"
      legacy="true"
    ></ion-input>
  </ion-item>

This works, but we would like to avoid to use legacy=“true” if it is avoidable.

QUESTION

Do you have any idea how to solve the issue?
Having a shadow part for label under ion-input maybe would solve our issue.
Thank you for your attention.

1 post - 1 participant

Read full topic

I am having a problem with my Angular Ionic v5 App. Whenever I try to compile it with the command ionic cordova build android --prod, I get the following error:

ERROR in Cannot read properties of undefined (reading 'loadChildren')

I believe that the error lies within this module for the class ‘HomeLinkingPosPage’:

@NgModule({
    declarations: [HomeLinkingposPage],
    imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        RouterModule.forChild([]),
        SharedModule
    ],
    providers: [{
        provide: ROUTES,
        useFactory: configHomeRoutes,
        deps: [AuthService],
        multi: true
    }]
})
export class HomeLinkingposPageModule {
}

export function configHomeRoutes(authService: AuthService) {
    let route: Routes;
    if (authService.currentRol.user_type === 'end_user') {
        route = [{
            path: '',
            loadChildren: () => import('../home-end-user/home-end-user.module').then(m => m.HomeEndUserPageModule),
        }];
    } else if (authService.currentRol.user_type === 'agent_user') {
        route = [{
            path: '',
            loadChildren: () => import('../home-agent-user/home-agent-user.module').then(m => m.HomeAgentUserPageModule),
        }];
    } else if (authService.currentRol.user_type === 'company_user') {
        route = [{
            path: '',
            loadChildren: () => import('../home-company-user/home-company-user.module').then(m => m.HomeCompanyUserPageModule),
        }];
    }

    return route;
}

This is the HomeLinkingposPage class:

import {AfterViewInit, Component} from '@angular/core';
import {Router} from '@angular/router';
import {AuthService} from 'src/app/providers/auth/auth.service';

@Component({
    selector: 'app-home-linkingpos',
    template: '',
})
export class HomeLinkingposPage implements AfterViewInit {

    constructor(private router: Router,
                public authService: AuthService) {

        if (this.authService.currentRol.user_type === 'end_user') {
            router.navigateByUrl('home-end-user');
        }

        if (this.authService.currentRol.user_type === 'agent_user') {
            router.navigateByUrl('home-agent-user');
        }

        if (this.authService.currentRol.user_type === 'company_user') {
            router.navigateByUrl('home-company-user');
        }
    }

    ngAfterViewInit() {
        if (this.authService.currentRol.user_type === 'end_user') {
            this.router.navigateByUrl('home-end-user');
        }

        if (this.authService.currentRol.user_type === 'agent_user') {
            this.router.navigateByUrl('home-agent-user');
        }

        if (this.authService.currentRol.user_type === 'company_user') {
            this.router.navigateByUrl('home-company-user');
        }
    }
}

And this is its route in the app’s app-routing.module:

{
        path: 'home-linkingpos',
        loadChildren: () => import('./linkingpos/home-linkingpos/home-linkingpos.module').then(m => m.HomeLinkingposPageModule),
    },

I can compile the app just fine when using ionic cordova build android but I always get the same loadChildren error when trying to compile for production. I am new to Ionic and have spent days trying to fix this issue to no avail.

1 post - 1 participant

Read full topic

Hey Guys!

I’m currently building an app with Ionic Vue and Supabase for data storage. Furthermore i used the supabase-js and realtime-js library.

I declared my database as being realtime and followed the documentation strictly. I also tested whether i am able to retrieve data with my supabase-client via the supabase realtime inspector, where i luckily saw that my client indeed retrieves data.
Nevertheless, when i instantiate a supabase subscription from within my “onMounted”-Hook like so:

subscriptionInserts.value = supabase
      .channel('schema-db-changes')
      .on(
          'postgres_changes',
          {
            event: '*',
            schema: 'public',
          },
          (payload) => console.log(payload)
      )
      .subscribe((status, err) => {
        if(err) console.log("SUBSCRIPTION ERROR:", err);
        else console.log("SUBSCRIPTION STATUS CHANGED:", status);
      })

I get this result in my browser console : SUBSCRIPTION STATUS CHANGED: SUBSCRIBED but every time after exactly 10 seconds it gets followed by this result: SUBSCRIPTION STATUS CHANGED: CLOSED

Does anybody have an idea why my connection is always closed after 10 seconds? Within those 10 seconds everything works fine, but no events are triggered anymore as soon as the 10 seconds expire.
I also tried realising my subscription within different hooks and listen to different events/tables. Nothing changed my issue.
I feel like this is either a VueJS problem or related to Ionic.

I’d very much appreciate your guys help. Thank you in advance!

1 post - 1 participant

Read full topic

(topic deleted by author)

1 post - 1 participant

Read full topic

Currently i have using two plugin but can get expect smoothness.

Plugin 1 :- Pintura Image Editor, a Powerful JavaScript Image Editor SDK
Plugin 2 :- https://img.ly/

Can someone please provide guidance on how to implement image editing features like Instagram’s in an Ionic Framework
project using Capacitor? Any code examples, libraries, or best practices would be greatly appreciated.

Thank you for your help!

1 post - 1 participant

Read full topic

Hi, I am using https://dashboard.ionicframework.com/ to deploy the project (PCARDReceiptUpload). When I built the project , It was always successfully built on the version Linux 2023.06 or earlier for Android devices. But it failed on the latest version Linux 2023.10. error message:
…
java.lang.NumberFormatException: Not a number: 33x…
…
java.lang.NumberFormatException: Not a number: 34x
…

Build-tool 34.0.0 is missing DX at /opt/android-sdk/build-tools/34.0.0/dx
FAILURE: Build failed with an exception

It will be greatly appreciated if you help me out!

1 post - 1 participant

Read full topic

We have a bunch of clicky components that can render bits of themselves as links.

Different frameworks use specific link components, such as router-link, nuxt-link, Link, etc. Can we inject those tags into a stencil web component or do we need to use @click events to push to the router state instead?

1 post - 1 participant

Read full topic

Hello Ionic Community! I’ve been working on my app and I’ve tried using the aria-hidden="true" attribute to remove the ‘textview’ voiceover when TalkBack is enabled. However, it doesn’t seem to be working as expected. Has anyone encountered this issue before or found a solution?
We are using ionic 6.20.1 and capacitor 4.7.0 with Vue 3.3.7
Your expertise would be immensely helpful. Thank you in advance for your assistance!

1 post - 1 participant

Read full topic

I’m trying to add padding to the left side of the ion-select options, but setting the --padding-start property on the ion-select element in the css doesn’t do anything. Here is my HTML:

<ion-item>
  <ion-label>Repeats every</ion-label> 
  <ion-select class="freq-dropdown" interface="popover">
    <ion-select-option [value]="Frequency.WEEKLY">Week</ion-select-option>
    <ion-select-option [value]="Frequency.MONTHLY">Month</ion-select-option>
  </ion-select>
</ion-item>

My CSS:

.freq-dropdown {
    --padding-start: 10px !important;
}

I’m using “@ionic/angular”: “^6.7.5” and “@ionic/core”: “^6.7.5”. I’m not looking to upgrade to v7 right now. But I’m using the latest version 6. I’m not sure what I’m missing in my code to add the custom padding to the dropdown.

1 post - 1 participant

Read full topic

ios Build error
[19:38:31]: 859: unexpected token at '[warn] Using the iOS project root for the public directory is deprecated.
Please follow the Upgrade Guide to move public inside the iOS target directory: Updating to 3.0 | Capacitor Documentation

the guide to change the ios directory ist only with xcode. But i work on Windows. How can I change the public directory with Windows?

1 post - 1 participant

Read full topic

hola estoy construyendo un formulario en mi aplicacion y los ion-input no me los esta tomando de manera adecuada, aparecen en el esqueleto de la aplicacion pero no los toma como entradas, alguna idea de como solucionar esto?

1 post - 1 participant

Read full topic

Currently i have using two plugin but can get expect smoothness.

Plugin 1 :- Pintura Image Editor, a Powerful JavaScript Image Editor SDK
Plugin 2 :- https://img.ly/

Can someone please provide guidance on how to implement image editing features like Instagram’s in an Ionic Framework
project using Capacitor? Any code examples, libraries, or best practices would be greatly appreciated.

Thank you for your help!

1 post - 1 participant

Read full topic

I have just created a fresh Ionic ReactJS app! when I open my app in WebStorm IDE it gives me this error. But when I run (ionic serve ) the application it’s working fine.

I have tried this solution in javascript - Must use import to load ES Module .eslintrc.js - Stack Overflow] but not working for me.

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/userionic-react/.eslintrc.js from /Users/bs1007/VS/quizsense-mobile/node_modules/@eslint/eslintrc/dist/eslintrc.cjs not supported.
.eslintrc.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename .eslintrc.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/bs1007/VS/quizsense-mobile/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

Environment:

Ionic:

Ionic CLI : 7.1.1 (/Users/rahadur/.nvm/versions/node/v16.17.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 7.5.3

Capacitor:

Capacitor CLI : 5.5.1
@capacitor/android : not installed
@capacitor/core : 5.5.1
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run (update available: 2.0.0) : 1.7.4

System:

NodeJS : v16.17.0 (/Users/bs1007/.nvm/versions/node/v16.17.0/bin/node)
npm : 8.19.1
OS : macOS Unknown

1 post - 1 participant

Read full topic

Hi to All,
Capacitor browser plugin (latest version, @capacitor/browser) works well but it handles only browserFinished and browserPageLoaded listener.

I actually need to have a listener for messages since I’m using it for external authentication in a Ionic Angular application.

Has anyone implemented others events listener at the plugin level (Android as CustomTabsCallback and iOS as SFSafariViewController)?

In case it’s not possible, is there a similar Angular plugin that allows for this?

Thank you All

1 post - 1 participant

Read full topic

hi guys. I have strange problem with my ionic 7 app with cordova engine and angular.

the problem only occurs on iOS devices. I can’t replicate it on the ios simulator.

when the application goes into the background and is reopened after some time, in some cases a white screen appears and it is necessary to force close the app.

I’ve read a lot of things but I can’t reproduce the problem on the simulator and I don’t understand how to solve it

Has anyone of you had the same problem or can you help me?

please help me

ionic info

Ionic:

   Ionic CLI                     : 7.1.1 (C:\tools\nvm\v16.14.0\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 7.5.2
   @angular-devkit/build-angular : 16.2.8
   @angular-devkit/schematics    : 16.2.8
   @angular/cli                  : 16.2.8
   @ionic/angular-toolkit        : 9.0.0

Cordova:

   Cordova CLI       : 12.0.0 (cordova-lib@12.0.1)
   Cordova Platforms : android 11.0.0, browser 6.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 7 other plugins)

Utility:

   cordova-res                          : 0.15.4
   native-run (update available: 1.7.3) : 1.7.2

System:

   Android SDK Tools : 26.1.1 (C:\Users\myuser\AppData\Local\Android\Sdk)
   NodeJS            : v16.14.0 (C:\Program Files\nodejs\node.exe)
   npm               : 8.3.1
   OS                : Windows 10

1 post - 1 participant

Read full topic