Quantcast
Channel: Ionic Forum - Latest topics
Viewing all 70440 articles
Browse latest View live
↧

Align to the center of ion row

April 15, 2020, 12:53 pm
$
0
0

@Astrid5 wrote:

Hey, I have an issue that I’m pretty sure that is simple but as I’m new to Ionic, I don’t know how to solve it. I have to reproduce the following screen:

Loading
Loading360×640 5.66 KB

but so far I got this:

image
image298×533 10 KB

I have to center the title and the image, but nothing seems to work. Here’s my HTML and SCSS:

<ion-content (click)="modalCtrl.dismiss()">
    <ion-row class="search-image ion-justify-content-center">
      <ion-col>
        <p> Procurando eventos próximos</p>
        <ion-img [src]="'/assets/official-images/loading.svg'"></ion-img>
      </ion-col>
    </ion-row>
</ion-content>


ion-content {
  --background: #FF9009;
}

.search-image {

  ion-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }

  p {
    font-family: "Futura Bk BT", sans-serif !important;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0.4px;
    color: #FFFFFF;
  }
}

any tips…? Thanks everyone.

Posts: 1

Participants: 1

Read full topic

↧
Search

Geolocation, Reverse geolocation and map

April 15, 2020, 1:56 pm
$
0
0

@tanver-ionic wrote:

Hi. I am fairly new to Ionic. Developing with latest Ionic v5. I need few things to get my app started. Here is the scenario: I have the lat long data.

  1. I want to show the address from that lat long and also show that location selected by a marker on a map.
  2. Upon click on edit user can edit location and as user selects from possible suggestions I need the lat long of that selected new location.
  3. And not the least user can also move the marker to set a location and obviously I want to have that lat long.

Google geolocation is paid. It’s a non-profitable app. So what is the best solution for this scenario?

Posts: 1

Participants: 1

Read full topic

↧
↧

Can you still create v1 apps by upgrading to new Ionic CLI?

April 15, 2020, 2:27 pm
$
0
0

@yellowkicks wrote:

I am curious if I upgrade my current version of Ionic CLI (currently using 5.4.13) to the newest @ionic/cli version if I will still be able to edit and maintain my v1 apps along with create new v4/v5 apps?

Thanks for any info or pointing me in the best direction to answer my question.

Posts: 1

Participants: 1

Read full topic

↧

Syntax Error: Cannot use import statement outside a module

April 15, 2020, 7:41 pm
$
0
0

@CodeKazuko wrote:

Yesterday, there wasn’t a bug but I forget that I have corvdo install and try to install again. Is it due to reinstalling causing the error

The error file
‘’’
C:\Program Files\nodejs\node.exe src\components\quiz\QuizInstructions.js

c:\Users\hille\Desktop\corona-attack\src\components\quiz\QuizInstructions.js:1
import React, { Component, Fragment } from ‘react’;
^^^^^^

SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:1072:16)
at Module._compile (internal/modules/cjs/loader.js:1122:27)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
at internal/main/run_main_module.js:18:47
‘’’
This is my code below
‘’’
import React, { Component, Fragment } from ‘react’;

import { Link } from ‘react-router-dom’;

import { Helmet } from ‘react-helmet’;

const QuizInstructions = () =>(

<Fragment> 

    <Helmet><title> Quiz Instructions </title></Helmet>

    <div className = "instructions container">

       <h1>How to Play</h1>

       <p>Please read these instructions completely.</p>

       <ul className="browser-default" id="main-list">

          <li>The game has a timer of 5 minute and ends when timer ends.</li>

          <li>Each game consists of 9 questions.</li>

          <li>Each question contains 4 choices.</li>

          <li>Select the option which best answers the question by choosing it.</li>

          <li>>Each game has two types of hint:

              <ul id="sublist">

                  <li> 1 50-50 chances</li>

                  <li> 3 Hints</li>

              </ul>

          </li>

          <li>

               Selecting a 50/50 chance by clicking the icon 

               will remove 2 incorrect answers, thus leaving the correct answer and wrong answer.       

          </li>   

          <li>

              Using a hint by clicking the icon 

              will remove one wrong answer. You can use as many hints available on the question. 

          </li>

          <li>You can exit at any time of the game. Your score will be shown shortly after exiting.</li>

          <li>The timer start once the game loads</li>

          <li>We shall see how prepared are you for Corona-19.</li>

       </ul>    

    </div>    

</Fragment>

);

