Hey good people of Ionic,
We pushed our new app packed with Capacitor to the App Store and Google Play. We have an ANR (Application Not Responding) issue with a Motorola Sabahl which I believe indicates a problem with the plugin manager and bridge activity of the Capacitor on the Motorola Sabahl device.
Based on the stack trace, it seems that the issue occurs during the initialization of the plugin classes. The error is happening at com.getcapacitor.PluginManager.loadPluginClasses . This suggests that there may be an issue with the way the plugin classes are loaded or registered within the Capacitor framework. I included the error in the thread.
I know it is hard to debug hands off but is this something you can help us with or give us some tips? thank you in advance.
We are using:

Node version 18,
"@angular/core": "13.3.11",
"@ionic/angular": "5.6.8",
"@capacitor-community/file-opener": "1.0.5",
"@capacitor-firebase/analytics": "5.1.0",
"@capacitor-firebase/messaging": "5.1.0",
"@capacitor/android": "5.5.0",
"@capacitor/app": "5.0.6",
"@capacitor/core": "5.5.0",
"@capacitor/haptics": "5.0.6",
"@capacitor/ios": "5.5.0",
"@capacitor/keyboard": "5.0.6",
"@capacitor/local-notifications": "5.0.6",
"@capacitor/preferences": "5.0.6",
"@capacitor/screen-reader": "5.0.6",
"@capacitor/splash-screen": "5.0.6",
"@capacitor/status-bar": "5.0.6",
"@capacitor/text-zoom": "5.0.6",

And the error is:

#00  pc 0x0000000000536054  /apex/com.android.art/lib64/libart.so (art::DumpNativeStack(std::__1::basic_ostream<char, std::__1::char_traits<char> >&, int, BacktraceMap*, char const*, art::ArtMethod*, void*, bool)+128)
  #01  pc 0x00000000006ef5e4  /apex/com.android.art/lib64/libart.so (art::Thread::DumpStack(std::__1::basic_ostream<char, std::__1::char_traits<char> >&, bool, BacktraceMap*, bool) const+236)
  #02  pc 0x00000000006fce70  /apex/com.android.art/lib64/libart.so (art::DumpCheckpoint::Run(art::Thread*)+208)
  #03  pc 0x00000000004000f0  /apex/com.android.art/lib64/libart.so (art::Thread::RunCheckpointFunction()+140)
  #04  pc 0x0000000000417108  /apex/com.android.art/lib64/libart.so (art::ClassLinker::InitializeClass(art::Thread*, art::Handle<art::mirror::Class>, bool, bool)+6828)
  #05  pc 0x00000000005ff5cc  /apex/com.android.art/lib64/libart.so (art::Class_classForName(_JNIEnv*, _jclass*, _jstring*, unsigned char, _jobject*) (.__uniq.181829539739573773940154555818377431209)+1120)
  at java.lang.Class.classForName (Native method)
  at java.lang.Class.forName (Class.java:454)
  at java.lang.Class.forName (Class.java:379)
  at com.getcapacitor.PluginManager.loadPluginClasses (PluginManager.java:29)
  at com.getcapacitor.BridgeActivity.onCreate (BridgeActivity.java:31)
  at android.app.Activity.performCreate (Activity.java:8328)
  at android.app.Activity.performCreate (Activity.java:8307)
  at android.app.Instrumentation.callActivityOnCreate (Instrumentation.java:1384)
  at android.app.ActivityThread.performLaunchActivity (ActivityThread.java:3735)
  at android.app.ActivityThread.handleLaunchActivity (ActivityThread.java:3892)
  at android.app.servertransaction.LaunchActivityItem.execute (LaunchActivityItem.java:101)
  at android.app.servertransaction.TransactionExecutor.executeCallbacks (TransactionExecutor.java:137)
  at android.app.servertransaction.TransactionExecutor.execute (TransactionExecutor.java:97)
  at android.app.ActivityThread$H.handleMessage (ActivityThread.java:2378)
  at android.os.Handler.dispatchMessage (Handler.java:106)
  at android.os.Looper.loopOnce (Looper.java:201)
  at android.os.Looper.loop (Looper.java:288)
  at android.app.ActivityThread.main (ActivityThread.java:8048)
  at java.lang.reflect.Method.invoke (Native method)
  at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run (RuntimeInit.java:703)
  at com.android.internal.os.ZygoteInit.main (ZygoteInit.java:911)

1 post - 1 participant

Read full topic

followed the ionic docs to use swiper, registered it in my app, imported custom elements schema. Everything seems to be working fine until when i try using an effect in the docs it says i should just be able to say effect=‘flip’ and it should work - but it doesnt, the slider just stops working and loos a little odd.

import {register} from ‘swiper/element/bundle’

register();

my code to register

1 post - 1 participant

Read full topic

Hello, I have recently started to install my workspace on VSCode.

