Hi
How to show Wordpress catagory link in ion tabs eg if i try use ```
IonTabButton tab=“Home”>
Its work but all Wordpress categorie list show but
I am unsuccess to show
IonTabButton tab="Home/6">
But not work in tab Any One help me out how to show sub categories
I also try with
IonTabButton click=Home/6 Not work click only working in ion button1 post - 1 participant
I need help creating a login screen using firebase and a login and registration screen.
who can help me I thank you very much
4 posts - 2 participants
Hi everyone,
What I’m using is LocalNotifications from @capacitor/core.
So what I did is this:
LocalNotifications.schedule({
notifications: [
{
title: 'Title',
body: 'Body',
id: 1,
schedule: {every: 'hour', on: {minute: 40}},
}
]
});
But it doesn’t work.
Any ideas?
1 post - 1 participant
Hello everyone, I built a fully functional offline Music app with Ionic 4/Angular 8 (Couldn’t use ionic 5 as I had gone too far by the time it was fully released). This app is truly fully functional with support for audio id3 tags and album art all of which is processed locally on the device since this is dealing with locally stored files, it supports almost all files including lossless FLACS and 3d audio effect, file sharing etc. while featuring a unique neumorphic UI.
I also added support for external memory cards which is not normally supported by the files plugin and the initial saving of the scanned music data is partly handled by a background thread via webworkers since saving to database crashes on some devices with a ton of music files.
As an ionic enthusiast, I just want people to know that such apps are possible on ionic since there seems to be scarcity of materials on the topic so I wasn’t entirely sure it was possible until I built it.
Lastly, it is free and without ads, current version is 0.93.
Check it out on Playstore
1 post - 1 participant
How to disabled div attribute i want to disabled a div based on condition is there any solution for it?
1 post - 1 participant
Hi,
I’m trying to use the ion-picker component with multiple columns in a React Ionic app.
I need to set the possible values in one column based on the selected values in the other columns analogous to what the ion-datetime component is doing (where the values for day depend on the selected month and year).
I can catch the change with
document.addEventListener('ionPickerColChange', (event) => {
...
this.setState({ columns: ... })
}
The problem is that the picker (which receives the columns as <IonPicker … columns={this.state.columns} /> doesn’t seem to get refreshed when the state changes. Items that should be disabled are still there and only disappear when I close and reopen the picker.
Any idea how I can solve this? Or alternatively, does someone know an npm package that I can use instead which contains components for a datepicker and a custom picker which supports this functionality?
Thanks!
1 post - 1 participant
It’s a simple screen where user can enter a Github username and some info associated with it will be shown.
It works fine witth MockData (offline array)
So you type in SearchBar -> Updates Home’s State -> Home Passes updated “profiles” to CardList -> Passes to Card.
I can see in devtools the console log works. I’ve also implemented this on plain react and it works. I wonder what I am missing here?
import React, { useState, useEffect } from "react";
import axios from "axios";
import {
IonContent,
IonHeader,
IonList,
IonPage,
IonTitle,
IonToolbar,
useIonViewWillEnter,
IonSearchbar,
IonListHeader,
IonItem,
IonAvatar,
IonLabel,
} from "@ionic/react";
import "./Home.css";
const mockData = [
{
id: "1",
name: "Sans Mansion",
company: "WOL",
avatar_url: "https://placehold.it/100",
},
{
id: "2",
name: "John Doe",
comapny: "Deere Farms",
avatar_url: "https://placehold.it/100",
},
];
interface Profile {
id: string;
name: string;
company: string;
avatar_url: string;
}
interface CardListProps {
profiles: Profile[];
}
interface CardProps {
id: string;
name: string;
company: string;
avatar_url: string;
}
interface SearchBarInterface {
updateProfiles: Function
}
const Card: React.FC<CardProps> = (props) => {
return (
<IonItem>
<IonAvatar slot="start">
<img src={props.avatar_url}></img>
</IonAvatar>
<IonLabel>
<h2>{props.name}</h2>
<p>{props.company}</p>
</IonLabel>
</IonItem>
);
};
const CardList: React.FC<CardListProps> = (props) => {
return (
<IonList>
{props.profiles.map((profile) => (
<Card
key={profile.id}
id={profile.id}
name={profile.name}
company={profile.company}
avatar_url={profile.avatar_url}
/>
))}
</IonList>
);
};
const SearchBar: React.FC<SearchBarInterface> = (props) => {
const [searchText, setSearchText] = React.useState("");
const handleSearch = async (e: CustomEvent) => {
const response = await axios.get(`https://api.github.com/users/${searchText}`)
props.updateProfiles(response.data)
};
const handleInput = (e: CustomEvent) => {
setSearchText((e.target as HTMLInputElement).value);
};
return (
<IonSearchbar
value={searchText}
onIonChange={handleSearch}
onIonInput={handleInput}
animated
debounce={1000}
/>
);
};
const Home: React.FC = (props) => {
const [profiles, setProfiles] = useState<Profile[]>([]);
useIonViewWillEnter(() => {
console.log('will enter')
});
const updateProfiles = (profile: Profile) => {
let newProfiles = profiles
newProfiles.push(profile)
setProfiles(newProfiles)
console.log(profiles)
}
return (
<IonPage id="home-page">
<IonHeader>
<IonToolbar>
<IonTitle>GitHub Cards App</IonTitle>
</IonToolbar>
<IonToolbar>
<SearchBar updateProfiles={updateProfiles}/>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonListHeader>Search Results</IonListHeader>
<CardList profiles={profiles} />
</IonContent>
</IonPage>
);
};
export default Home;
1 post - 1 participant
Buenas comunidad, soy nuevo desarrollando en Ionic 5, tengo un problema con una app que he creado, tengo una web api en .Net Core y una base de datos sql server la cual ambas tengo publicada en la nube y al hacer pruebas de mi app desde el navegador funciona bien el CRUD que he hecho, pero al generar el apk e instalarla en mi móvil android no me muestra los datos no se si hago algo mal al generar el apk o tengo que hacer algunas configuraciones, el comando que utilizó para generar el apk es ionic cordova build android, ya probe instalando esa apk también firmandola pero no logro conectar mi app móvil con el servicio web que tengo en la nube, si alguien me puede guiar se lo agradeceria mucho ya que estoy muy interesado en aprender al 100 este framework.
1 post - 1 participant
I’m trying to authenticate a user using Firebase Auth. When using ionic serve --ssl everything works as you would expect.
However, when using ionic cordova run android -l --ssl and attempting to login the phone switches to the browser and opens a new tab. Selecting the account you would like to use (Google Auth) closes the tab. And that’s where it ends. Closing the browser and switching back to the app reveals the login page without any authentication occurring.
Here’s a video of it in action. IMGUR
I’ve tried the following guides:
And the following libs:
Any help I can get at this point would be greatly appreciated!
1 post - 1 participant
Hello everyone! I am asking this question since UIWebView is being deprecated. I did read the following ionic article:
If I understand this article correctly, we have 2 options:
Here comes my question. By curiosity, I went through the native code generated by capacitor on an ionic4 + capacitor and saw the following code:
Note that we do have some custom plugins, but the article states that Capacitor will replace every reference to UIWebView.
That being said, I can still see some references to UIWebView. I was wondering if that was normal and if I can be sure that Apple won’t reject the app if I use ionic 3 + capacitor or ionic 4 + capacitor.
Also me and my fellows had in mind that maybe Apple Testflight would help us figuring out whether or not Apple would reject our app. Is that the case? Can testflight actually determine if we will get the warning?
Thank you a lot for your time, this is a huge concern for me.
I hope you have a great week 
1 post - 1 participant
(This post is permitted by ionic team in advance)
Hello, Ionic and Capacitor developers.
This is the author of @ionic-native/google-maps and cordova-plugin-googlemaps.
I would like to make fundraising to support these plugins on Capacitor platform, especially iOS platform.
Purpose: Give the ability to this plugin works on Capacitor iOS platform
Fundraising amount: $3,000 USD
Work duration : maximum 3 months
Start date: after amount is reached
Refund: if I fail to implement in 3 months, I will refund full amount.
@ionic-native/google-maps and cordova-plugin-googlemaps are able to implement Google Maps APIs for each platforms on ionic framework (with Cordova)
These plugins also run on Capacitor Android platform at this time, however they do not run on iOS platform due to the internal technical reason.
I know how to resolve the technical problem, and I already confirmed this plugin works on Capacitor iOS in a test app before.
However I have to make a big internal changes to support for Capacitor iOS platform.
Not only iOS code, but also overall of this plugin code.
In order to work for this, I would like to make a fundraising for my work.
The goal of the fundraising amount is $3,000 USD.
I will start working after the fundraising amount is reached to the 3,000 USD at least.
Estimate working duration is 3 months.
If I fail to implement the code in 3 months, I will refund the amount fully (Exception: If I get illness (i.e. COVID-19), or meet troubles (car hits) something, I will discuss with you)
Please donate some amount from https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/2781
Thank you for considering.
Best regards,
1 post - 1 participant
We have an Ionic project that we would like to publish in Google Play. However, we would like to install the Ionic deploy plugin in order to update the application on client’s devices easily. However, after installing the plugin the expected behavior is not met. I will now try to explain the steps I followed in order to give a good overview:
“cordova-plugin-ionic”: “5.4.7”
I would like to note that I tried the second alternative from the docs (installing cordova plugins) here: https://ionicframework.com/docs/appflow/deploy/api#plugin-variables however this did not work out either.
Last but not least, following the steps above I created the .apk file myself using AndroidStudio but the result was the same - live update does not work.
I would appreciate if anyone has an idea what is causing the issue.
1 post - 1 participant
I want show image in ion-select tag but ion-select dosent support image and in drop down i cant create static array it should be from server and when the person select country from dropdown it should be show in ion-select as desired image if anyone face this scenario please let me know the ways.
1 post - 1 participant
Thanks for having this option here. As first, I want to write about my query in this platform but one issue not able me to write my query and this is the fourth time I am writing. Visit my website to know about my business. Now I am going to discuss this site and how it affected and take my time.
Your site is really good and very easy to use but while writing a forum and please take it as feedback. Whenever I want to write a query then I have to submit 2 or 3 times because it always works in a very slow manner and sometimes after refreshing the page I am not able to see my query.
Note that, I am not saying that this problem is happening to all but there is no issue regarding my internet server or my pc so I think this is the problem which I am facing right now.
Thanks and be sure to reply.
1 post - 1 participant
Hi,
My scenario is as below.
I have 4 tabs- tab1, tab2, tab3, and tab4. If I will navigate from the login page after login the tabs will open with active tab tab1. then I will navigate to tab 3.
From Tab3 I will navigate to page A->page B -> page C. From page C I want to set root tab3. then I start back navigation from android hardware back, then ideally it should not go to either page A, page B, or page C. But It is navigating to that pages.
for navigation , I am using this.router.navigate([‘X’, ‘a’, ‘b’]) and for setting roo I am using this.navCtrl.navigateRoot(‘A/B’,{ replaceUrl: true });
I want to use the hardware back button for subpages to go back but not from the root tab. I don’t want to navigate back from the tab to the login page.
Thanks in advance.
Thanks
1 post - 1 participant
Hi,
I’m migrating an app from Ionic3 to Ionic5 by copying the code from the old app to the new and updating the code with the new rules.
Now I have to define some custom colors, I’ve used this code in the file variables.scss:
:root {
...
--ion-color-evenItemAcceptedBg: #006600;
--ion-color-oddItemAcceptedBg: #006600;
--ion-color-evenItemPendingBg: #f9bb06;
--ion-color-oddItemPendingBg: #f9bb06;
}
I’d like to use these colors in a page.
This code doesn’t work:
<ion-item *ngFor="let pendingDoc of filteredPendingDocuments; let even = even"
class="pendingItem"
[color]="even? 'evenItemPendingBg' : 'oddItemPendingBg'">
If a use default colors the same code works:
<ion-item *ngFor="let pendingDoc of filteredPendingDocuments; let even = even"
class="pendingItem"
[color]="even ? 'primary' : 'secondary'">
So which is the correct way to define and use custom colors?
Thank you very much
cld
1 post - 1 participant
Several people have worked on our ionic angular app over the last 12 months (often in isolation), and as a result there are three different firebase plugins used. I’m assuming we don’t need all three, so which ones can be discarded - which is considered the best one - if any?
1 post - 1 participant
Hi,
I’ve performed the migration from Cordova to Ionic described in:https://ionicframework.com/docs/appflow/cookbook/phonegap-build-migration
and getting the next error when trying to perform: ionic cordova build android
[ERROR] Cannot perform build.
** Since you’re using the custom project type, you must provide the**
** ionic:build npm script so the Ionic CLI can build your project.**
Below is the ionic info output. Any idea?
Many thanks,
Amit
Ionic:
Ionic CLI : 5.4.16 (C:\Users\amitnv\AppData\Roaming\npm\node_modules\ionic)
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0, ios 5.1.1
Cordova Plugins : no whitelisted plugins (19 plugins total)
Utility:
cordova-res : not installed
native-run : 1.0.0
System:
Android SDK Tools : 1.0 (D:\AndroidSDK)
NodeJS : v12.16.3 (D:\Program Files (x86)\nodejs\node.exe)
npm : 6.14.5
OS : Windows 10
1 post - 1 participant
I have used Firebase SDK to authenticate user via phone number (https://firebase.google.com/docs/auth/web/phone-auth) and it works fine on Ionic lab and on Android.
The problem comes when I test it on iOS. When the function signInWithPhoneNumber(phoneNumber, appVerifier) is called, I get the error Recaptcha Verifier is only supported in a browser HTTP/HTTPS environment.
I am using Ionic 3, Cordova 8, cordova-android 8.0.0 and cordova-ios 5.1.0
Any solution for this?
1 post - 1 participant
i am using custom svg icon for ion-icon :-1
and the ion-tab code is:
<ion-tab-bar slot="bottom">
<ion-tab-button tab="explore">
<ion-icon src="../../assets/no upcoming ride/icon-explore@3x.svg"></ion-icon>
<ion-label>Explore</ion-label>
</ion-tab-button>
<ion-tab-button tab="suggested">
<ion-icon src="../../assets/no upcoming ride/icon-suggested@3x.svg"></ion-icon>
<ion-label>Suggested</ion-label>
</ion-tab-button>
<ion-tab-button tab="upcoming">
<ion-icon src="../../assets/no upcoming ride/icon-upcoming@3x.svg"></ion-icon>
<ion-label>Upcoming</ion-label>
</ion-tab-button>
</ion-tab-bar>
i have tried it by changing like this:
ion-tab-button:focus {
ion-icon, ion-label {
color: var(--ion-color-primary) !important;
--ion-color-base: var(--ion-color-primary) !important;
}
}
but nothing worked.
it changed only the label color but the icon color remain the same.
1 post - 1 participant