this is not the solution, it is a work around… the code i provided above works and I tested it… not sure what you were doing wrong, but I dont want others who come along and believe that your work around is a solution

It appears that a few things have changed when building a production app with Capacitor 3. Previously you were able to use the CLI to sign and build your release version of the APK, but now it appears that you need to use the Android Studio IDE to do so.

I am unable to figure out how to build my app within Android Studio.

It does not appear that I have any options available under my Build menu once the IDE launches after running the build command.

Does anyone have any suggestions on where to begin when trying to use Android Studio for the first time for a production build?

I’m making an app using react-map-gl which works in browser but nothing shows up on the android emulator. Has anyone else used react-map-gl successfully? Would mapbox-gl package give me more success?

did you ever fix this issue? I’m having the same problem

Capacitorjs camera is giving me an error in android, it does not want to get the image when I capture it

In ios everything works fine, but in android it gives me that error

Code Vuejs

Hello dear
i uploaded my ionic application in apple store but it is rejected by apple and in my email they wrote UIWebView API Deprecation

photo_2021-08-25_14-21-30606×1280 42.6 KB

so i will search and read your response in this url

i did all things you said but it does not work yet.

i have some plugin in my application like
1- fcm ::cordova-plugin-firebase
2- cordova-plugin-x-socialsharing
3- cordova-plugin-inappbrowser
4- cordova-plugin-facebook4

this plugins updated as i research in google, i also did check ionic blog and add some stuff to my config.xml as you can see in below images but have the same issue yet would you please help me??

this is my email:ali.talaee.eng@gmail.com and +989925863411 my whats app account please help me to fix this issue and check below images

i removed all temp folders:

• www
• platforms
• plugins
• node_modules
• package-lock.json

and reinstall theme but does not work

package.json file is

