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?
1 post - 1 participant
↧
Does mapbox-gl work better than react-map-gl when trying to put a mapbox map in an ionic app?
↧
Capacitorjs camera is giving me an error in android, it does not want to get the image when I capture it
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
1 post - 1 participant
↧
↧
Apple store publish app Understanding ITMS-90809: UIWebView API Deprecation
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
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"
]
}
}
please help me
1 post - 1 participant
↧
My Old Tablet is doing problem, Which tablet should I purchase?
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.
1 post - 1 participant
↧
Springvale Taxi
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.
1 post - 1 participant
↧
↧
Having two supertabs pages, how to go from first page to second page programmatically?
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! 
1 post - 1 participant
↧
Swiper - Dependency was not found Typescript, ionic-vue
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"
]
}
2 posts - 2 participants
↧
I can't get either mapbox or leaflet react to show up on emulator
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='© <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!
2 posts - 1 participant
↧
Ionic React: Going back IonTabs to another IonTabs error
I do not know if this is a bug or not. So I have router with switch. Each switch has different IonTabs inside it.
Here is my router:
<IonPage id="main">
<Switch>
<Route path="/store/">
<IonTabs>
<IonRouterOutlet id="main">
<Switch>
<Route path="/store/reports" exact component={Reports} />
</Switch>
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="reports" href="/store/reports">
<IonIcon icon={newspaperOutline} />
<IonLabel>Reports</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</Route>
<Route path="/purchasing/">
<IonTabs>
<IonRouterOutlet id="main">
<Switch>
<Route path="/purchasing/due" exact component={SupplierDue} />
</Switch>
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="purchasingDue" href="/purchasing/due">
<IonIcon icon={calendarNumberOutline} />
<IonLabel>Due</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</Route>
</Switch>
....
So I am redirecting from /store/reports with useHistory().push('/purchasing/due'). When I press back button (back using browser back button), the /store/reports is empty. It seems that the component is destroyed. No code from the component was being triggered. It is just empty screen.
Same thing happens when I redirect from the other way around.
How can I fix this?
4 posts - 2 participants
↧
↧
Ion slides do not update with dynamic content
<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
1 post - 1 participant
↧
Selecting text in ionic should trigger an event ? how?
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
1 post - 1 participant
↧
beforeRouteEnter next(vm => ()) callback not firing
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.
1 post - 1 participant
↧
beforeRouteUpdate not fired when indirectly loading same route?
I’m not sure what should be the expected behavior with beforeRouteUpdate.
It does get called if I add a router-link to my component with the same route and changed parameters.
However, if I go to my route, then back to homepage, then back to my route with changed parameters, it’s not called.
My assumption would be that it would get called so I can rerender my component, since a cached component is loaded with data related to the previous parameters.
1 post - 1 participant
↧
↧
Angular routing and chrome extensions
I have built an ionic app using angular. I have a login screen that checks if a users details were accepted and redirects using router.nagivate([’/relativePath/’]).
This works fine in both the mobile and web app but when i load the app as a chrome extension it doesnt render the page. However getting to the same page using routerlink in html does render the page correctly in the chrome extension.
What am I missing?
1 post - 1 participant
↧
How to create bottom-sticking buttons idiomatically?
What is the idiomatic way to create a pair of Cancel and Done sticky bottom buttons that take up full width? Here is an example:
I don’t see a way to do without a hacky CSS. I don’t see a way to do declaratively here ion-button: Ionic Framework API Docs
Any ideas?
1 post - 1 participant
↧
Swipe Back Nav Flicker (iOS PWA)
I am currently facing an issue where the swipe to go back functionality flickers/flashes back to the “from page” (home page in this example) after the gesture before finally going back to the “to page” (restaurant page in this example). This is happening intermittently, and usually doesn’t happen if you swipe back slowly (not sure if thats just a coincidence). I’ve included some code, my project info, and a video of the broken animation. Any ideas why this is happening?
home.page.html Router Link
<a routerLink="/restaurant/abc/123"><ion-button color="primary">Valid Restaurant</ion-button></a>
app-routing.module.ts Routes
const routes: Routes = [
{
path: 'login',
loadChildren: () => import('./pages/login/login.module').then( m => m.LoginPageModule)
},
{
path: 'create-restaurant-menu',
loadChildren: () => import('./pages/create-restaurant-menu/create-restaurant-menu.module').then( m => m.CreateRestaurantMenuPageModule)
},
{
path: 'create-restaurant-menu/:restaurantId',
loadChildren: () => import('./pages/create-restaurant-menu/create-restaurant-menu.module').then( m => m.CreateRestaurantMenuPageModule)
},
{
path: 'create-restaurant-account',
loadChildren: () => import('./pages/create-restaurant-account/create-restaurant-account.module').then( m => m.CreateRestaurantAccountPageModule)
},
{
path: 'home',
loadChildren: () => import('./pages/home/home.module').then( m => m.HomePageModule)
},
{
path: 'restaurant/:restaurantId/:tableId',
loadChildren: () => import('./pages/restaurant/restaurant.module').then( m => m.RestaurantPageModule)
},
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
];
Ionic Info
Ionic:
Ionic CLI : 6.12.1 (/Users/tylerpashigian/.nvm/versions/node/v12.18.4/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.3.5
@angular-devkit/build-angular : 0.1000.8
@angular-devkit/schematics : 10.0.8
@angular/cli : 10.0.8
@ionic/angular-toolkit : 2.3.3
Utility:
cordova-res (update available: 0.15.3) : 0.15.1
native-run (update available: 1.4.0) : 0.3.0
System:
NodeJS : v12.18.4 (/Users/tylerpashigian/.nvm/versions/node/v12.18.4/bin/node)
npm : 6.14.6
OS : macOS Big Sur
Video - I wasn’t able to attach a video so I created a link to the video stored on Google Drive
1 post - 1 participant
↧
How to set a unique background color via scope styling
Using Ionic 5 .6.13/ Vue 4.5.12
Goal … I want the Home page to have unique background color, different from the remaining SPA ( #000000 during testing…)
Setup … Single Page (Ionic/Vue) App…Using a <base-layout> component as the app skeleton… Home.vue utilizes the default slot in <base-layout>
Problem … Scoped styling in Home.vue does not work. As expected, un-scoped styling globally changes the background color for every page, but is undesired (see 5 Attempts in sample code …they ALL change the ion-content background color ONLY if the ‘scope’ attribute is removed, and thus are globally applied)
QUESTION … Is there a way to use <style scoped> to selectively change the background of the ion-content for Home.vue ONLY ??
BaseLayout.vue
<template>
<ion-page>
<ion-header translucent>
<ion-toolbar>
..various buttons
</ion-toolbar>
</ion-header>
<!-- DEFAULT SLOT for content -->
<ion-content class="customStyles" fullscreen id="main-content">
<slot></slot>
</ion-content>
</ion-page>
</template>
Home.vue
<template>
<base-layout>
<!-- some Ionic components for content -->
</base-layout>
</template>
<style scoped>
/*Attempt 1*/
ion-content {
--background:#000000;
}
/*Attempt 2*/
ion-content {
--ion-background-color:#000000;
}
/*Attempt 3*/
ion-content.customStyles {
--background:#000000;
background: #000000;
}
/*Attempt 4*/
:host {
background: #000000;
}
/*Attempt 5*/
@media (prefers-color-scheme: light) {
ion-content {
--ion-background-color: #000000;
--ion-background-color-rgb: 0, 0, 0;
}
}
</style>
1 post - 1 participant
↧
↧
Network error when axios call has parameters on IOS
I’m using axios for all my api calls on my Ionic App with Vue. When I build my app on Xcode I got the error “Network error”.
{"message":"Network Error","name":"Error","stack":"capacitor://localhost/js/chunk-vendors.48c94d63.js:3:19640\ncapacitor://localhost/js/chunk-vendors.48c94d63.js:24:8990","config":{"url":"URL","method":"post","data":"{\"page\":1}","headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json;charset=utf-8"},"transformRequest":[null],"transformResponse":[null],"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"maxBodyLength":-1}}
I saw that this error occurs only when I have parameters
axios.post("API CALL", {
lat: this.latitude,
lng: this.longitude,
page: this.page,
})
.then((response) => {
// console.log(response.data);
this.events = response.data;
this.loaded = true;
})
.catch(async (err) => {
console.log(err);
});
When removing parameters, no errors. Server side, the CORS settings are OK.
What’s the problem ?
1 post - 1 participant
↧
Avoid page transitions only for specific routes
Using Ionic 5.6.13 / Vue 4.5.12 / Capacitor 6.17.0 VueRouter
Goal … I want to load some routes with no transitions/animations (depending on circumstance)
Setup … Single Page (Ionic/Vue) App…<main-menu> component used as a sidemenu. MainMenu.vue (see below) contains an <ion-list> with <ion-items>. The click handler 'navigateTo({name: routeName}) is a helper that simply invokes this.$router.push({name: routeName})
Problem … All the routes loaded by ‘push’ have a distinct platform-specific animation. However, some routes would be best to just appear, without animation. I could not find a means to suppress the default animation on a per-route basis. I tried passing a configuration object to this.$router.push(namedRoute, config) but keys like ‘transition’:‘none’ or ‘animate’:‘none’ had no effect and I cannot find any that do. I also tried adding a ‘router-link’ attribute to the <ion-button> which does load a route using a string such as ‘/some/path’, but does not accept Route objects, i.e. named routes as in {name: routeName} which is preferred for larger use cases.
In the framework docs, <ion-router-link> is not rec’d for Vue (and indeed loads nothing from the @ionic/vue package even if I try). Also, the <router-link> and <transition> components are Vue specific (not Ionic … which is responsible for the page transition animations). Setting the router-direction attribute on the <item> also had no effect.
QUESTION … What is ‘best practice’ to suppress page transition/animations for specific routes when using the Vue router in Ionic?
Example Code…
<template>
<ion-menu menu-id="main-nav-menu" content-id="main-content">
<ion-content>
<ion-list lines="none">
<ion-item button @click="navigateTo({ name: 'Home' })">
<ion-icon :icon="home" slot="start"></ion-icon>
<ion-label>Home</ion-label>
</ion-item>
<ion-item button @click="navigateTo({ name: 'UserProfile' })">
<ion-icon :icon="personOutline" slot="start"></ion-icon>
<ion-label>User Profile</ion-label>
</ion-item>
.........more list items
methods: {
navigateTo(nextRoute) {
menuController.close('main-nav-menu');
this.$router.push(nextRoute);
},
1 post - 1 participant
↧
How do you intercept the Ionic model for a hook when shown?
↧
