@Mmadzharov wrote:

Hey guys after I updated to Ionic 5 my header disappeared. Any Idea

Posts: 1

Participants: 1

Read full topic

@Incubbus wrote:

(Ionic 5)
I am trying to build a one-page app which consists of two parts: a map and a list.
Between the map and the list (when viewing the map at the bottom; when viewing the list at the top) is a button which, when pressed, uses ion-content’s scrollToTop() & scrollToBottom().
So far this worked.

So i wanted to add the feature, that when the user scrolls manually into the direction of the map or the list, the page is scrolled into the direction automatically by using scrollToTop() or scrollToBottom().

That’s why i enabled scroll events on ion-content and listen to (ionScroll[Start/End]) like so:

@ViewChild(IonContent, { static: false }) _content: IonContent;

  private onScrollStart()
  {
    this._lastDeltaY = 0;
  }

  private onScrollEnd()
  {
    if(this._ignoreScrolling)
      return;

    let promise;
    this._ignoreScrolling = true;
    if(this._lastDeltaY > 0)
    {
      promise = this.openAView();
    }
    else if(this._lastDeltaY < 0)
    {
      promise = this.openBView();
    }
    promise.then(_ => {
      this._ignoreScrolling = false;
    });
  }

  private onScroll(event)
  {
    this._lastDeltaY = event.detail.deltaY;
  }



 private async openAView()
  {
    console.log('Opening A view...');

    await this._content.scrollToTop(viewChangeScrollTimeMilliseconds);
    this._AViewOpen = false;

    console.log('...done A');
  }

The problem is, that whenever an automatic scroll is done, there will be done a second one right after as i can see in the logs:

Opening A view...
...done A
Opening A view...
...done A

What am i doing wrong here or is this an ionic-bug?

Posts: 1

Participants: 1

Read full topic

@shepard wrote:

An ion-select with hundreds of options ( says years for example ).
Once an option is selected, the options should auto-scroll to that option and not require the user to have to manually scroll through the large list to find it.

Has this not yet been resolved in v5?

Any modern workarounds for this?

Posts: 1

Participants: 1

Read full topic

@KevinB1 wrote:

I changed my toolbar background (ionic 4) to transparent using:

ion-toolbar {
     --background: transparent !important;
     --ion-color-base: transparent !important;
 }

This works on all browsers except IE (Im tested on IE11).

I also tried setting the background with a selector that works when I edit it directly in IE, but it just gets ignored when putting it in my CSS:

ion-toolbar .toolbar-background {
      background: rgba(0,0,0,0) !important;
}

Is there any way to apply a workaround?

Posts: 1

Participants: 1

Read full topic

@ag-nishu wrote:

i am using mongo and express for the service layer and have deployed in openshift cloud. i can access api through postman and it works when i do ionic serve.
but when i converted through capacitor and tried to run on android device the rest call never happens. im not able to get pass login screen.
the error i get in android console-
E/Capacitor/Console: File: http://localhost/vendor-es2015.js - Line 46777 - Msg: ERROR

cant understand what it means, can someone help please?

Posts: 1

Participants: 1

Read full topic

@alexkoretzki wrote:

Hi
i have authentication server that i redirect to from the app to login
in the web all works but in the emulator after the login the return gets error

Capture563×703 86.3 KB

Posts: 1

Participants: 1

Read full topic

@aardra wrote:

Hi All

I am I got google maps working, but once i leave the page an re enter the maps is all greyed out till, i zoom in and out either using a mouse on crome or fingers on a mobile device.

I have seen many others with the same issue, but no clear solution.

Can someone help me solve this issue?

Posts: 1

Participants: 1

Read full topic

@obinnae wrote:

I’m rebuilding an app where a user can find other users within a certain distance (say, 30 miles). The user object has the city, state and/or zip. Any recommendation on how to achieve this efficiently - as in, find all users within the range? I know Google’s Maps api can be used, but would like to know other ideas.

Posts: 1

Participants: 1

Read full topic

@madmandrew wrote:

I’m on my 8th submission for this app, and it’s getting rejected because the content fails to load. My app works by loading content from a remote server on startup. It looks like all requests are failing.

The worst part is I have no way of replicating the issue that’s happening only in the review process. I’ve tested on every available emulator, including different versions of iOS, 13.1, 12.4, 11.1. I’ve also tested on iPhone 10. In EVERY SINGLE test the app works as intended.

