Hello, i’m trying to style the ion-tab-bar and what i want to do is simply that “wave effect”

I’m really lost i don’t see how i can achieve that in css, any idea would be great. thanks

1 post - 1 participant

Read full topic

Hi guys,

We have integrated in our application the push notification capacitor firebase plugin and things works fine.
We received notification when app it’s closed, or in background. But we have from time to time a problem, and also it’s not reproducible in any device/phone, the problem appears on ios, we couldn’t replicate the issue in android thus far.
The problem occured in some case: if we left the application in background for a while(for example during the night) and in this time we received a notification, when we open the notification the “pushNotificationActionPerformed” listener it’s not triggered all the times, something like it’s not there. We have the initialization of the notifications listeners in a service. It’s looks like the notification listener it’s not created in some cases when we tap on notification. Do you think that it’s possible that the app to be somehow refreshed and the data from the service, implicitelly the push notifications listeners to be destroyed because we added the listeners in a service, and not in app.component.ts or in other component?

Our service looks like that:

@Injectable({
providedIn: “root”,
})
export class PushNotificationService {
constructor(
private platform: Platform
) {
if (!this.platform.is(“desktop”)) {
this.createPushNotificationListener();
}
}

initPushNotifications() {
this.sharedDataService.pushNotificationListenerCreated();
PushNotifications.requestPermissions().then((result) => {
if (result.receive === “granted”) {
// Register with Apple / Google to receive push via APNS/FCM
PushNotifications.register();
} else {
// Show some error
}
});

PushNotifications.addListener("registration", (token: Token) => {
alert("registration");
  }
});

 PushNotifications.addListener("registrationError", (error: any) => {
   alert('Error on registration: ' + JSON.stringify(error));
 });

 PushNotifications.addListener(
   "pushNotificationReceived",
   (notification: PushNotificationSchema) => {
     // alert('Push received: ' + JSON.stringify(notification));
   }
 );

}

createPushNotificationListener() {
PushNotifications.removeAllListeners();

// Method called when tapping on a notification

PushNotifications.addListener(
  "pushNotificationActionPerformed",
  (notification: ActionPerformed) => {
    aler("pushNotificationActionPerformed");
    } catch (error) {
   alert(error);
      );
    }
  }
);

}
}

We call initPushNotification method from ngOnInit from app.component.ts, we also tried to have all the listeners(“pushNotificationActionPerformed” inclusive) in the same method, but we got the same issue, that why we moved that listener in a separate method that it’s called from the constructor of the service.

Any help or suggestion would be very helpful, thank you very much!

1 post - 1 participant

Read full topic

Our company builds and deploys a product via Ionic Framework.
Recently we upgrades cordova-android plugin in our cordova app to version 10.1.0 and targetSdk to 31. We have an issue with building at latest build stack, because of Java assertion error:

An exception has occurred in the compiler (1.8.0_312). Please file a bug against the Java compiler via the Java bug reporting page (http://bugreport.java.com) after checking the Bug Database (http://bugs.java.com) for duplicates. Include your program and the following diagnostic in your report. Thank you.
java.lang.AssertionError: annotationType(): unrecognized Attribute name MODULE (class com.sun.tools.javac.util.UnsharedNameTable$NameImpl)

Locally I have been able to resolve this issue by setting JAVA_HOME env variable to Java 11 location. I have not been able to do this on Ionic Framework. Is there any way to tell builder to use Java 11 at build?

Thank you!

1 post - 1 participant

Read full topic

I want to make a tree view using grid system below my example, please can anyone help me with that.

1 post - 1 participant

Read full topic

Basically i’m requesting infos from database, and i want to write these infos into html div in my Dashboard.tsx.

For example I have
<div className='livre'> <img src="https://media.discordapp.net/attachments/732628476745744495/919266570012856340/Oui-Oui-prend-les-commandes.jpg"></img> <h2>Livre Oui-Oui</h2> <span>0.5€ / semaine</span> </div>
And I want to replace the img src, h2 value, and span value with my request response info.
Thanks.

1 post - 1 participant

Read full topic

Currently the Ionic Dashboard and ionic CLI init command generate an Ionic v5 project.
I want to use the latest Ionic v6 (which is also stable now).
Is there an empty/boilerplate for an Ionic v6 app?
When I just update to v6 in a v5 project, the app becomes empty,
so some adjustments are still required.

1 post - 1 participant

Read full topic

Hi,
I am trying to create the archive for my app but I receive this error:

ld: framework not found FBLPromises

If I try to emulate the app on my iPhone it works correctly.

I am using Ionic + Vue + Capacitor on M1 MacBook Pro.

1 post - 1 participant

Read full topic

I don’t think it’s me being stupid this time. >_>
I usually have ion-header and ion-footer in the ion-modal to keep the header sticking to the top and the footer to the bottom. After the upgrade to ionic 6, the footer and bottom of long content is now being cut off. Here is the example code (lots of lorem ipsum is used to make the content long and scrollable.

I did comment out all of my custom CSS code to make sure that’s not something I did. Is there a workaround for this you can think of?

Thanks!

          {/* Begin example code */}

          <IonModal isOpen={true}>
            <IonHeader>
              <IonTitle>This is Modal Title</IonTitle>
            </IonHeader>
            <IonContent className="ion-padding">
              <div>
                <p>This is content Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>
                  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                </p>


                <p>This is content Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>
                  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                </p>


                <p>This is content Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>
                  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                </p>
              </div>
            </IonContent>
            <IonFooter>
              This is a footer where I usually put the buttons.
            </IonFooter>
          </IonModal>

          {/* End example code */}

2 posts - 1 participant

Read full topic

Hi all,

ich want to set the “https” for the “localhost” development.

For “react-scripts start”, I can simply in package.json set:

"start": "PORT=8100 HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"

But how can I do this with the ionic serve???

1 post - 1 participant

Read full topic

I returned to a project after a while and used npm-check-updates to upgrade all packages. I am now receiving the following error on build:

Failed to load config “react-app” to extend from.

I have tried running ionic repair to no avail. I also created a new ionic react project to compare the package.json files but nothing jumps out. I tried manually installing react-scripts and the typescript eslint packages but that didn’t work either. Any ideas?

Here’s my package.json:

  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@capacitor/clipboard": "^1.0.6",
    "@capacitor/core": "3.3.3",
    "@capacitor/share": "^1.0.7",
    "@capacitor/storage": "^1.2.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.16",
    "@hookstate/core": "^3.0.13",
    "@hookstate/untracked": "^3.0.0",
    "@ionic-native/core": "^5.36.0",
    "@ionic-native/in-app-browser": "^5.36.0",
    "@ionic/pwa-elements": "^3.1.0",
    "@ionic/react": "^6.0.0",
    "@ionic/react-router": "^6.0.0",
    "@reduxjs/toolkit": "^1.7.0",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.0.3",
    "@types/lodash": "^4.14.178",
    "@types/node": "^16.11.12",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "@types/react-redux": "^7.1.20",
    "@types/react-router": "^5.1.17",
    "@types/react-router-dom": "^5.3.2",
    "@types/redux-persist": "^4.3.1",
    "colyseus.js": "^0.14.13",
    "cordova-plugin-inappbrowser": "^5.0.0",
    "ionicons": "^6.0.0",
    "isomorphic-fetch": "^3.0.0",
    "lodash": "^4.17.21",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.2",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-persist-capacitor": "^1.0.3",
    "redux-persist-transform-filter": "0.0.20",
    "reduxjs-toolkit-persist": "^7.0.7",
    "socket.io-client": "^4.4.0",
    "typescript": "4.5.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@capacitor/cli": "3.3.3",
    "@types/isomorphic-fetch": "^0.0.35",
    "@typescript-eslint/eslint-plugin": "^5.6.0",
    "@typescript-eslint/parser": "^5.6.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-react": "^7.27.1",
    "eslint-plugin-simple-import-sort": "^7.0.0"
  },
  "description": "An Ionic project"
}```

1 post - 1 participant

Read full topic

My PC only has 2GB of RAM, so I can’t run my project on an Android virtual device because the minimum RAM required is 4GB. But to run applications for windows you only need 1GB of RAM. So I want to run my project with windows using Eletron and then build for Android. Is it possible or will I have to change the code?

1 post - 1 participant

Read full topic

Hello,

Does anyone know how to have IonDateTime as a modal picker or action sheet with Ionic 6?

I have the following:

                    <IonDatetime
                        presentation="date"
                        //    displayFormat="DD.MM.YYYY" deprecated
                        value={getDate}
                        onIonChange={e => setDate(e.detail.value)}
                        max={new Date().toISOString()}
                        placeholder="Date"
                    />

Is there an option for the effect? Or is there a way to use the older version without downgrading to Ionic 5?

Thank you.

1 post - 1 participant

Read full topic

Originally published at: https://ionicframework.com/blog/announcing-ionic-6/

Today I am excited to announce the release of Ionic 6! This release adds improved desktop support, overhauled components, iOS and Android design changes, and so much more! Let’s take a look at what you can expect with Ionic 6. Easy Upgrade While this release of Ionic does bring breaking changes, we strived to…

1 post - 1 participant

Read full topic

Hello ionic fellows,

So I recently upgraded ionic 5 project to ionic 6. All good with that but I’m facing errors while generating new page. I don’t know what’s wrong. Please help

An unhandled exception occurred: NOT SUPPORTED: keyword “id”, use “$id” for schema ID

See “/private/var/folders/0y/qgjp13zd0jg_dng31jdgx_rw0000gn/T/ng-V84xMS/angular-errors.log” for further details.

@sufian4199
Happy coding,
Cheers!

1 post - 1 participant

Read full topic

First time building ionic react for the web and i got a blank, but if i serve the build locally it’s working.

https://alfaprav.id/react-stt

it’s a shared hosting using apache server.

i’ve added homepage property to package.json file and assign https://alfaprav.id/react-stt/ as it’s value. The files are loaded, but still only showing a blank page. What should i do?

1 post - 1 participant

Read full topic

Hi Everyone,

As I was reading that Ionic 5 uses Apache Log4j2. Just wanted to check if it is susceptible to the zero-day vulnerability CVE-2021-44228?

Thank you for your inputs in advance

1 post - 1 participant

Read full topic

I’m building an assessment app ,
The current goal for the app is that the data of it would be sync on every device the user has; let’s say the user has 3 Devices

1. Device 1 - iPhone
2. Device 2 - iPad
3. Device 3 - iPhone

The data would be sync in all of those devices that has the same User Account used on the device but without the need of the user to login on to the app. Though this would be only be possible on IOS not on Android, as there’s the Storage Syncing used in IOS.

The app is coded in Ionic - Angular.

For IOS:
I’m currently thinking of the storage device as the storage of the data of the App, the question be how can this be achieved on storing on the Storage of the IOS and the Ionic App fetching the stored data on the storage of the device, at the same time create a data store there if no data is currently found for that logged in user in the device - do note: NOT ON THE APP BUT ON THE DEVICE.

For Android:
As 3rd Party Apps would be required to do this, I’m thinking of opting for a Google/Apple sign in if it’s on Android Device.

1 post - 1 participant

Read full topic

I am trying to install the cordova-plugin-firebase in my ionic app but it’s not working
I have cordova-android version 9.1.0
When I try to install the plugin it says

Installing “cordova-plugin-firebase” for android
Error during processing of action! Attempting to revert…
Failed to install ‘cordova-plugin-firebase’: Error: Uh oh!
EPERM: operation not permitted, unlink ‘platforms\android\app\src\main’

Please help me on this because I have tried almost more than 2 days on that but unable to find any solution for that

Thanks in advance

1 post - 1 participant

Read full topic

In ionic3 iOS, when opening app able to see all icons and images from assets folder. When app is in background and clicking on push notification, app opens but all icons and images from assets folder goes missing.

In below image all the squares or rectangles you can see are missing icons and images after opening app using push notification.

This issue occurs only in iOS. how to fix it?

One more input regarding navigation structure.
I have developed own scrolling tabs alike component, clicking on any tab icon, it sets the relevant page as root page. So probably on resume, the root path can be vary.

1 post - 1 participant

Read full topic

Hi there,
I’m working on my first project of Ionic-Angular
After I call:

const capturedPhoto = await Camera.getPhoto({
      resultType: CameraResultType.Uri,
      source: CameraSource.Camera,
      quality: 100
 });

I see that a new blob image is created with URL like: “blob:http://localhost:8100/82300d7b-c5b8-4bca-8779-c6b140046e73”
I want to know how many blob images have I created. How can I list all of those images ?
Thank you!

1 post - 1 participant

Read full topic