I’m having a problem with my app, I’m coding an app in Ionic, and using One Signal to send and recieve notifications but when I try to upload the app to the playstore it show me this error message:

“You uploaded an APK or Android App Bundle that has an activity, activity alias, service, or broadcast receiver with intent filtering, but without the “android:exported” property set. You cannot install this file on Android 12 or later”.

AndroidManifest.xml

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="10201" android:versionName="1.2.1" package="com.grupocassa.torrecontrol" xmlns:android="http://schemas.android.com/apk/res/android">
    <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
    <uses-permission android:name="android.permission.INTERNET" />
    <application android:exported="false" android:hardwareAccelerated="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:name="com.onesignal.ADMMessageHandler" android:networkSecurityConfig="@xml/network_security_config" android:supportsRtl="true">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode" android:exported="true" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <service android:exported="false" android:name="com.onesignal.ADMMessageHandler$Receiver" android:permission="com.amazon.device.messaging.permission.SEND" />
        <receiver android:exported="false" android:name="com.onesignal.ADMMessageHandler$Receiver" android:permission="com.amazon.device.messaging.permission.SEND">
            <intent-filter>
                <action android:name="com.amazon.device.messaging.intent.REGISTRATION" />
                <action android:name="com.amazon.device.messaging.intent.RECEIVE" />
                <category android:name="com.grupocassa.torrecontrol" />
            </intent-filter>
        </receiver>
    </application>
    <uses-feature android:name="android.hardware.camera" />
    <uses-feature android:name="android.hardware.camera.autofocus" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="com.amazon.device.messaging.permission.RECEIVE" />
    <permission android:name="com.grupocassa.torrecontrol.permission.RECEIVE_ADM_MESSAGE" android:protectionLevel="signature" />
    <uses-permission android:name="com.grupocassa.torrecontrol.permission.RECEIVE_ADM_MESSAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
</manifest>```

I already tryed to force the activity services and receiver to true but it's not working config.xml

<service android:exported="false" android:name="com.onesignal.ADMMessageHandler$Receiver" android:permission="com.amazon.device.messaging.permission.SEND" />
        <receiver android:exported="false" android:name="com.onesignal.ADMMessageHandler$Receiver" android:permission="com.amazon.device.messaging.permission.SEND">
            <intent-filter>
                <action android:name="com.amazon.device.messaging.intent.REGISTRATION" />
                <action android:name="com.amazon.device.messaging.intent.RECEIVE" />
                <category android:name="com.grupocassa.torrecontrol" />
            </intent-filter>
        </receiver>

Do you have any hint why its happening?

1 post - 1 participant

Read full topic

I would like to integrate a translations tool like i18 in my ionic-react app. But I can’t cope with it. Installing react-i18next leads to “deprecated” and other errors…

Can anybody please send me a link where I can learn how to implement a translation tool?
Or do you suggest any other translation tool?

1 post - 1 participant

Read full topic

Hello,

When I use the routerLink prop on an IonCard with two IonButton and when the buttons are clicked the onClick callback is used as expected, but the page navigates forward; this is not the desired behavior.

How can I do this properly? I want to have two buttons that do not navigate to the routerLink page.

• IonCard that navigates to a new page when clicked.
• IonCard has a IonButton that does not navigate to page when clicked.

import { PostView } from "lemmy-js-client";
import { useAppSelector } from "../../store";
import { postsFeedSelector } from "./postsFeedSlice";
import {
  IonButton,
  IonCard,
  IonCardContent,
  IonCardHeader,
  IonCardTitle,
  IonCol,
  IonGrid,
  IonIcon,
  IonImg,
  IonItem,
  IonList,
  IonRouterLink,
  IonRow,
  IonText,
} from "@ionic/react";
import { chatboxOutline, arrowUpCircleOutline } from "ionicons/icons";
import styled from "@emotion/styled";

const Container = styled.div`
  margin: 0 0 16px;
  width: 100%;
  align-content: center;