I’ve added remote logging (which fails to send to server as well). I’ve resorted to logging my errors to the screen so that when Apple inevitably sends me a screenshot of the error message I can get some glimpse of whats happening.

I’ve been able to narrow down the exact request that is failing first (even though all http requests are failing) and in my next submission I will try and log better why it’s failing.

Also to note I’m using the Cordova Network Plugin, and it’s reporting that there is no internet access, but the reviewer claims they are connected.

I’m very much at a loss what to do other then just try more detailed logs… Apple is really driving me crazy with their stupid review process.

OH the kicker is I have EXACTLY the same app deployed in the app store right now!! just with a different white label and it’s functioning fine.

Posts: 1

Participants: 1

Read full topic

@VigneshBalakrishnan wrote:

Hi all,
I want to show user search icon in keyboard when search field is focused. I know it’s a silly question but i couldn’t fix it. Please help me, Thanks in advance.

Here is my html

<ion-searchbar #autofocus (ionInput)=“inputSearch($event)” (ionCancel)=“cancelSearch()” debounce=“500”
(keyup.enter)=“startSearching()” placeholder="">

Posts: 1

Participants: 1

Read full topic

@r0ber wrote:

Hello guys, I am new here and I am trying to find the option “Native Plugin Keys” in my ionicHub account. I have a personal account, is it necessary to pay for use this feature? It means that I cannot use native plugin with capacitor if I have not an enterprise account? Sorry guys but I am very confuse with this, and I tried to find the answer googleing by myself, but I did not find it at the moment.
I just trying to follow this video https://dashboard.ionicframework.com/ , but i cannot see exactly the same options than him .
Many thanks.

Posts: 1

Participants: 1

Read full topic

@poplan wrote:

I get it like this

but I want it to be something like this

<ion-card (click)="onReports()">
    <ion-item detail class="ion-no-padding" lines="none">

      <ion-grid fixed>
        <ion-row>
          <ion-col size="5">
            <ion-icon
              name="image-outline"></ion-icon>
          </ion-col>
          <ion-col>
            <ion-card-header>
              <ion-card-title style="color: #6F449B;">
                Отчет 1
              </ion-card-title>
              <ion-card-subtitle>Контроль: н/д</ion-card-subtitle>
            </ion-card-header>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
  </ion-card>

Posts: 1

Participants: 1

Read full topic

@mirzam wrote:

Hi, I’m using this example

Now my problem is that i have a page with two paragraphs of text. For each of these I need a play/pause button with a progress bar

Capture.PNG2387×773 276 KB

all the mp3 files are stored in /assets/sounds/file1.mp3 and /assets/sounds/file2.mp3

But how do I load these in the .ts file and make them play individually ?

Posts: 1

Participants: 1

Read full topic

@fewl wrote:

Hi,

Bit of a newbie but couldn’t find any proper example on how to properly use controller (actionsheet, modal, etc) with React.

Here is just a boilerplate but I would like to :

• programmaticaly create a modal on elent click
• pass any parameters so I can load the right data in the modal

Many thanks

import React from 'react';
import {IonContent,  IonPage} from '@ionic/react';

import {actionSheetController, modalController} from '@ionic/core';

class Testmodal extends React.Component<{},State> {
  constructor(props:any) {  
    super(props);
  }

  openModal(id: number){
      //Create modal with parameters 
      /* //Not working code...
       modalController.create({

      })*/
  }

  render(){  
    return ( 
        <IonPage>      
            <IonContent>  
                  <div key="1" onClick={() => this.openModal(1)}></div>
                  <div key="1" onClick={() => this.openModal(1)}></div>
                  {/* etc... */}
            </IonContent>  
        </IonPage>
    );
  }
};

export default Testmodal;

Posts: 1

Participants: 1

Read full topic

@jvilas10 wrote:

Check Below Link - it work for me.

As it’s mentioned in the breaking changes, you should use Observables .

For example, you can create the following service:

import {Injectable} from '@angular/core';
import {Subject} from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class GlobalFooService {

    private fooSubject = new Subject<any>();

    publishSomeData(data: any) {
        this.fooSubject.next(data);
    }

    getObservable(): Subject<any> {
        return this.fooSubject;
    }
}

Now, you can subscribe in any component like app.component.ts :

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss']
})
export class AppComponent {

    constructor(private globalFooService: GlobalFooService) {
        this.initializeApp();
    }

    initializeApp() {
        // other code

        this.globalFooService.getObservable().subscribe((data) => {
            console.log('Data received', data);
        });
    }
}