{
  "name": "arabic",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/cdk": "~8.2.3",
    "@angular/common": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/pwa": "^0.1000.4",
    "@angular/router": "~8.2.14",
    "@angular/service-worker": "~8.2.14",
    "@ionic-native/app-availability": "^5.34.0",
    "@ionic-native/app-version": "^5.34.0",
    "@ionic-native/core": "^5.34.0",
    "@ionic-native/device": "^5.34.0",
    "@ionic-native/diagnostic": "^5.34.0",
    "@ionic-native/facebook": "^5.36.0",
    "@ionic-native/fcm": "^5.34.0",
    "@ionic-native/geolocation": "^5.34.0",
    "@ionic-native/google-plus": "^5.34.0",
    "@ionic-native/in-app-browser": "^5.36.0",
    "@ionic-native/ionic-webview": "^5.36.0",
    "@ionic-native/location-accuracy": "^5.34.0",
    "@ionic-native/native-geocoder": "^5.34.0",
    "@ionic-native/native-storage": "^5.34.0",
    "@ionic-native/network": "^5.34.0",
    "@ionic-native/sign-in-with-apple": "^5.34.0",
    "@ionic-native/social-sharing": "^5.36.0",
    "@ionic-native/splash-screen": "^5.34.0",
    "@ionic-native/status-bar": "^5.34.0",
    "@ionic/angular": "^5.6.12",
    "@ionic/storage": "^2.3.1",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "cordova-plugin-androidx": "^1.0.2",
    "cordova-plugin-app-version": "^0.1.12",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-nativestorage": "^2.3.2",
    "cordova-plugin-network-information": "^2.0.2",
    "cordova-plugin-splashscreen": "5.0.2",
    "cordova-plugin-statusbar": "2.4.2",
    "cordova-plugin-whitelist": "1.3.3",
    "cordova-plugin-x-socialsharing": "^5.6.8",
    "cordova-res": "^0.15.3",
    "cordova-sqlite-storage": "^5.1.0",
    "cordova.plugins.diagnostic": "^5.0.2",
    "core-js": "^2.6.12",
    "es6-promise-plugin": "^4.2.2",
    "hammerjs": "^2.0.8",
    "ionic-header-parallax": "^2.2.2",
    "leaflet": "^1.6.0",
    "leaflet-ant-path": "^1.3.0",
    "leaflet-geosearch": "^2.7.0",
    "ng-lazyload-image": "^9.1.0",
    "rxjs": "^6.6.7",
    "tslib": "^1.14.1",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.29",
    "@angular/cli": "^8.3.29",
    "@angular/compiler": "~8.2.14",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@ionic/angular-toolkit": "^2.3.3",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "cordova-ios": "^6.2.0",
    "cordova-plugin-add-swift-support": "^2.0.2",
    "cordova-plugin-androidx-adapter": "^1.1.3",
    "cordova-plugin-appavailability": "^0.4.2",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-facebook-connect": "^3.0.0",
    "cordova-plugin-facebook4": "^6.4.0",
    "cordova-plugin-fcm-with-dependecy-updated": "^7.8.0",
    "cordova-plugin-geolocation": "^4.0.2",
    "cordova-plugin-googleplus": "^7.0.1",
    "cordova-plugin-inappbrowser": "^4.1.0",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "cordova-plugin-nativegeocoder": "^3.4.1",
    "cordova-plugin-request-location-accuracy": "^2.3.0",
    "cordova-plugin-sign-in-with-apple": "^0.1.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.7.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-network-information": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-app-version": {},
      "cordova.plugins.diagnostic": {
        "ANDROID_SUPPORT_VERSION": "28.+"
      },
      "cordova-plugin-nativestorage": {},
      "cordova-plugin-x-socialsharing": {
        "PHOTO_LIBRARY_ADD_USAGE_DESCRIPTION": "This app requires photo library access to function properly.",
        "PHOTO_LIBRARY_USAGE_DESCRIPTION": "This app requires photo library access to function properly."
      },
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-androidx": {},
      "cordova-plugin-androidx-adapter": {},
      "cordova-plugin-sign-in-with-apple": {},
      "cordova-plugin-appavailability": {},
      "cordova-plugin-fcm-with-dependecy-updated": {
        "IOS_FIREBASE_MESSAGING_VERSION": "~> 7.4.0"
      },
      "cordova-plugin-request-location-accuracy": {},
      "cordova-plugin-nativegeocoder": {
        "LOCATION_WHEN_IN_USE_DESCRIPTION": "Use geocoder service"
      },
      "cordova-plugin-geolocation": {
        "GPS_REQUIRED": "true"
      },
      "cordova-plugin-facebook4": {
        "APP_ID": "1131278407395828",
        "APP_NAME": "opencart",
        "FACEBOOK_HYBRID_APP_EVENTS": "false",
        "FACEBOOK_ANDROID_SDK_VERSION": "5.13.0"
      },
      "cordova-plugin-googleplus": {
        "REVERSED_CLIENT_ID": "com.googleusercontent.apps.223441354638-t67dlg4c5lmqcibejk203n2f78d45u4b"
      },
      "cordova-plugin-ionic-webview": {}
    },
    "platforms": [
      "ios"
    ]
  }
}

Screen Shot 1400-06-03 at 14.33.261920×1037 147 KB

Screen Shot 1400-06-03 at 14.34.041920×1037 173 KB

Screen Shot 1400-06-03 at 14.30.091920×1006 270 KB

please help me

Hey, I’m Nihil. Our company is reputed Natural Stone Supplier in Sydney. So, I’m looking for the new tablet. Which tablet should I take? Please Suggest.

Sorry for the late reply and thank you so much for such a detailed reply! I had a very careful read and it inspired me to change my code in that:

1. The functions that read/write to Storage are now in a service
2. Any gender is changed from boolean to string
3. The gender variable is checked not as truthy or falsey but their string value

Everything seems to work now, thank you so very much for your help!

Our goal is to provide professional and affordable transportation services for the Melbourne. We provide one of the best Taxi services in Melbourne. Our Springvale Taxi Service is very reliable and Comfortable.

Hello everyone!

As I see in the documentation, there’s active-tab-index property and so I tried to set in my service a property to set current active tab when I do a click on an item in first tab’s page… so I did:

<super-tabs tabsPlacement="top" [activeTabIndex]=myService.selectedTabIndex>...</super-tabs>

so when I am inside first tab’s page, page1.page.ts and I want to go automatically to second page so I set:

function callSecondPage() {
    this.myService.selectedTabIndex = 1;
}

so in this way in the html of home page it should set automatically the property and go on second page but it doesn’t work.
I tried also to call:

this.router.navigate(['/secondpage']);

with a Router but it shows the second page on entire screen, not the same as changing just tab page… so how I can change tab page programmatically in the correct way?