export default QuizInstructions;
‘’’

Posts: 1

Participants: 1

Read full topic

↧

App works on browser, but not on Android device

April 15, 2020, 8:04 pm
$
0
0

@leo050011 wrote:

I am using Ionic 5 to build an app. It works fine on browser. But not on real device. And I am using jQuery POST to make a request. I got an error message: readystate 0 responsetext status 0 statustext error
My environment is:
Ionic CLI : 6.4.3 (C:\Program Files\nodejs\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.0.7
@angular-devkit/build-angular : 0.803.26
@angular-devkit/schematics : 8.3.26
@angular/cli : 8.3.26
@ionic/angular-toolkit : 2.2.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 6 other plugins)
System:
NodeJS : v12.16.1 (C:\Program Files\nodejs\node.exe)
npm : 6.14.4
OS : Windows 10
I made some changes in config.xml file:







Posts: 1

Participants: 1

Read full topic

↧
↧

Events Broadcasting in ionic5

April 15, 2020, 8:36 pm
$
0
0

@elduderino15 wrote:

I am migrating my app from Ionic3 to 5.
First blocker I am finding is the events pipeline

I use events in the app for sending signals between views with Events. Now events is removed in 5 and I am looking for an alternative. How can I broadcast events in one view / page and create listeners for that specific message in others?

My previous code was similar to

  this.events.subscribe('system:phoneInfo', (systemInfo: string) => {
    Logger._phoneInfoString = systemInfo;
  });

where any view could call system:phoneInfo and the subscriber would do as said. My head does not wrap around how to distribute this over multiple views.

Posts: 1

Participants: 1

Read full topic

↧

CSS Issue with Ion-tab-bar and ion-content issue - iOS build

April 15, 2020, 9:21 pm
$
0
0

@1Samit1 wrote:

I have tried to style the ion-tab-bar for my app using the following style:

ion-tab-bar{
    position: absolute;
    border-radius: 10px;
    width: 95%;
    margin: 5px 2.5%;
    bottom: 0px;
}

