Quantcast
Channel: Ionic Forum - Latest posts
Viewing all 230518 articles
Browse latest View live

Black Border Issue on iPad with Magic Keyboard

$
0
0

Thanks for the heads up! I’ll update to version 8 as soon as possible. Here’s a screenshot of the issue: as you can see, there’s a black bar that cuts off the bottom of the viewport.


Cannot get Vue Typescript to recognize `closeOpened()` on IonItemSliding to close it

Black Border Issue on iPad with Magic Keyboard

$
0
0

Is the black part still part of the viewport? Wondering if this is an Ionic issue or something with Capacitor. Are you able to add some CSS to cause the black bar to disappear?

What version of Capacitor are you on?

React Navigation

$
0
0

Hey, any ETA?
I mean it’s the most upvoted issue in your github, and it’s been a while since anyone from the team referred to it, I’ll be honest and say that it fills like the ionic team is ignoring all the issues that are open regarding the react router implementation (which has lots of bugs), I would love to try and contribute, do you think you guys will continue the “sp/react-router-6-take-2” branch? because I want to try and take a look there to help, but as of now, it’s the main reason we didn’t publish the react version of our ionic angular app :frowning:
I’d be glad to here you, thanks!

Ionic Popover positioning in browser with a max-width setting

$
0
0

In my case, I was limiting the app width on desktop on the ion-app itself which led to similar issues:

ion-app {
  max-width: 960px;
  margin: auto;
}

Setting it on .ion-page instead resolved the issues like popover calculations getting confused:

ion-app {
  div.ion-page {
    max-width: 960px;
    margin: 0 auto;
  }
}

iOS Widgets

$
0
0

Hello guys, at some point are you planning to develop a module to make native widgets for iOS?

Black Border Issue on iPad with Magic Keyboard

$
0
0

Thanks for your willingness to help! I found a solution to my issue, which is actually related to Capacitor, not Ionic. The problem seems to be with the Keyboard plugin and can be solved by adding the following to the capacitor.config.ts file:

 plugins: {
    Keyboard: {
      //@ts-ignore
      resize: "none",
    },
},

Calling a Https Api, on App start up

$
0
0

@twestrick,

This is an example of what I am using:

HTTP_POST_RF_DEVICE_DATA_DATA(name, description): Observable<any>      //pc
{
  var datatx = {
    accountid: this.accountid,
    tokenid: this.tokenid,
    deviceid: this.node_selected,
    rfid: this.rf_node_selected,
    name: name,
    description: description
  }
  var Gateway_Data_api = 'https://testApi.net/api/RF_device_updates';
  return this.http.post(Gateway_Data_api, datatx, {
    headers: new HttpHeaders().set('ZUMO-API-VERSION', '2.0.0').set('x-functions-key', this.app_key)
  });
}

The issue I am having is that sometimes when the app starts, it takes a longer time to access the API. I do not think it’s a server cold start issue, but something in the app or mobile device is causing the delay.

When I start the app, it first goes to my homepage, where the user is authenticated. Once successful, it accesses another API to download some device information, and that is where I am experiencing the delay. Is there a way I can debug this to identify the real cause?


Black Border Issue on iPad with Magic Keyboard

$
0
0

Since you are using TS, you should be able to use KeyboardResize.None and not have to @ts-ignore.

Calling a Https Api, on App start up

$
0
0

You can look at DevTools for the app running on the device. For Android, in Chrome go to chrome://inspect/#devices. For iOS, see xcode - How do I open developer tools on iOS Simulator? - Stack Overflow.

You say it is after the app is running and the homepage is loaded. That seems to me to point to the slowness being on the API side.

Are you using CapacitorHttp? Having it intercept requests adds an additional layer and thus more time. I would only recommend using it if absolutely required.

Closing App

$
0
0

HI All

I have a button called.

App.exitApp();

But the app is not entirely closed but sitting in background, where you can click to continue its operation.

How can you close the App as you would when you swipe it of the screen?

Semantics of the App Plugin using App.addListener("backButton", myCallback)

$
0
0

I am writing a mobile app for Android using Capacitor (v6) and Ionic (v8). I am also using the Vue.JS (v3) framework. Several of the views/pages in my app have some special handling for the hardware “back” button. So I’ve imported the @capacitor/App plugin to add a callback for the back button.

As the view/page is mounted, I call:

this.backListener = await App.addListener('backButton',this.execBack.bind(this))

When the page is unmounted I call:

this.backListener.remove()

Everything works. The callback is invoked as expected when the user taps the hardware back button.

The problem is that there is more than one page/view in my mobile app. For example, first view/page “A” is loaded and displayed. The back-button callback is registered as shown above when view/page “A” is mounted. Then the user taps a component which causes a new view/page “B” to open. This navigation is accomplished by using Vue’s router like this:

this.$router.push("/view-B")

So view/page “B” is now mounted (view/page “A” is still mounted too, but it is not visible). But this new page “B” has it’s own special handling for the “back” button, so page “B” also registers a back-button callback with the code shown above. So now both page “A” and page “B” have callbacks registered. When the user actually taps the hardware “back” button while on page “B”, both callbacks are invoked (one call to the callback registered for page A and another call to the callback registered for page B).

But I don’t want both callbacks to be called. Once page “B” is mounted, it makes no sense for the back-button callback from page “A” to execute any more, even though page “A” is still mounted and waiting to be reactivated when page “B” closes.

Of course, I can unregister the back button callback at any time with the code shown above. But that gets complicated quickly. I have to create a callback so that when page “A” loads page “B”, it unregisters the callback for page “A”. Then when page “B” is closed, page “A” automatically comes to the foreground again. I would need to detect that page “A” is currently being shown an re-register the back-button callback for page “A”. This seems like a nightmare to manage, especially as the pages get nested multiple levels deep. It feels like there should be a simpler way.

When each page has it’s own back-button callback, I want the only the callback for the active page to be invoked. Is there some simple way to implement this, or do I really need register and unregister these callbacks as navigation occurs with the Vue router?

Semantics of the App Plugin using App.addListener("backButton", myCallback)

$
0
0

Stepping back for a sec, what are you trying to accomplish when the user hits the back button? Maybe there is a better way of doing it.

If you absolutely need to use the backButton listener, I would probably just register it once when your app loads and then based on the URL, call different logic.

Innovative Shipping Container Solutions – Looking for Talented Developers

Innovative Shipping Container Solutions – Looking for Talented Developers

$
0
0

I am interested in your job posting.
As an experienced App Developer, I expertly build cross-platform mobile apps using React Native and Expo. My skills extend to JavaScript, SwiftUI, Java/Kotlin, lonic Framework, React/Redux and the Expo SDK, enabling me to deliver high-performing apps for both iOS and Android.

I would like to discuss the project in more detail
You contact me via Telegram or Discord.
my t.g: donald_punky
discord: metaguy94
Best regards,
Ryo


Issues After Upgrading package.json and tsconfig.json in Ionic Project

$
0
0

hank you for your prompt response. I am a beginner developer working with Ionic. If I change this package, could it cause any issues in my project? The project is quite old, and I’m attempting to upgrade it. Will this package affect my code, considering there have been major changes?

How to call capacitor method from host application(Native to native communication)?

$
0
0

I have multiple plugins but now I want to call some performance measurement methods from the plugin package, how I can call that directly from the host application? like for android onCreate/ ios viewDidLoad?

Calling a Https Api, on App start up

$
0
0

@twestrick
I am not using CapacitorHttp, but I think this. HTTP.post is JS angular library if I am correct.

Calling a Https Api, on App start up

$
0
0

Ok, just wanted to make sure as even though you are using Angular’s HTTP’s methods/library, you could have enabled CapacitorHttp in your capacitor.config.ts and it would be intercepting calls behind the scenes.

Check DevTools as I mentioned to see if you can narrow down the slowness.

Calling a Https Api, on App start up

$
0
0

Yes i am looking to check using that method, but its one of those issue that i need to wait for it arise.

This is my config file

{
  "appId": "---",
  "appName": "--",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    }
  },
  "cordova": {
    "preferences": {
      "ScrollEnabled": "false",
      "android-minSdkVersion": "19",
      "BackupWebStorage": "none",
      "SplashMaintainAspectRatio": "true",
      "FadeSplashScreenDuration": "300",
      "SplashShowOnlyFirstTime": "false",
      "SplashScreen": "screen",
      "SplashScreenDelay": "3000",
      "WKWebViewOnly": "true"
    }
  },
  "ios": {
    "contentInset": "always"
  }
}```
Viewing all 230518 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>