`;

export default function PostsFeedCards() {
  const posts: PostView[] = useAppSelector(postsFeedSelector);
  const handlePostClick = () => {
    console.log("Card clicked!");
  };
  const ionCards = posts
    .filter((value, index, array) => array.indexOf(value) === index)
    .map((post: PostView) => (
      <IonCard key={post.post.id} routerLink={`/page/PostPage/${post.post.id}`}>
        <IonCardHeader>
          <IonCardTitle>{post.post.name}</IonCardTitle>
        </IonCardHeader>

        <IonCardContent>
          {post.community.name}
          <IonImg src={post.post.thumbnail_url}></IonImg>
        </IonCardContent>
        <IonGrid>
          <IonRow>
            <IonCol>
              <Container>
                <IonIcon icon={arrowUpCircleOutline} size="medium"></IonIcon>

                <IonText color="secondary">{post.counts.upvotes}</IonText>
              </Container>
            </IonCol>
            <IonCol>
              <IonIcon icon={chatboxOutline} size="medium"></IonIcon>
              <IonText color="secondary">
                <h2>{post.counts.comments}</h2>
              </IonText>
            </IonCol>
            <IonCol>
              <IonButton fill="clear" onClick={handlePostClick}>
                Upvote
              </IonButton>
            </IonCol>
            <IonCol>
              <IonButton fill="clear">Downvote</IonButton>
            </IonCol>
          </IonRow>
        </IonGrid>
      </IonCard>
    ));

  return <IonList>{ionCards}</IonList>;
}

1 post - 1 participant

Read full topic

I can not get ion-icons to draw in my application. I have taken an ionic-v3 application and upgraded it to ionic-v7 (and from angular 5 to angular 16).

The application is designed to be run inside of a web view in an iOS application, but this is not a Capacitor or Cordova application. Instead the application is compiled, placed in the application bundle, and loaded from the file system into a WKWebView.

The loads and runs well enough and responds to user interaction. However, none of the <ion-icon> elements draw.

Looking a them in the web inspector I see the <ion-icon> elements and can examine their Shadow DOM. The results look something like <div class="icon-inner"></div>.

I built a new Ionic app using the cli, added an icon, and opened it in a browser. The icons show up there, and looking at the same shadow Dom shows <div class="icon-inner"><svg...><svg></div>. An SVG element in the middle of the shadow DOM.

My application, when running in the iOS app does contain the svg files for all the icons. I can look at the “network” requests in the web inspector and I see that the browser is able to locate, and access, the svg files. If I dynamically change the name attribute of the icon, I see a new network request that loads the icon content from the file system. I can see the rendered file in the web inspector. I can replace my <ion-icon> element with an <img> element that accesses the file and that will draw.

In addition to using the name attribute, I have also tried specifying an ios attribute.

If I include the <script> tag mentioned on the ionicons page, the icons DO render and the system reads the graphics from the web. However my end users may be using this app off-line.

Why do the ion-icons not seem to create their Shadow DOM content?

1 post - 1 participant

Read full topic

i have this route configuration

const App: React.FC = () => {
  return (
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Route exact path="/login" render={() => <Login />} />
          <Route exact path="/programs" render={() => <Programs />} />
          <Route exact path="/tos" render={() => <TOS />} />
          <Route exact path="/syarat" render={() => <Syarat />} />
          <Route
            exact
            path="/profile-detail"
            render={() => <ProfileDetail />}
          />
          <Route
            exact
            path="/digital-card-detail"
            render={() => <DigitalCardDetail />}
          />
          <Route path="/tabs" render={() => <Tabs />} />
          <Redirect exact from="/" to="/login" />
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  );
};
export default App;

const Tabs: React.FC = () => (
  <IonTabs>
    <IonRouterOutlet>
      <Route exact path="/">
        <Redirect to="/tabs/home" />
      </Route>
      <Route exact path="/tabs/home">
        <Home />
      </Route>
      <Route exact path="/tabs/news">
        <News />
      </Route>
      <Route exact path="/tabs/profile">
        <Profile />
      </Route>
      <Route path="/tabs/digital-card">
        <DigitalCard />
      </Route>
    </IonRouterOutlet>
    <IonTabBar slot="bottom">
      <IonTabButton tab="home" href="/tabs/home">
        <IonIcon aria-hidden="true" icon={home} />
        <IonLabel>Beranda</IonLabel>
      </IonTabButton>
      <IonTabButton tab="news" href="/tabs/news">
        <IonIcon aria-hidden="true" icon={newspaper} />
        <IonLabel>Berita</IonLabel>
      </IonTabButton>
      <IonTabButton tab="digital-card" href="/tabs/digital-card">
        <IonIcon aria-hidden="true" icon={card} />
        <IonLabel>Kartu Digital</IonLabel>
      </IonTabButton>
      <IonTabButton tab="profile" href="/tabs/profile">
        <IonIcon aria-hidden="true" icon={people} />
        <IonLabel>Profil Saya</IonLabel>
      </IonTabButton>
    </IonTabBar>
  </IonTabs>
);

export default Tabs;

Whenever i try to change route from any tabs children, let’s say from /tabs/home to /programs, there’s always a glitch for a split second, is there a way to fix it?

Although i can add all routes inside tabs component but i want to remove the bottom navigation bar but then i’ll need to add condition to hide the bottom navigation bar using css? but i don’t think that’s a good idea and there has to be a better way

1 post - 1 participant

Read full topic

Hello !
Thanks to Ionic, I have an Android App that makes successful API calls to a remote server I own. Thank you Ionic!

However, I recently tried building for ios and I’m running into an issue.

I use CapacitorHttp (import from capacitor/core) to make the API calls within my code.
It works fine in Android but not in IOs.

I wish I could paste some errors from the console but that’s my issue: nothing happens when the API call is made.
No feedback or error from Xcode, just… no behavior at all.
I tried logging the CapacitorHttp object and the method call “CapacitorHttp.post(options);”
but nothing comes up in the Xcode console, just “{}”.

I’m thinking I miss some configuration but I can’t find what.

Here is my config:

Ionic:

Ionic CLI : 7.1.1 (/opt/homebrew/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 6.3.8

Capacitor:

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

Utility:

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

System:

NodeJS : v21.1.0 (/opt/homebrew/Cellar/node/21.1.0/bin/node)
npm : 10.2.3
OS : macOS Unknown
Capacitor config: import { CapacitorConfig } from ‘@capacitor/cli’;

const config: CapacitorConfig = {
appId: 'eu…,
appName: 'my app name,
webDir: ‘dist’,
bundledWebRuntime: false,
server: { “androidScheme”: “http”, “allowNavigation”: [ “127.0.0.1” ] },
plugins: {
CapacitorHttp: {
enabled: true,
},
},
ios:{
includePlugins: [ “CapacitorHttp” ]
}
};

export default config; ionic.config:
{
“name”: “intercambio”,
“integrations”: {
“capacitor”: {}
},
“type”: “vue”
}

Package: {
“name”: “intercambio”,
“version”: “0.0.1”,
“private”: true,
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“test:unit”: “vue-cli-service test:unit”,
“test:e2e”: “vue-cli-service test:e2e”,
“lint”: “vue-cli-service lint”
},
“dependencies”: {
“@awesome-cordova-plugins/http”: “^6.4.0”,
“@capacitor/android”: “4.5.0”,
“@capacitor/app”: “4.1.1”,
“@capacitor/camera”: “^4.1.4”,
“@capacitor/core”: “4.5.0”,
“@capacitor/device”: “^4.1.0”,
“@capacitor/haptics”: “4.1.0”,
“@capacitor/ios”: “4.5.0”,
“@capacitor/keyboard”: “4.1.0”,
“@capacitor/preferences”: “^4.0.2”,
“@capacitor/status-bar”: “4.1.0”,
“@ionic-native/http”: “^5.36.0”,
“@ionic/vue”: “^6.0.0”,
“@ionic/vue-router”: “^6.0.0”,
“axios”: “^1.2.3”,
“cordova-plugin-advanced-http”: “^3.3.1”,
“core-js”: “^3.6.5”,
“ionicons”: “^6.0.3”,
“vue”: “^3.2.21”,
“vue-i18n”: “^9.2.2”,
“vue-router”: “^4.0.12”,
“vuex”: “^4.1.0”
},
“devDependencies”: {
“@capacitor/cli”: “4.5.0”,
“@types/jest”: “^27.0.2”,
“@typescript-eslint/eslint-plugin”: “^5.6.0”,
“@typescript-eslint/parser”: “^5.6.0”,
“@vue/cli-plugin-babel”: “~5.0.0-rc.1”,
“@vue/cli-plugin-e2e-cypress”: “~5.0.0-rc.1”,
“@vue/cli-plugin-eslint”: “~5.0.0-rc.1”,
“@vue/cli-plugin-router”: “~5.0.0-rc.1”,
“@vue/cli-plugin-typescript”: “~5.0.0-rc.1”,
“@vue/cli-plugin-unit-jest”: “~5.0.0-rc.1”,
“@vue/cli-service”: “~5.0.0-rc.1”,
“@vue/eslint-config-typescript”: “^9.1.0”,
“@vue/test-utils”: “^2.0.0-rc.16”,
“@vue/vue3-jest”: “^27.0.0-alpha.3”,
“babel-jest”: “^27.3.1”,
“cypress”: “^8.7.0”,
“eslint”: “^8.4.1”,
“eslint-plugin-vue”: “^8.2.0”,
“jest”: “^27.3.1”,
“ts-jest”: “^27.0.7”,
“typescript”: “^4.3.5”
},
“description”: “An Ionic project”
}

2 posts - 2 participants

Read full topic

I have an ion-menu that, when a button is clicked, successfully routes to a different component/page. Is there a way to programmatically close the menu either before or after the route is pushed? As it is working right now, the menu stays up until the user clicks something on the page/component that we pushed to.

Code showing the ion-menu:

  <ion-menu side="start" content-id="main-content" id="mainslideoutmenu">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item button @click="routeToSettings">Settings</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

Code showing the functions:

function routeToSettings() {
  closeMenu(); //doesn't work either placing before or after the push
  router.push('/settings');
}

async function closeMenu(this: any) {
      console.log("here");
      await menuController.close('mainslideoutmenu');
}

I’m sure I’m not doing something right in the closeMenu function. Anyone have any ideas on what may be going wrong?

3 posts - 2 participants

Read full topic

1 post - 1 participant

Read full topic

This is my first time using the Browser plugin, however, the results are not matching my expectation. Have an Angular Capacitor mobile application and we already use several other plus custom plugins in the project. I am wanting to open a page in app rather than the external browser. Given the code below when opening the component Android’s external browser is launched rather than opening the page inside the app. Do I need to specify a DOM element (Angular ViewChild) to insert the browser into or something?

@Component({
  selector: 'nvo-browser-dialog-component',
  template: '<div>Hi Steve</div>'
})
export class BrowserDialogComponent implements OnInit {
  constructor(public dialogRef: MatDialogRef<BrowserDialogComponent>) {}
  async ngOnInit() {
    const url = 'http://capacitor.ionicframework.com/';
    await Browser.open({ url: url });
  }
}

4 posts - 2 participants

Read full topic

Hi,

I have a need to run a job once or twice a day which will take data from our app and store it in the documents folder.

I need this job to run regardless of whether the app is open but not worried about it being exactly on schedule.

I have seen the plugin @capacitor/background-runner but I am trying to work out whether I can access the @ionic/storage plugin and a service I have built to access the storage as I need access to export this information.

Thanks for any help

1 post - 1 participant

Read full topic

I have an app that on some ipads IOS is crashing up upon page navigation A to B, app reloads and goes to page B.

I have two ipads same generation same IOS, one works fine other one crashes and reloads.

2 posts - 1 participant

Read full topic

Please see the stackblitz. I just want to be able to reorder an array in items and then save that order as the new state of items. Why does this not work? Every time I change the order it gives me a random order back. If I don’t use setItems it works fine. But reordering without saving it in state is not useful for me.

Is there something about IonReorder that I don’t understand?

3 posts - 2 participants

Read full topic

I have a page like this:

    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>
            Happy Wednesday!
          </IonTitle>
        </IonToolbar>
      </IonHeader>
    </IonPage>

On small screens (for example, the original iPhone SE), this is displayed as

Happy Wednes...

What is the CSS/JS that Ionic is using to shorten the title text?

There is a a pretty big margin on each side of the ion-title, so it seems like more space could be used to display the full title. I would like to tweak this but I’m having trouble figuring out what CSS is causing the issue.

It’s a challenge for me because when testing in Safari/Chrome, the text is usually not shortened; it only happens on the actual device.

1 post - 1 participant

Read full topic

Post on stackoverflow

I have created two projects using Ionic Capacitor that have linked. One project is a Capacitor Plugin, CapacitorWalletAccess; and the other is a bare Ionic Project I will use as a testing environment for the plugin. The Plugin aims to do several things. It accesses the User’s wallet and it can return all of the wallet’s passes well as their information to the app. It can also take data from the app to create a new pass, save it to a storage site online, and then download it to the device.

I am most familiar with Firebase, so I am trying to save it to and pull the new pass from there. The Plugin can be built perfectly fine with no errors and it has Firebase implemented. Once I add the plugin to the Tester app (which also has Firebase installed) the plugin throws a no such module 'Firebase' error. Adding Firebase to the podfile, adding the firebase-ios-sdk, adding Firebase to the project and targets’ Libraries, Dependencies and Frameworks and every other form of adding Firebase has failed. I have spent over two weeks and over 20 hours dedicated solely to fixing the No such module 'Firebase' error, to absolutely no avail. Please asisst

1 post - 1 participant

Read full topic

Basically I have a problem while publishing my app on the appstore.

My app uses the camera to scan some barcodes (I use the barcode-scanner community plugin) and to be able to use the camera I need to ask the user for permission. I do this by using the official camera plugin with the “.requestPermissions” method. This besides asking for the camera permission also asks permissions for accessing the devices photos too. My app doesn’t need to access the user’s photo.

This wouldn’t be a problem but by doing so I’m forced to add “NSPhotoLibraryAddUsageDescription” and “NSPhotoLibraryUsageDescription” properties in the info.plist file for the iOs project and applestore doesn’t want any useless properties there (since my app doens’t have the need to access the user’s photo).

Now I’m trapped because I either find a way to remove those properties (which I tried but it gives me an error when uploading to the appstore, such as “there’s a library in your app that needs access to the user’s photos so you nedd to add the permissions”) or I somehow implement a feature where I actually access the user’s photos.

I would like better the first option, but I can’t find a way.
Any solution?

1 post - 1 participant

Read full topic

Originally published at: https://ionic.io/blog/introducing-the-superapp-sdk

These days, it feels like we have an app for everything. Managing your finances? There’s an app for that. Want to connect with friends halfway around the world? There’s an app for that too. Want a hot meal delivered to your door? Another app!  Before you know it, you can easily rack up 50+ different…

1 post - 1 participant

Read full topic

Hello,

I have created a PWA app and so far only tested it under desktop browsers (ionic serve). The access to my connected webcam works without any problems. Now I wanted to test the app on my Android mobile phone with Chrome for the first time and transferred the contents of the WWW directory (ionic build --prod) to my app server. The app can be called up and installed, the app icon even appears on the smartphone screen. The corresponding requests (access permissions) appear. As soon as I click on the camera icon, a prompt appears. I give the app permission to access the camera. A green icon then appears in the top Android toolbar, which signals to me that the app has access to the camera! However, the camera screen remains black

I see the 3 icons at the bottom, one on the left for selecting an image from the file system, in the middle the icon for creating a photo, and on the right the icon for changing perspective, if I click on the middle icon, nothing happens. When I click on the icon on the right, nothing happens. When I click on the left icon to select a file, a gallery opens with the photos on the device. Previously, I was also asked for permission to access the gallery. I can select an image file here.

Does anyone have any idea why the camera screen remains black on mobile phone?

And is there a way to open a console on the mobile phone so that I can see the app’s control output? For example, how can I determine whether an exception error has occurred when accessing the camera?

Ionic Info
Ionic CLI : 7.1.3 (C:\Users\thoma\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 7.5.3
@angular-devkit/build-angular : 16.2.9
@angular-devkit/schematics : 16.2.9
@angular/cli : 16.2.9
@ionic/angular-toolkit : 10.0.0
Capacitor:
Capacitor CLI : 5.5.1
@capacitor/android : not installed
@capacitor/core : 5.5.1
@capacitor/ios : not installed
Utility:
cordova-res : 0.15.4
native-run : 1.7.3
System:
NodeJS : v18.17.1 (C:\Program Files\nodejs\node.exe)
npm : 9.6.7
OS : Windows 10

1 post - 1 participant

Read full topic

Does anyone know if Capacitor would be compatible with a web app made using HTMX? i.e. can I create a web app using HTMX and then use Capacitor to create a mobile app that can be launched on the Apple/Play store

1 post - 1 participant

Read full topic

Hello,

I noticed that your homepage at stenciljs.com is built using the Stencil framework. Would it be possible for you to share the source code? I believe it would serve as an excellent reference. Additionally, I’m impressed by the efficient use of the Stencil framework in your project.

my email : btheanh174@gmail.com

Thank you!

1 post - 1 participant

Read full topic

Hi. I have a strange problem with using an iframe in my app. Some iOS users report that it renders blank while other confirm that it works just fine. I haven’t been able to reproduce the problem in the simulator though so it seems that only physical devices are affected by this. Unfortunately I don’t have a physical iOS device to test it on. There have not been any reports about this from android users.

By googling I found that it may be caused by CSP, so I set this in my index.html:
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' 'unsafe-hashes' 'unsafe-allow-redirects';">

Some sources also mentioned adding these lines to config.xml:

<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-navigation href="*" />

And to include this in my Info.plist:

<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key><true />
</dict>

And the iframe is used like this:
<iframe class="izus" id="izus" ref="izusRef" :src="reactiveUrlRef">izus</iframe>

Did I miss something? I am really out of ideas.

1 post - 1 participant

Read full topic