ion-tabs{
    padding-bottom: 66px;
    background: linear-gradient(to bottom right, #2CD695, #979CD6);
}

When building for Android there are no Issues as it displays it exactly as styled. However when building for iOS the css border-radius is completely ignored. Along with this the top of the ion-content seems to be under the statusbar whereas in Android no such issue is faced. Please see the attached screenshots.

Hope to get some quick advice from the community. Thanks in advance

iPhone 11

Screen Shot 2020-04-16 at 1.52.26 pm
Screen Shot 2020-04-16 at 1.52.26 pm898×1866 110 KB

iPhone 8

Screen Shot 2020-04-16 at 2.04.35 pm
Screen Shot 2020-04-16 at 2.04.35 pm858×1704 115 KB

Android

Screen Shot 2020-04-16 at 2.18.58 pm
Screen Shot 2020-04-16 at 2.18.58 pm858×1704 153 KB

Posts: 1

Participants: 1

Read full topic

↧

The specified item could not be found in the keychain

April 15, 2020, 10:15 pm
$
0
0

@trajeshkumar92 wrote:

I’m getting the below error while running the app in simulator and device. The app opens and freezes and nothing happens. The app works fine in android.

Error: Failure in SecureStorage.get() - The specified item could not be found in the keychain

Packages:
“@ionic-native/core”: “^5.0.0”,
“@ionic-native/http”: “^5.2.0”,
“@ionic-native/network”: “^5.12.0”,
“@ionic-native/secure-storage”: “^5.2.0”,
“@ionic-native/splash-screen”: “^5.0.0”,
“@ionic-native/status-bar”: “^5.0.0”,
“@ionic/angular”: “^4.1.0”,

IOS version in simulator: 13.3

Posts: 1

Participants: 1

Read full topic

↧
Search

How to get my app link for all platforms using dynamic links

April 16, 2020, 1:23 am
$
0
0

@Galilo wrote:

I am new to the framework… I need a step by step tutorial to follow in order to create a firebase dynamic link and use it in my app to share my app links on all platforms.
I know I need to use:

  1. cordova-plugin-firebase-dynamiclinks
  2. Firebase dynamic links setup.

But I dont know how to set the firebase dynamic link and where to get the plugin parameters and configurations for my app.

Posts: 1

Participants: 1

Read full topic

↧
↧

Ionic 5 react Capacitor BluetoothLE

April 16, 2020, 2:05 am
$
0
0

@samdawit wrote:

Hi can anyone help me how to use BluetoothLE, I wanted to auto-connect from my ionic 5 react App so that I can print a receipt on my zebra z1310 Bluetooth printer. Please I been trying this for a week with no luck

Posts: 1

Participants: 1

Read full topic

↧

How to grab emit event of component via ion-popover in ionic5

April 16, 2020, 4:17 am
$
0
0

@shreyasooksamlabs wrote:

How to get data back when the component connected with ion-popover emit some data .
Any method of grabbing emit event.As all other methods are connected with ion-popover I have used this component as both as selector and popover.
For example,
selectedOption(option_selected) {
console.log(“option_selected----”,option_selected)
this.option_selected.emit(option_selected)

this.popoverController.dismiss(option_selected)//Can't be used for both component and popover

}
async presentPopover(ev: any) {
var self = this;
const popover = await this.popoverController.create({
component: OptionOnMenuComponent,
componentProps: {
title: this.title
},
event: ev,
translucent: true
});
popover.onDidDismiss().then((data) => {
console.log(“data after popover is dismissd”, data[“data”])
self.tab_selected = data[‘data’]
})
return await popover.present();
}

Posts: 1

Participants: 1

Read full topic

↧

Molpay Integration

April 16, 2020, 5:13 am
$
0
0

@ladaniavadh wrote:

Has Anyone integrated this plugin in application ionic-5?

I am trying to implement this and follow installation all 4 steps, but I can see only white screen

Posts: 1

Participants: 1

Read full topic

↧

Problem to build Android

April 16, 2020, 5:21 am
$
0
0

@carlosvieira95 wrote:

Hey guys.
I learning about Ionic and i made 2 apps one of them is working and the other is having this problem:
How i can fix this?

Checking Java JDK and Android SDK versions
ANDROID_SDK_ROOT=undefined (recommended setting)
ANDROID_HOME=C:\Users\Carluts\AppData\Local\Android\Sdk\ (DEPRECATED)
'sh' is not recognized as an internal or external command,
operable program or batch file.
C:\Gradle\gradle-5.6.1\bin\gradle: Command failed with exit code 1
[ERROR] An error occurred while running subprocess cordova.

        cordova.cmd build android exited with exit code 1.

Ionic:

   Ionic CLI                     : 6.6.0 (C:\Users\Carluts\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 4.11.10
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 15 other plugins)

Utility:

   cordova-res (update available: 0.12.0) : 0.9.0
   native-run (update available: 1.0.0)   : 0.2.9

System:

   Android SDK Tools : 26.1.1 (C:\Users\Carluts\AppData\Local\Android\Sdk\)
   NodeJS            : v13.9.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.14.0
   OS                : Windows 10

Posts: 1

Participants: 1

Read full topic

↧
↧

Are there valid alternatives to Firebase for push notifications?

April 16, 2020, 5:42 am
$
0
0

@ioclaudio wrote:

Hi,
I have to implement push notifications on an Ionic4 app both for Android and iOS devices.

I’ve seen many tutorials that use Firebase to do this.
Are there valid and suggested alternatives to Firebase?

Is it possible to send notifications without using a third-party service?
Maybe using our web services?

Thank you

Claudio

Posts: 1

Participants: 1

Read full topic

↧

Background Geolocation: Interval cannot be set in BackgroundGeolocationConfig, Battery draining issue for IOS

April 16, 2020, 6:23 am
$
0
0

@ujjwalionic wrote:

Hi, I am using @mauron85/cordova-plugin-background-geolocation in my Ionic capacitor React Application.
Not able to customise the BackgroundGeolocationConfig, e.g. Interval cannot be set. Location update notification is inconsistent. Sometimes it is very frequent and sometimes very delayed. Not able to control from app. Causing Battery draining issue for IOS, even I set the Location Settings as “While Using the App” also.

My requirement is only every 1 hour, Device location status would be notified, device may be in Active, Inactive (Background ) or Device is in idle state.

I would be grateful someone can help me to resolve it.

Thanks!

Posts: 1

Participants: 1

Read full topic

↧
Search

Ionic 4 Ios mode not getting applied on ios devices and its always md

April 16, 2020, 6:36 am
$
0
0

@rohitbhoite wrote:

I am working ionic v4 app and facing one strange issue. Whenever I run ionic cordova run ios command the app launches but platform md mode is always being applied.I have checked that I am not overriding any default setting with IonicModule.forRoot method.

If I change the config options to below code then only ios node is applied.
IonicModule.forRoot(
{
mode:‘ios’,
swipeBackEnabled: false
}
),

If I create a new temlate project from scratch then it is working as expected.

Has anyone come across this weird issue?

Posts: 1

Participants: 1

Read full topic

↧

Ionic Food Delivery App using Firebase

April 16, 2020, 6:37 am
↧
↧

How to specify an item to delete within Typescript array?

April 16, 2020, 6:40 am
$
0
0

@Sweg wrote:

In my Ionic / Angular app, I have the following Conversation & Message models:

export class Conversation {
    constructor(
        public id: string,
        public userId: string,
        public mechanicId: string,
        public messages: Message[]
    ) { }
}

export class Message {
    constructor(
        public id: string,
        public text: string,
        public userId: string,
        public timestamp: Date
    ) { }
}

Here is where I am populating the data:

private _conversations = new BehaviorSubject<Conversation[]>([
    new Conversation(
      'conversation1',
      'user3',
      'user1',
      [
        new Message('message1', 'Test message', 'user3', new Date(2018, 0O5, 0O5, 17, 23, 42, 11)),
        new Message('message2', 'Another message', 'user1', new Date(2018, 0O6, 0O5, 17, 23, 42, 11))
      ]),
    new Conversation(
      'conversation2',
      'user4',
      'user2',
      [
        new Message('message3', 'my  message', 'user4', new Date(2018, 0O7, 0O7, 17, 23, 42, 11)),
        new Message('message4', 'more messages', 'user2', new Date(2018, 0O7, 0O7, 17, 23, 42, 11)),
      ])
  ]);

I am trying to delete a specified Message within a Conversation .

For example, I want to delete the message with id = message3 , which is inside conversation2 .

I am currently able to delete an entire Conversation :

deleteConversation(convoId: string) {
    return this.conversations.pipe(
      take(1),
      delay(1000),
      tap(conversations => {
        this._conversations.next(conversations.filter(convo => convo.id !== convoId));
      }));
  }

But I am struggling applying this code to deleteMessage() :

deleteMessage(conversationId: string, messageId: string) {
    return this.conversations.pipe(
      take(1),
      delay(1000),
      tap(conversations => {

      })
    )
  }

Posts: 1

Participants: 1

Read full topic

↧

Add a title to InAppBrowser Toolbar

April 16, 2020, 7:45 am
$
0
0

@karabillie wrote:

Hi everyone.
I am using the InAppBrowser plugin to open a url inside a webview.
here is my code:

const ref = this.inAppBrowser.create(encodedURL, ‘_self’, location=yes,toolbar=yes,toolbarcolor=${primaryColor},closebuttoncolor=#ffffff,hidenavigationbuttons=yes,hideurlbar=yes);

where primaryColor is the hex color of the app.
As you can see in my options, I am hiding the url. Instead of that, I want to show a title.
Is it possible to do it with an option? If not, how can I do it?
I search everywhere but could not find any solution. Thanks.

Posts: 1

Participants: 1

Read full topic

↧

Missing FIRInstanceID.h file from iOS project

April 16, 2020, 8:13 am
$
0
0

@syntillateapp wrote:

Has anyone found this issue when building an iOS project?
'FIRInstanceID.h' file not found

I was adding push notifications to an Ionic/Capacitor project.

Project Info:

Ionic:

   Ionic CLI                     : 6.5.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.0
   @capacitor/core : 2.0.0

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.0.0) : 0.2.6

System:

   NodeJS : v12.16.1 (/usr/local/bin/node)
   npm    : 6.13.4
   OS     : macOS Catalina

Podfile

install! 'cocoapods', :disable_input_output_paths => true

def capacitor_pods
  # Automatic Capacitor Pod dependencies, do not delete
  pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
  pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
  pod 'CordovaPlugins', :path => '../capacitor-cordova-ios-plugins'
  pod 'CordovaPluginsResources', :path => '../capacitor-cordova-ios-plugins'
  # Do not delete
end

target 'App' do
  capacitor_pods
  # Add your Pods here
  pod 'Firebase/Messaging'
end

Posts: 1

Participants: 1

Read full topic

↧
Viewing all 70440 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>