Now, you just have to emit the event from some other component:

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss']
})
export class HomePage {

    constructor(private globalFooService: GlobalFooService) {
    }

    onSomeButtonClick() {
        this.globalFooService.publishSomeData({
            foo: 'bar'
        });
    }
}

Posts: 1

Participants: 1

Read full topic

@inside wrote:

I’ve build ios native package my app on AppFlow and uploaded to testFlight.
Now, at the first time that I run the app on the device (installed from testFlight):
app dosen’t send in http request headers Cookie: JSESSIONID (which user get after sign in).
If I close the app and open it again, then work correctly. When I run my app directly by USB it works allways correctly too.
I’ve tried: - Download the app (TestFlight) -> open it (wrong) -> close it -> open it again (correctly)
The same version of this app works correctly on android native.

Posts: 1

Participants: 1

Read full topic

@MatthewPringle wrote:

Im a little concerned with what seems to be the complete lack of support or examples for Capacitor.

I have seen people posting in GitHub asking questions only to be reprimanded and told to come to this forum, which for the most part is dead or use the Slack channel which for the most part is dead.

You are also told to look at the documentation or look at the source to see how code is implemented in capacitor. I would suggest the documentation is lacking at best and just wrong in some cases.

For instance, I am looking at creating a plugin.

If I look at the iOS page I am told I can fire an event using

self.bridge.triggerWindowJSEvent(eventName: "myCustomEvent", data: "my custom data")

Which gives an error in the browser

SyntaxError: Unexpected identifier 'custom'. Expected ')' to end an argument list.

On the Android page

self.bridge.triggerWindowJSEvent("myCustomEvent", "{ 'dataKey': 'dataValue' }");

Which suggests the iOS version should be formatted like this instead

self.bridge.triggerWindowJSEvent( eventName: "myCustomEvent" , data: "{ 'dataKey': 'dataValue' }" )

Which works and an event object is now received in the JS layer.

Now what I really want is to use self.notifyListeners(“myPluginEvent”, data: [:]) which works great but would seem to be very limited, having only add and remove functionality on the JS layer.

I want to be able to remove all listeners from the plugin, from the native layer, which doesn’t seem to be supported. This becomes an issue, with live reloading as the JS layer fires from scratch but the iOS layer persists so the native events fire even though there is no longer a listener in the JS layer and a new one has been setup after the code reloaded.

So if I cant ask questions on GitHub, the forum is dead, the documentation is not helpful, no one answers on the Slack channel, how does Ionic expect people to use and support Capacitor?

Posts: 1

Participants: 1

Read full topic

@CloudInvoice wrote:

Hi there,

I’m currently working on an app that requires some printing with bluetooth printers.
I setup everything as in the docs but when I try to test it on an ios device it logs the following message on Xcode console.

To Native Cordova -> BluetoothSerial discoverUnpaired BluetoothSerial1510874868 [“options”: []]
Error: Plugin MEGBluetoothSerial does not respond to method call discoverUnpaired:.
Ensure plugin method exists and uses @objc in its declaration
To Native Cordova -> BluetoothSerial list BluetoothSerial1510874869 [“options”: []]

I’m currently working with the following Hardware:

• iphone x (version 13.3.1)
• google one plus 3.

Versions:

• ionic 5
  “@ionic/angular”: “^5.0.0”,
  “@ionic-native/bluetooth-serial”: “^5.22.0”,
  “cordova-plugin-bluetooth-serial”: “^0.4.7”,

Note: Someone suggested that I should add the following code to capacitor.config.json:
“ios”: {
“cordovaSwiftVersion”: “3.0”,
“cordovaLinkerFlags”: [
“-ObjC”
]
}
Any thoughts?

Thanks for the quick support,
Hope to hear from you soon,
Tiago

Posts: 1

Participants: 1

Read full topic

@MatthewPringle wrote:

In the JS layer I use

let myListener = Plugins.MyPlugin.addListener( 'myEvent' , function( data ) {
console.log( data );
});

In the iOS native layer of the plugin I use

self.notifyListeners( "myEvent" , data: myData )

This all works great, but if the JS layer reloads ( as in live reload ) I need to add the listeners again. Unfortunately reloading the JS layer doesn’t clear the listeners from the native layer and they all continue to fire. So what happens is that listener after listener builds up on the native plugin and they all fire according to the logs. The JS layer thankfully only receives the event from the listener is currently added.

Having searched through Capacitor code I see I have access to the listeners in my plugin.