• connected to SSH with my VM Debian
• Ionic framework Anglular , Standalone project is already created
• All the node capacitors are installed throught npm capacitor-core, android, ios. The web app is already created to work.

And I wanted to start also my project with capacitor to work on mobile versions. And i am getting this error after installed the recomendation through capcitors.

1 post - 1 participant

Read full topic

This is the announcement for Launch of new Speech to text and OCR mobile app using Ionic 7. It supports multiple languages, converts your voice to text that can be share or social media. The OCR provides way to extract text from image or capture image using camera containing text to get text from image.

This app uses Ionic 7 + Angular + Capacitor for development.
Published at https://play.google.com/store/apps/details?id=voice.transcriber

your reviews are most welcomed. Thanks to Ionic team for such great technology and support.

1 post - 1 participant

Read full topic

Ionic version:

7.1.1

Current behavior:
This is only happening on iOS emulator and real devices
When I push to a new page and go back, the whole page or parts of the page are flickering.

Expected behavior:

No flickering on go back

Steps to reproduce:

Run the project from the repo below, install with yarn and run on iOS device. Press the next button and then back repeatedly.

Code to reproduce:

GitHub - joebasset/iOS-Flicker-Bug

Video example:

ionic info:

Ionic:

Ionic CLI : 7.1.1 (/opt/homebrew/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 7.5.6

Capacitor:

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

Utility:

cordova-res : 0.15.4
native-run (update available: 2.0.0) : 1.7.4

System:

NodeJS : v20.3.0 (/opt/homebrew/Cellar/node/20.3.0_1/bin/node)
npm : 9.6.7
OS : macOS Unknown

2 posts - 2 participants

Read full topic

Hello everyone, how are you doing?

I have a question regarding the use of the Preferences plugin in Ionic > [Preferences Capacitor Plugin API | Ionic Documentation](https://Plugin Capacitor Preferences) , which employs UserDefaults on iOS and SharedPreferences on Android. My concern revolves around the interoperability between native code (Android or iOS) and Ionic, particularly when it comes to saving data natively.

For instance, when using SharedPreferences on Android, I would like to confirm if it’s possible to retrieve this data directly in Ionic. The logic is that the Ionic Preferences plugin utilizes Android’s SharedPreferences, so theoretically, accessing the natively stored data should be feasible.
Exemple native code. (android)

import android.content.Context;
import android.content.SharedPreferences;

public class SharedPreferencesManager {
    private static final String PREFS_NAME = "MyPrefs";

    public static void saveData(Context context, String key, String value) {
        SharedPreferences.Editor editor = context.getSharedPreferences(PREFS_NAME, Context.MODE_PRIVATE).edit();
        editor.putString(key, value);
        editor.apply();
    }

    public static String getData(Context context, String key) {
        SharedPreferences prefs = context.getSharedPreferences(PREFS_NAME, Context.MODE_PRIVATE);
        return prefs.getString(key, null);
    }
}

1 post - 1 participant

Read full topic

Urgent help required i wants to add some secret keys in my frontend for packages to work.
but i am not able to use .env files I tried many solutions but they didn’t worked.

I made a new file .env and add an variable

REACT_APP_SITE_KEY = “your site key”

i am using it in one of my components like announcement component like this

console.log (process.env.REACT_APP_SITE_KEY)

it is giving me error !

‘process is not defined’.

please help me in this
I am using ionic v 7.1.1

1 post - 1 participant

Read full topic

I use dependencies:

“@maskito/core”: “^1.9.0”,
“@maskito/phone”: “^1.9.0”,
“@maskito/vue”: “^1.9.0”,

the result: I can’t enter any numbers (after +[number] . . . .)

1 post - 1 participant

Read full topic

Hi!

Let’s say I want to schedule a local notification where the notification “sends” a new word every day to the user, and these words exist locally in my app (in a .json file).

Is it possible to schedule a local notification that gets a new random word from the .json file each time a notification is “sent” to the user?

Like this:

LocalNotifications.schedule({
  notifications: [
    {
      title: 'Word of the Day',
      body: getWordOfTheDay(),
      id: 1,
      schedule: {
        on: {
          hour: 9,
          minute: 0
        }
      }
    }
  ]
});

Or is that not possible with local notifications?

Or would I need to schedule multiple notifications with different id:s for future dates (let’s say 1 year forward)? And then maybe generate new scheduled notifications whenever the user opens the app (and if they don’t open the app for a year they stop getting notifications)?

Thank you!

1 post - 1 participant

Read full topic

i m using ion-picker and i have added 2 buttons on that picker, one is ‘ok’ button and another is ‘cancel’, how to bind keyboard enter to ‘ok’ button?

let pickerOptions = {
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel'
      },
      {
        text: 'Ok',
        handler: (selectedItem: any) =>
        {
          //
        }
      }
    ]
  };