My Ionic info is:

Ionic:

   Ionic CLI                     : 6.16.3 (C:\Users\npule\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.6.12
   @angular-devkit/build-angular : 12.1.4
   @angular-devkit/schematics    : 12.1.4
   @angular/cli                  : 12.1.4
   @ionic/angular-toolkit        : 4.0.0

Capacitor:

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

Utility:

   cordova-res : not installed globally
   native-run  : 1.4.0

System:

   NodeJS : v14.17.4 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.14
   OS     : Windows 10

Thanks to all!
Cheers!

I try to use swiper as alternative to ion-slides because i can’t use it for dynamic render.

I have installed swiper@7.0.1 in package.json correctly, but when import the packages according to the swiper docs in the Vue component (Home.vue), the CLI response the next error:

This dependency was not found:

* swiper/vue in ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./src/views/Home.vue?vue&type=script&lang=ts

To install it, you can run: npm install --save swiper/vue

So, i really don’t know if the issue is the tsconfig.json file, because as a “test” i have installed vue3-circle-progress package and this it works correctly.

Please let me know if i have an issue with the tsconfig or i have not the correct swiper package.

Thanks.

Files:

Home.vue

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar class="custom-toolbar">
        <ion-buttons slot="start">
          <ion-menu-button auto-hide="false"></ion-menu-button>
        </ion-buttons>
        <ion-buttons slot="end">
          <ion-icon class="icon-size mr-4" src="assets/icon/pray.svg" />
        </ion-buttons>
        <ion-title class="text-white">Main Title</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
        <ion-refresher-content></ion-refresher-content>
      </ion-refresher>
      <div class="px-4">
        <h1 class="text-gray-800 font-bold text-3xl mt-5 mb-3">
          {{ $t("home.discover") }}
        </h1>
      </div>
      <swiper
        :slides-per-view="3"
        :space-between="50"
      >
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
      </swiper>
      <circle-progress :is-bg-shadow="true" />
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonRefresher,
  IonRefresherContent,
  IonSlides,
  IonSlide,
  IonIcon,
  menuController,
} from "@ionic/vue";
import { GetNewests } from "../services/home";
import { onMounted, ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import CircleProgress from "vue3-circle-progress";
import "vue3-circle-progress/dist/circle-progress.css";
export default {
  name: "Home",
  components: {
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonPage,
    IonRefresher,
    IonRefresherContent,
    IonIcon,
    Swiper,
    SwiperSlide
  },
  setup() {
    const newests = ref([]);
    menuController.enable(true);
    const generalOpts = {
      slidesPerView: "auto",
      zoom: false,
      loop: false,
      grabCursor: true,
    };
    function doRefresh(event) {
      console.log("Begin async operation");
      setTimeout(() => {
        console.log("Async operation has ended");
        event.target.complete();
      }, 2000);
    }
    async function getNewests(limit = 4, type = 0) {
      try {
        const res = await GetNewests(limit, type);
        if (!res.data.success) {
          throw new Error(res.data.message);
        }
        newests.value = res.data.data;
      } catch (error) {
        presentAlert("Error", error.message);
      }
    }
    onMounted(() => {
      getNewests();
    });
    return {
      newests,
      doRefresh,
      generalOpts,
    };
  },
};
</script>

package.json

{
  "name": "my-app",
  "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": {
    "@capacitor/android": "^2.4.2",
    "@capacitor/core": "2.4.2",
    "@capacitor/ios": "^2.4.2",
    "@ionic-native/core": "^5.29.0",
    "@ionic-native/youtube-video-player": "^5.29.0",
    "@ionic/vue": "^5.4.0",
    "@ionic/vue-router": "^5.4.0",
    "@types/swiper": "^5.4.3",
    "axios": "^0.21.0",
    "cordova-plugin-youtube-video-player": "^2.4.0",
    "core-js": "^3.6.5",
    "swiper": "^7.0.1",
    "tailwindcss": "1.9.5",
    "vue": "^3.0.0-0",
    "vue-i18n": "^9.0.0-beta.8",
    "vue-router": "^4.0.0-0",
    "vue3-circle-progress": "^1.0.6"
  },
  "devDependencies": {
    "@capacitor/cli": "2.4.2",
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-config-prettier": "^6.14.0",
    "eslint-plugin-vue": "^7.0.0-0",
    "prettier": "^2.1.2",
    "typescript": "~3.9.3",
    "vue-jest": "^5.0.0-0"
  },
  "description": "An Ionic project"
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

It looks like your build env doesn’t support ESM packages - ⚠️ Swiper7: "Module not found: Can't resolve 'swiper/react' (vue/svelte/...)" · Issue #4871 · nolimits4web/swiper · GitHub

in my app everything works great in the browser. Just no map will show up on emulator whether its mapbox or leaflet. I’m showing my leaflet implementation below.

this is ionic info

Ionic:

   Ionic CLI       : 6.16.3 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.6.8

Capacitor:

   Capacitor CLI      : 3.1.1
   @capacitor/android : 3.2.0
   @capacitor/core    : 3.1.1
   @capacitor/ios     : 3.1.1

Utility:

   cordova-res : 0.15.3
   native-run  : 1.4.0

System:

   NodeJS : v14.17.0 (/usr/local/bin/node)
   npm    : 6.14.13
   OS     : Linux 5.10

I get no errors in the console throughout my entire app.

Here is my leafletmap.js

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
import './leafletMap.css'
import '../App.css'
import {useRef} from 'react';

export default function LeafletMap() {

  const mapRef = useRef(null)

  return(
      <MapContainer 
	whenCreated={(map) => setInterval(()=> { map.invalidateSize();
	mapRef.current = map;
      }, 500)
      }
      center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
      <TileLayer
	attribution='&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
	url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[51.505, -0.09]}>
	<Popup>
	  A pretty CSS3 popup. <br /> Easily customizable.
	</Popup>
      </Marker>
    </MapContainer>
  );
}

leafletMap.css

.leaflet-container{
  width: 100vw;
  height: 100vh;
}

body {
  padding: 0;
  margin: 0;
}

html, body, #map {
  height: 100vh;
  width: 100vw;
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
  
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

    <meta charset="utf-8" />
    <title>Ionic App</title>

    <base href="/" />

    <meta name="color-scheme" content="light dark" />
    <meta
      name="viewport"
      content="viewport-fit=cover, width=device-width, initial-scale=1.0"
    />
    <!--minimum-scale=1.0, maximum-scale=1.0, user-scalable=no --!>
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/icon/favicon.png" />

    <!-- add to homescreen for ios -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="Ionic App" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    </head>

  <body>
    <div id="root"></div>
    </body>

</html>

I just want a simple map to show up on the emulator please!

I got a map to show up by getting rid of viewport-fit=cover!

Hello,

I tried your solution, but it’s stucks, it dosen’t worked for me.

.my-custom-class .action-sheet-button-inner.sc-ion-action-sheet-md{
    color: #ffffff  !important;
}

For my was .

(post deleted by author)

<ion-slides *ngIf="images !== undefined || images.length !== 0">
        <ion-slide *ngFor="let image of images; let i = index">
          <div class="img-wrap">
            <ion-img [src]="image"></ion-img>
          </div>
        </ion-slide>
      </ion-slides>

I have also tried the below code.
this.slides.getActiveIndex().then(index => {
let realIndex = index;
console.log(’ ggggggg ', event.target.swiper.isEnd);

  if (event.target.swiper.isEnd) {  // Added this code because getActiveIndex returns wrong index for last slide

    realIndex = this.slidesList.length - 1;
    console.log('ionSlideTouchEnd --- ', realIndex);
    this.slides.slideTo(realIndex);
    console.log('ionSlideTouchEnd ##### ', realIndex);
  }
  // You can now use real index 
}).catch((error) => {
  console.log(' ggggggg error ', error);

});

But getActiveIndex and isEnd Does not return anything. I am using this as a component. Please suggest.

Thanks
Alok Gupta

Well it has been done in JS, and I did it on the web version of my app using JS How do I do same for android app. What I essentially want is that I’d select text in my ionic app, and when I do so, I’d expect to get an option of ‘Highlight’ the text , and then the text gets saved in a variable which I can use further Essentially it is a note taking app, where I highlight the text I did it using TinyQ in js, but how to do it in ionic All the efforts are appretiated

next callback in beforeRouteEnter is not firing.

Simple example:

beforeRouteEnter(to, from, next) {
    next(vm => {
        alert('test');
    });
},

Also tried with console.log, changing component data, etc.