I found the issue.
I have only JRE installed on my computer but it requires a JDK.
After installing the JDK, and change the JAVA_HOME to the JDK path, the gradle is happy now.
↧
Ionic livereload on Android fails with "cannot find tools.jar"
↧
How can I determine the zipcode for a given State and city?
@mikrochipkid i exactly searched this question but got the reverse of it. you seem to have seen some solutions for it can you please share that link ?
↧
↧
Unable to access DOM element using querySelector
Completely forgot this topic existed and it seems to have been necromanced. This was back when I had a very poor understanding of Angular framework as a whole. Your answer is correct and topic oughta be closed.
↧
Hotspot native with ionic
Hello everyone!
I am developing an app with Ionic + Capacitor and I want only to know programmatically hotspot’s state… On ionic documentation it says to add :
| npm install cordova-plugin-hotspot | |
|---|---|
| npm install @ionic-native/hotspot |
does it adding cordova-plugin-hotspot mean add practically cordova to my app? Or is enough to include @ionic-native/hotspot ?
Thanks to all in advance!
Cheers! 
↧
How to calculate the value of the colors 'shade' and 'tint'
Hello, i see that this is an old thread but i’ll post anyways,
the percentage for the shade is 12%, and 10% for the tint.
it can be done if you’re using sass:
@function shade($color, $percentage) {
@return mix(black, $color, $percentage);
}
@function tint($color, $percentage) {
@return mix(white, $color, $percentage);
}
@function contrast($color) {
@if (red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114) > 186 {
@return #000000;
} @else {
@return #ffffff;
}
}
$theme-colors: (
'primary': #0798ed,
'secondary': #3dc2ff,
'tertiary': #25a59e,
'success': #2dd36f,
'warning': #ffc409,
'danger': #bf342c,
'dark': #1c2529,
'medium': #9098b1,
'light': #f5f5f5,
);
:root {
@each $name, $value in $theme-colors {
--ion-color-#{$name}: #{$value};
--ion-color-#{$name}-rgb: #{red($value)}, #{green($value)}, #{blue($value)};
--ion-color-#{$name}-shade: #{shade($value, 12%)};
--ion-color-#{$name}-tint: #{tint($value, 10%)};
--ion-color-#{$name}-contrast: #{contrast($value)};
--ion-color-#{$name}-contrast-rgb: #{red(contrast($value))},
#{green(contrast($value))}, #{blue(contrast($value))};
}
}
↧
↧
Argument of type 'Event' is not assignable to parameter of type 'CustomEvent'
VS Code does indeed complain in corresponding template file, which is annoying.
Anyone have a workaround that doesn’t throw type safety out the window?
↧
Ionic 5 - NativeAudio NullInjectorError
Hello man, see the first answer on “that link”, it’s just a quick fix, but it works.
↧
How can I determine the zipcode for a given State and city?
- SO: How to convert city or state name to zipcode
- Google: Geocoding
- https://geo.codes/
- Amazon Location Service – Maps, Geocoding, Routes, Geofences, Tracking – Amazon Web Services
- There are quite a few geocoding services out there
↧
Ionic 5 block display/text zoom
I am currently building a mobile Interface for a Browsergame, thought the mobile Design is quite responsive and is looking good on all tested devices (from a Samsung Galaxy S7 to a iPhone 12) its fine but if i enable the Display Zoom Setting from Android, the whole Layout becomes ugly. I know its usually not a good idea to block the user from zooming but there are alot of Information and too less space for extreme big texts.
I am using Ionic 5 with Capacitor 3, i added 2 images below of the “normal” Version and the largest display zoom version. I have been researching on this problem for the last 4-6 hours, tested several plugins like capacitor´s own mobile accessibility plugin but i guess its phonegap depency is depreciated or not functional atleast, the last Update is also more than 5 years old on that.
Is there anything i can do to fix this?
↧
↧
Capacitor Browser can't open itms-apps:// links (to the App store)
Continuing the discussion from Is there any way to open external app from inappbroswer?:
Hi,
I have a similar issue, not with Whatsapp links, but with a link to rate the app in the App Store (starting with itms-apps://). I can’t get the capacitor Browser API (Capacitor - build cross platform apps with the web) to handle them.
I use the following code to open the App rating page in the app store:
import { Plugins } from '@capacitor/core';
const { Browser } = Plugins;
await Browser.open({ url: 'itms-apps://itunes.apple.com/...' });
See the response from XCode below. This was no issue with Cordova, but emerged when using Capacitor.
So my question is, how do I open itms-apps links with Capacitor?
Thanks
Jan
XCode throws the following error when trying to open the link:
[error] - ERROR {“rejection”:{“errorMessage”:“Unable to display URL”},“promise”:{"__zone_symbol__state":0,"__zone_symbol__value":"…"},“zone”:{"_parent":{"_parent":null,"_name":"","_properties":{},"_zoneDelegate":{"_taskCounts":{“microTask”:0,“macroTask”:0,“eventTask”:0},“zone”:"…","_parentDelegate":null,"_forkZS":null,"_forkDlgt":null,"_forkCurrZone":null,"_interceptZS":null,"_interceptDlgt":null,"_interceptCurrZone":null,"_invokeZS":null,"_invokeDlgt":null,"_invokeCurrZone":null,"_handleErrorZS":null,"_handleErrorDlgt":null,"_handleErrorCurrZone":null,"_scheduleTaskZS":null,"_scheduleTaskDlgt":null,"_scheduleTaskCurrZone":null,"_invokeTaskZS":null,"_invokeTaskDlgt":null,"_invokeTaskCurrZone":null,"_cancelTaskZS":null,"_cancelTaskDlgt":null,"_cancelTaskCurrZone":null,"_hasTaskZS":null,"_hasTaskDlgt":null,"_hasTaskDlgtOwner":null,"_hasTaskCurrZone":null}},"_name":“angular”,"_properties":{“isAngularZone”:true,“maybeDelayChangeDetection”:false},"_zoneDelegate":{"_taskCounts":{“microTask”:0,“macroTask”:0,“eventTask”:276},“zone”:"…","_parentDelegate":"…","_forkZS":null,"_forkDlgt":null,"_forkCurrZone":null,"_interceptZS":null,"_interceptDlgt":null,"_interceptCurrZone":null,"_invokeZS":{“name”:“angular”,“properties”:"…"},"_invokeDlgt":"…","_invokeCurrZone":"…","_handleErrorZS":"…","_handleErrorDlgt":"…","_handleErrorCurrZone":"…","_scheduleTaskZS":{“name”:""},"_scheduleTaskDlgt":"…","_scheduleTaskCurrZone":"…","_invokeTaskZS":"…","_invokeTaskDlgt":"…","_invokeTaskCurrZone":"…","_cancelTaskZS":"…","_cancelTaskDlgt":"…","_cancelTaskCurrZone":"…","_hasTaskZS":"…","_hasTaskDlgt":"…","_hasTaskDlgtOwner":"…","_hasTaskCurrZone":"…"}},“task”:{“type”:“microTask”,“state”:“notScheduled”,“source”:“Promise.then”,“zone”:“angular”,“runCount”:0}}
↧
Hotspot native with ionic
Sorry, but I can’t figure out what you mean here.
No.
There was no standard for futures in JavaScript when Cordova was being initially developed, so the API for talking to Cordova plugins instead uses callbacks. The Ionic Native project was developed to bring a Promise-based API to Cordova, therefore…
@ionic-native/hotspot contains only glue code that allows you to receive Promises and Observables from the matching Cordova plugin. It won’t do anything without the actual plugin to talk to.
↧
Updating the state of the Home Page component from a IonModal getting a useEffect error
I have an IonModal that I’m using to add data to my database through an API call. I will then add the response data to a list in my Redux store which is being displayed on the Home Page.
This function is being called on a button press within my modal to call the API, get the response, add it to the store, and close the modal:
const addData = async () => { const transaction = await createTransaction(data); dispatch(addTransaction(transaction)); setShowModal(false); };
createTransaction is calling the API and returning the response data.
When it is called and the modal is closed I am getting this error
Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
In my Home page all I have is a simple useEffect that sets the state within the component to the state within the redux store and should update displayed content within the component but isn’t:
`
const transactions = useSelector(state => state.transactions);
const [data, setData] = useState();
useEffect(() => {
setData(transactions);
}, [transactions]);
`
The data does get successfully added to the Redux Store but it just doesn’t get updated visually on the home page.
Any help or advice would be very much appreciated.
↧
beforeRouteUpdate and beforeRouteLeave never called
“beforeRouteUpdate” and “beforeRouteLeave” in-component guards are never being called.
I tried using them in my route component and in my App.vue.
Nothing…
“beforeRouteEnter” works fine.
I navigated to other routes both by pressing the back button and by using “router.push” and “<router-link>”.
None of those called the guards.
My end goal is to use the mentioned guards to navigate to a previous step of a multi-step form when pressing the back button.
I am completely lost, spent hours on this. My app is pretty big so tell me which part of the code you would need to see.
↧
↧
Compatibility with tsconfig target ES2020
I am using mono repo with npm workspaces. Repo has 3 packages
- server - server code
- commons - common code shared between server and ionic-app
- ionic-app - ionic app
Both server and commons app are configured with target of ‘ES2020’ as follows.
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"lib": ["ES2020"],
}
}
But ionic react app which uses commons package has target of ‘es5’. To match with commons tsconfig, if I change target of ionic app to “ES2020” and module to ‘commonjs’, will there be any compatibility issue while running app in mobile platform?
↧
No such module capacitor after XCODE update, HELP!
ok, booooo
what a chore,
not quite there
get these messages during build (ionic capacitor sync ios)
Images and other types of assets omitted.
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
> capacitor sync ios
[capacitor] ✔ Copying web assets from public to ios/App/App/public in 14.66ms
[capacitor] ✔ Creating capacitor.config.json in ios/App/App in 1.67ms
don’t remember public being involved before.
capacitor.config.json
has public as the webdir
{
"appId": "com.sd.sampleapp",
"appName": "sampleapp",
"webDir": "public",
"bundledWebRuntime": false
}↧
Admob App Open ads
Is there any working plugin that support the new admob ads type App Open? Im using admob-free plugin now but it still not support App Open type. Thanks
↧
Is there any way to open external app from inappbroswer?
For any future reader:
const whapURL = `whatsapp://send?phone=+31333334604&text=Hi, I contacted you Through your website`;
Works nicest for me - in a PWA that is. Mostly because the back option brings yo back to the PWA directly, whereas the http://wa.me option brings me back to a blank page I need to close
↧
↧
Ion-datetime displayFormat ignored in ion-modal
Up.
Same issue…
Ionic CLI : 6.16.3 (/usr/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.6.14
@angular-devkit/build-angular : 0.1002.3
@angular-devkit/schematics : 12.2.2
@angular/cli : 10.2.3
@ionic/angular-toolkit : 2.3.3
↧
No such module capacitor after XCODE update, HELP!
I have fixed the capacitor.config,json in the project root, and now the cap copy/sync copies from dist to ios/App/App/public
and build in xcode completes…
but now my app is a blank page (i know my icon is not in the xcode settings yet, but is in the public/img folder), like none of my assets were deployed…
I can see the code, css, etc referenced in the index.html.
↧
Using capacitor video player unable to load in ios (android works fine)
Using ionic version 6.17.0 and capacitor version 3.1.2 and have installed the capacitor-video-player plugin
async playVideo() {
console.log(’>>> playing video’);
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);this.videoPlayer.addListener(‘jeepCapVideoPlayerExit’, async (data: any) => {
console.log(’>>> user exited player: ', data);
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
}, false);this.videoPlayer.addListener(‘jeepCapVideoPlayerEnded’, async (data: any) => {
console.log(’>>> player has finished: ', data);
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
}, false);let slowwmoPlayer = await this.videoPlayer.initPlayer({
mode: ‘fullscreen’,
url: this.slowwmoPlace.clip,
playerId: ‘slowwmoVideo’
});
}
(this.slowwmoPlace.clip is an external url with an .mp4 file)
In Android I have no problems playing the video (and the screen shifts to landscape while being played as intended), but in ios the video doesn’t load with no obvious error. The console shows:
[Log] native CapacitorVideoPlayer.initPlayer (#77782303) (user-script:2, line 223)
[Log] Object (user-script:2, line 230)
callbackId: “77782303”
methodName: “initPlayer”
options: Object
mode: “fullscreen”
playerId: “slowwmoVideo”
url: “https://corkscrew.slowwmo.com/slowwmo-videos/busy_bees/7535.mp4”
Object Prototype
pluginId: “CapacitorVideoPlayer”
type: “message”
Object Prototype
[Log] Object (user-script:2, line 208)
method: “createVideoPlayerFullScreenView”
result: true
value: true
Then in XCode I see:
To Native → CapacitorVideoPlayer initPlayer 77782303
2021-08-22 13:50:01.723981+0200 App[24057:323493] <CATransformLayer: 0x600002a9aec0> - changing property masksToBounds in transform-only layer, will have no effect
2021-08-22 13:50:01.724803+0200 App[24057:323493] <CATransformLayer: 0x600002a9b180> - changing property masksToBounds in transform-only layer, will have no effect
2021-08-22 13:50:01.729249+0200 App[24057:323493] <CATransformLayer: 0x600002b6c180> - changing property masksToBounds in transform-only layer, will have no effect
2021-08-22 13:50:01.732586+0200 App[24057:323493] <CATransformLayer: 0x600002b1a520> - changing property masksToBounds in transform-only layer, will have no effect
2021-08-22 13:50:01.734504+0200 App[24057:323493] <CATransformLayer: 0x600002b14b80> - changing property masksToBounds in transform-only layer, will have no effect
2021-08-22 13:50:01.756149+0200 App[24057:323493] <CATransformLayer: 0x600002b6c180> - changing property allowsGroupBlending in transform-only layer, will have no effect
2021-08-22 13:50:01.756399+0200 App[24057:323493] <CATransformLayer: 0x600002b1a520> - changing property allowsGroupBlending in transform-only layer, will have no effect
TO JS {“value”:true,“result”:true,“method”:“createVideoPlayerFullScreenView”}
failing to load
I have ticked the Background Modes in XCode of “Audio, Airplay…”
Not really sure how to debug this further. Any help appreciated 
↧