let picker = await this.pickerController.create(pickerOptions);
picker.present();

1 post - 1 participant

Read full topic

I am using ion-modal and ion-picker, in some scenarios both will be popped up, in that case how to find out which one is top most overlay?

1 post - 1 participant

Read full topic

hey

I want to provide a Chromecast and Airplay button in-app of my Ionic 6 app, that streams the screen to a compatible device. Not a video file that you provide a mp4 for, but the actual screen of the app, which has a p5.js sketch inside it. Is this possible? I see a few capacitor and cordova plugins that stream video files, but not the actual screen.

cheers
david

1 post - 1 participant

Read full topic

Greetings,

I’m currently facing a challenge with the Web Crypto API. While attempting to perform decryption, I’ve noticed that it functions as expected when the application is in the foreground. However, when the application is moved to the background, the decryption process seems to halt, giving the impression that the application has frozen.

Interestingly, when I return the application to the foreground, I receive all the pending notifications at once. This behavior is puzzling and I’m seeking assistance to understand and resolve this issue.

Any help would be greatly appreciated. Thank you.

       this.firebaseX.onMessageReceived()
            .subscribe(async data => {
                this.ngxLogger.info('PUSH: onMessageRecieved:'+JSON.stringify(data));
                this.initializeDebug("OnMessageRecived");

              
                let decryptedData = await Promise.resolve(this.decryptionService.decryptCipherData(data.data, data.ets));
                this.decryptedData = decryptedData;

                this.ngxLogger.info('Decrypted Alert ' + this.decryptedData);
      
            }, errRes => {
                console.log(' Error in receiveing message from Firebasex ' + JSON.stringify(errRes));
            });

   async decryptCipherData(data, ets) {


            var secretKey  = localStorage.getItem('secretKey1');
            var iv = localStorage.getItem('ivParameterSpec1');
           
            return this.decrypt(data, secretKey, iv);

       
    }

    async decrypt(data, secretKey, iv) {
        try {
            // Convert iv and ciphertext to Uint8Array
            var ivUint8Array = this.b64ToUint8Array(iv);
            var ciphertextUint8Array = this.b64ToUint8Array(data);

            // Import the CryptoKey
            this.ngxLogger.info('Importing the key!');
            console.log('Importing the key!')
            var key = await Promise.resolve(this.importKey(secretKey)).catch(e);

            // Decrypt using crypto.subtle.decrypt
            var decrypted = await crypto.subtle.decrypt(
                { name: 'AES-GCM', iv: ivUint8Array },
                key,
                ciphertextUint8Array
              );
          

            // Decode the decrypted data
            this.ngxLogger.info('Decode the decrypted data!');
            console.log('Decode the decrypted data!')
            var dec = new TextDecoder();
            var decryptedText = dec.decode(new Uint8Array(decrypted));

            console.log('Decrypted Text:', decryptedText);
            console.log('Decrypted Text:', JSON.stringify(decryptedText));
            return decryptedText;
        } catch (error) {
            console.error('Decryption failed:', error);
            console.log(error)
            return null;
        }
    }

    async importKey(secretKey) {
        try {
            this.ngxLogger.info('Parse the Base64-encoded key');
            console.log('Parse the Base64-encoded key')
            var keyBuffer = this.b64ToUint8Array(secretKey);

            // Import the key using crypto.subtle.importKey
            this.ngxLogger.info(' Import the key using crypto.subtle.importKey');
            console.log(' Import the key using crypto.subtle.importKey')
            var key = await crypto.subtle.importKey(
                "raw",
                keyBuffer,
                { name: "AES-GCM" },
                true,
                ["decrypt", "encrypt"]
              );

            this.ngxLogger.info('Returning the key');
            console.log('Returning the key')
            return key;
        } catch (ex) {
            this.ngxLogger.info('Error');
            console.log('Error')
            this.ngxLogger.info('ImportKey error:', ex.name, ', Message:', ex.message);
            console.error('ImportKey error:', ex.name, ', Message:', ex.message);
            console.log(ex)
            return null;
        }
    }

    // Helper function
    b64ToUint8Array(base64string) {
        return Uint8Array.from(atob(base64string), c => c.charCodeAt(0));
    }

1 post - 1 participant

Read full topic

Hi everyone,

we originally managed our app with cordova. A few months ago we migrated to capacitor. However, we’re having a really frustrating problem under iOS:

When you put the app in the background on iOS and then bring it back to the foreground after a while, the screen stays completely white and the app is no longer visible. The only way to fix it is to quit and restart the app. This makes the app very difficult to use for our iOS users. I think the problem is that the app isn’t restoring properly from the frozen state.

Has anyone else had a similar problem? Can you give us any helpful tips on how to fix it? We’d really appreciate it if we could get this resolved as soon as possible. It’s a very urgent issue.

