Hello rapropos! Thank you for your answer… eventually as you know , just to know if hotspot exists and it is on or off , is there a way to query like a native android hotspot parameter directly? Since I think somewhere in android should be stored the parameter that says if hotspot is on or off… Thanks!! Cheers!
Hotspot native with ionic
Geocoding with Ionic Vue & Capacitor
Hello, I’m trying to use geocoding for my app with Vue, but can’t find the way to use Native Geocoder who work with only angular…
Using "capacitor video player" unable to load video in ios (android works fine)
None of the coding examples I’ve found show it, but as when using videojs directly, you need to specify the video type not just its url (or src). So adding type: ‘video/mp4’ got ios working
Redirecting w/ Next.js
I’m using Next.js with Capacitor on my application and the Next.js router plugin isn’t functioning on my mobile device.
Code: router.push('/login')
Expected output: the page gets redirected to /login
What happens: the page doesn’t change
Delay/bug in navController.back ()
I am developing an application with Ionic 5, Angular 11 and Capacitor 3.
In my implementation of the hardware back button I have the following line to go back to the previous path:
this.navController.back();
The problem occurs when I install @ionic-native/core, causing that statement to have a 2-5 second delay. Sometimes it doesn’t even render the component of the new path.
If I don’t install @ionic-native/core the .back() function works fine.
How can this library influence this? Any ideas to fix it?
Thanks
SSR compile errors - Tickets always closed
I’ve spent weeks getting this to work, I am very close to giving up on ionic.
self is not defined. If self is declared as win, then it will give constructor error.
And these tickets always seem to be closed. It seems like people are having issues and more on SO.
And I am following this
https://devdactic.com/ultimate-ionic-ssr-guide/
I’ve also upgraded, downgraded Angular version using 9,10,11,12, node 14,15,16, ionic 5.
No such module capacitor after XCODE update, HELP!
adding my Appicon fixes the problem altho I have a white screen for a little bit (splash screen?)
Vue ionic-multilevel-sidebar
Hi Guys,
I am trying to implement a sidebar menu, with sub-levels. However, I found quite tricky to implement sub-menus with the following pattern:
1- When it clicks on Toogle, and select some higher level menu, it will collapse (showing all children) and keeps side bar open.
2- When it clicks on Sub-menu, it will change the route and close the side bar.
I bought @aaronksaunders udemy course using vuejs and sqlite. It shows a good examples how to create a side-bar menu that can accomplish number 2.
However I found very trick to combine pattern number 1 and number 2 using ionic and vue.
Here’s a example of pattern 1:
Vue does not allowed to reproduce this example using icon names, I had to use camelcase instead (does not work properly).
Do you guys could help me how to reproduce this example using import { xxx} from 'ionicons/icons';
?
Geocoding with Ionic Vue & Capacitor
which plugin are you trying to use, please provide additional information
first install
npm install @ionic-native/native-geocoder
Then in your code import geocoder
import { NativeGeocoder } from "@ionic-native/native-geocoder";
in your code, call the function
const results = await NativeGeocoder.forwardGeocode(
"1134 buchanan st, nw",
{
maxResults: 5,
useLocale: true
}
);
console.log(results);
Updating the state of the Home Page component from a IonModal getting a useEffect error
need to see more code… where is the modal component? where is the call to addData
being done?
Build apps targeting Windows, Mac, and Linux
Hey all! I have been learning about Capacitor for a bit now, and was wondering if it supports targeting Windows, Mac, and Linux?
I heard you could use electron, but that doesn’t seem ideal since i’m sure there is a lot of work to do so you can use Capacitor features.
BTW: I am using svelte
Thanks
Capacitor live-reload for IOS launch browser instead of webview
When a server url is specified capacitor.config.json in order for the app to be loaded from remote, the IOS app is launched in browser (via simulator) instead of the webview. It is not the case for Android, both are loaded in webview. Is this a bug in IOS ? How do I force it to load in webview ? Please help.
Updating the state of the Home Page component from a IonModal getting a useEffect error
Here is some react code to replicate it
Although the error message goes away with this the state still isn’t being updated on the home page. I suspect it has something to do with the component not being loaded when the state changes but then I don’t know how I would make it update.
To replicate just create a basic ionic app, add in these files, install the missing packages (axios, redux, react-redux), wrap the App in index.ts in a redux Provider, and you should be good.
Home Page
export default function Home(): ReactElement {
const quotes = useSelector((state: any) => state.quotes);
const [data, setData] = useState([]);
useEffect(() => {
setData(quotes);
}, [quotes]);
return (
<IonPage>
<IonContent fullscreen>
<Modal />
{data.map((q: any) => {
return <p key={q?._id}>{q?.content}</p>;
})}
</IonContent>
</IonPage>
);
}
Modal
export default function Modal(): ReactElement {
const [showModal, setShowModal] = useState(false);
const dispatch = useDispatch();
const getData = async () => {
const quote = await axios.get("https://api.quotable.io/random");
dispatch(addQuote(quote.data));
setShowModal(false);
};
return (
<>
<IonButton onClick={() => setShowModal(true)}>Open Modal</IonButton>
<IonModal isOpen={showModal} onDidDismiss={() => setShowModal(false)}>
<IonButton onClick={() => getData()}>Get Data</IonButton>
</IonModal>
</>
);
}
Redux
export const initialState = [];
export const quotesReducer = (state: any[] = initialState, action: any) => {
switch (action.type) {
case "ADD_QUOTE": {
state.push(action.payload);
const temp = state;
return temp;
}
default:
return state;
}
};
export const addQuote = (quote: string) => {
return { type: "ADD_QUOTE", payload: quote };
};
const reducer = combineReducers({
quotes: quotesReducer,
});
export const store = createStore(reducer);
Cheers!
Long press in Ionic Vue
How should one create a long press handler in Ionic Vue? E.g., instead of tapping on a button, this handler would detect a 3 second long press and trigger a different menu.
I found this for Angular
But is the expectation now with the Gestures API that we implement long press from scratch?
Build apps targeting Windows, Mac, and Linux
Not really in any meaningful sense. There isn’t much of any common “native” functionality in those OSes that I can think of as being particularly useful to web apps. You can always deploy a PWA that will of course run in a browser, and anybody running those OSes likely has a browser lying around.
Capacitor is about providing access from JavaScript to stuff that isn’t ordinarily accessible from JavaScript. Do you have a particular feature in mind that:
- can’t be done in an ordinary browser / JavaScript environment;
- could be done “natively” in all three of the OSes you mention;
- doesn’t constitute a massive security hole for potential users?
How to integrate google map navigation inside my ionic application?
desperately looking for the navigator inside my ionic app…anyone got solution?, please help me
How to deploy IonicAPP on Tomcat server?
As ionic supports even browser rendering, one may need to deploy the ionic app as normal webapp or any html web server such as iis, httpd or ngnix etc in such case these are the steps required.
In ionic 5, you can build for any web server using the command
npm run build --prod
OR
ionic build --prod -generateSourceMap false
and copy the generated www folder as ROOT (removed existing ROOT folder) in folder E:\apache-tomcat-10.0.10\webapps
then visit
http://localhost:8080/
IonList css contain: content not support for ios
Hi guys, when I made a test on ios. I realized the ion-item I wrote inside the ion-list is disappearing, so I am open safari and make a double check. I found the element css of contain: content inside the style of ion-list not support for ios.
Please, does anyone have a better solution for this?
Data Binding in Angular and React
Hello All, I want to know which one is better for data binding in two ways between angular and react? As I know react is one-way data binding means that a UI element can’t affect a component’s state but not an idea about angular. Can anyone explain me?
Build apps targeting Windows, Mac, and Linux
You can use capacitor-community/electron GitHub - capacitor-community/electron: Deploy your Capacitor apps to Linux, Mac, and Windows desktops,