I can use self.hasListeners( "myEvent" )

and I can also loop through them

guard let listeners = self.getListeners( "myEvent" ) else {
    print( "Error fetching listeners" )
    call.resolve()
    return
}

for listener in listeners {
    print( listener )
    print( type( of: listener ) )
}

which gives me the following for each listener it finds

<CAPPluginCall: 0x6000013c3090>
CAPPluginCall

So im stuck on how to properly remove each attached listener in the plugin.

I can use self.eventListeners.removeAllObjects() but I suspect this is wrong and would just cause issues.

Any ideas?

Posts: 1

Participants: 1

Read full topic

@zawadhh wrote:

I am trying to add a search-bar to my list but I failed each time

my .html file

<ion-header>
  <ion-toolbar class="new-background-color">
    <ion-title>    
      <ion-text color="light">
        <h4> my app</h4>
      </ion-text>   

  </ion-title>
  <ion-buttons slot="start">
    <ion-menu-button autoHide="false" style="
    color: white;
"></ion-menu-button>
  </ion-buttons>
  
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-refresher slot="fixed" 
    (ionRefresh)="ionRefresh($event)" 
    (ionPull)="ionPull($event)" 
    (ionStart)="ionStart($event)">
      <ion-refresher-content
        pullingIcon="arrow-dropdown"
        pullingText="refresh"
        refreshingSpinner="circles"
        refreshingText=" ،،،Refreshin>
      </ion-refresher-content>
    </ion-refresher>
    <div style="
    align-content: center;
    justify-content: center;
    align-items: center;
    height: 50px;
    background-color: #3357a7;
    font-size: large;
    font-weight: bold;
    color: #ffc95b;
    margin-bottom: 10px;
    margin-top: 10px;
    text-align: center;
  ">
  
      <ion-label style="
      margin: auto;
      position: absolute;
      top: 30px; left: 0; bottom: 0; right: 0;
      
      ">  
        all content
        </ion-label>
        
    </div>
    <div style="
    align-content: center;
    justify-content: center;
    align-items: center;
    font-size: large;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 10px;
    text-align: center;
  ">

        
    </div>
    
  


    <ion-grid class="mygrid">
      <ion-row class="my-item" *ngFor="let item of dataArray;let i=index" (click)="gotoNext(i)">
        <ion-col size="4">
            <ion-thumbnail>
                <img src="https://qateef-ads.co/uploads/{{ item.document }}" alt="your image">
            </ion-thumbnail>
        </ion-col>
        <ion-col size="6">
            <ion-row class="myitems">
              <p><strong> {{ item.title }} </strong>  </p>
              </ion-row>
              <ion-row size="6" class="myitemsc">
              <p> {{ item.city }} </p>
              <p  class="myitemstime"> {{ checktime(item.time) }} </p>
              </ion-row>
        </ion-col>
      </ion-row>
    </ion-grid>


  </ion-content>

my .ts file

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router,NavigationExtras } from '@angular/router';
import { LoadingController } from '@ionic/angular';
import  * as moment from 'moment';

@Component({
  selector: 'app-tab2',
  templateUrl: './tab2.page.html',
  styleUrls: ['./tab2.page.scss'],
})
export class Tab2Page implements OnInit {
  dataArray;

  constructor(private http: HttpClient,private router: Router,public loadingController: LoadingController) {
   
}

      async ngOnInit() {
	   const loading = await this.loadingController.create({
      message: 'working....'
    });
    await loading.present();
        this.http.get('https://mysite.co/apis/all.php').subscribe(async (response: any) => {
		  await loading.dismiss();
          console.log(response);
          this.dataArray = response;
		 
      });
  }

 
  async ionRefresh(event) {
   const loading = await this.loadingController.create({
      message: 'working....'
    });
    await loading.present();
    console.log('Pull Event Triggered!');
    this.http.get('https://mysite.co/apis/all.php').subscribe(async (response: any) => {
	 await loading.dismiss();
      console.log(response);
      this.dataArray = response;
      event.target.complete();
  });
}

gotoNext(index) {
  localStorage.setItem('detail', JSON.stringify(this.dataArray[index]));
  this.router.navigate(['/details']);
}

ionPull(event) {
  console.log('ionPull Event Triggered!');
}

ionStart(event) {
  console.log('ionStart Event Triggered!');
}
checktime(dttime)
{

return moment(dttime).fromNow().toString();
}

}

Posts: 1

Participants: 1

Read full topic