Thanks for any help!

1 post - 1 participant

Read full topic

I have been trying to use the cordova-plugin-ibeacon in capacitor with @awesome-cordova-plugins/ibeacon , but it doesn’t seem to work. It is not detecting any devices.

Thanks

1 post - 1 participant

Read full topic

I am currently creating a project with ionic and angular. To create it I use the command “ionic start”, I select the angular framework, I add tabs to the project and when I run it in android 7 and earlier versions, I have a white screen error after the splash.

The project only runs on android 10 or later versions.

I have run the project on android studio emulators and on real devices, in both cases I have the same white screen error.

1 post - 1 participant

Read full topic

I want to create (SQLite-)Tables and load some stored data from them, to show them in different tabs. What’s the best practice to do this?

I’m creating the tables if they don’t exists, load data from some tables and set a state variable “initialized” to true, so that useEffect is running on it’s change. Like @aaronksaunders describes here.
I see two problems:

1. I’m trying to create the tables unnecessary often.
2. Some tabs don’t update the data after I set the variable to initialized, although I do the table-functions in a component imported by all tabs and set all useEffects to listen to change of “initialized”. If I rerun useEffect by hand it works.

Is it good to store a value in a table, for example “created” and set it to “true” after I created the tables at the first run of the app?
How can I do it that the tabs are updated or other function are waiting for my table-stuff?

1 post - 1 participant

Read full topic

I’ve been looking into code errors related to registering a plugin in a Capacitor 5+ environment.

From a popular plugin epicshaggy’s capacitor-native-biometric

But this example seems to be related to Capacitor < V5.

import com.epicshaggy.biometric.NativeBiometric;

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Initializes the Bridge
    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      // Additional plugins you've installed go here
      // Ex: add(TotallyAwesomePlugin.class);
      add(NativeBiometric.class);
    }});
  }
}

This code shows all sorts of errors, so I was wondering if there exists a strong example of how to do this?

Thanks for reading.

2 posts - 2 participants

Read full topic

You have ever dreamt of an online business that practically builds itself? Meet a game-changing store builder who made my dreams a reality! This innovative system allows you to seamlessly import products from major retailers like Amazon, eBay, and Walmart in minutes.

I’ve been fortunate enough to harness this system’s potential and achieve remarkable income. I’m passionate about sharing this opportunity with fellow affiliate marketers and aspiring online entrepreneurs.

If you’re eager to learn more about the system that propelled my success, check out my bio for the link! It’s a game-changer for anyone diving into the online business world.

1 post - 1 participant

Read full topic

Hi everyone,

I try to load variables from the .env file into process.env in order not to make my API keys visible.
In the root of my project I created a file .env. This file includes my variables

.env

API_KEY="api.x.x"

Then I created a setenv.ts file. This file should set the environment variable.

const { writeFile } = require('fs');
const { argv } = require('yargs');

// read environment variables from .env file
require('dotenv').config();

// read the command line arguments passed with yargs
const environment = argv.environment;
const isProduction = environment === 'prod';

const targetPath = isProduction
   ? `./src/environments/environment.prod.ts`
   : `./src/environments/environment.ts`;

// we have access to our environment variables
// in the process.env object thanks to dotenv
const environmentFileContent = `
export const environment = {
   production: ${isProduction},
   test: "${process.env['API_KEY']}",
};
`;

// write the content to the respective file
writeFile(targetPath, environmentFileContent, (err:any) => {
   if (err) {
      console.log(err);
   }

   console.log(`Wrote variables to ${targetPath}`);
});

Finally, I want to execute setenv.ts before the build. During my research I found approaches to change the “scripts” section in package.json:

...
 "scripts": {
    "ng": "ng",
    "start": "ts-node setenv.ts && ng serve",
    "build": "ts-node setenv.ts && ng build",
    "watch": "ts-node setenv.ts && ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
...

However, when I modify the “script” section or even delete it, my ionic CLI commands (ionic build or ionic serve) still work the same way.

Can someone help we with my issue please. I have tried a lot of different approaches, but nothing works for me

Here is some information about my environment. When typing ionic info, I got:

Ionic:

   Ionic CLI                     : 6.20.4 (/Users/username/.nvm/versions/node/v12.18.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.7.5
   @angular-devkit/build-angular : 15.0.4
   @angular-devkit/schematics    : 13.3.10
   @angular/cli                  : 15.0.4
   @ionic/angular-toolkit        : 6.1.0

Utility:

   cordova-res (update available: 0.15.4) : 0.15.3
   native-run (update available: 2.0.0)   : 1.7.1

System:

   NodeJS : v18.12.1 (/Users/username/.nvm/versions/node/v18.12.1/bin/node)
   npm    : 9.2.0
   OS     : macOS

I thank you in advance

1 post - 1 participant

Read full topic