Questions tagged [ionic-react]

The ReactJS version of the Ionic cross platform mobile application development framework.

240 questions
1
vote
0 answers

IonIcon Component to use Icons coming from "react-icons" package

I want to make IonIcon use react-icons like below. Type 'IconType' is not assignable to type 'string'. I understand the error, but is there a way i could still use react-icons. Like this Because i'm looping through some object, i'm picking some…
AbdulAzeez Olanrewaju
  • 976
  • 1
  • 13
  • 32
1
vote
1 answer

Ionic - Routerlink not triggering Lifecycle events

I'm struggling with Ionic's lifecycle events used with RouterLink. I have my app data in a JSON file that renders each item using the url paramenters when the page is loaded. I need buttons to go to the next or previous item and refresh the page…
1
vote
1 answer

ionic react doing firebase query

I am using ionic react and stuck on query data. i know how to update specific data using code like below: const dbref = firebase.database().ref('/') await dbref.child("/withdrawQueue").push({"date": (new Date()).getTime(), "uid": uid, "coins":…
Moblize IT
  • 1,140
  • 2
  • 18
  • 44
1
vote
1 answer

Ionic React "hardware backbutton" closes modal but navigates back to root of app

I am trying to close a modal with the native Android back button in my project. The below code closes the modal but navigates back to the root of the project. document.addEventListener('backbutton', (event) => { if(modalIsOpen === true)…
Ndango
  • 59
  • 8
1
vote
3 answers

items.map: Parameter 'item' implicitly has an 'any' type

I'm trying to learn Ionic React with Typescript by creating a simple app for myself. At this point 'I'm trying to dynamically populate an IonSegment from an array, the relevant code looks like this: const [items, setItems] = useLocalStorage([{ id:…
1
vote
2 answers

How to use href with onClick() in IonButton?

The below onClick() function works as intended without href. But when I add in the href, only the href seems to run, not the onClick() function. How do I both run the onClick() function and also send the user to a new page? …
esafresa
  • 480
  • 7
  • 19
1
vote
2 answers

Ionic Capacitor QR Scanner black screen on DARK MODE set from phone itself

I've problems with QR Scanner on DARK MODE the screen is black on light mode with some css tweaks it's working but not on dark mode selected from the device itself not from app. Used plugin: https://github.com/bitpay/cordova-plugin-qrscanner I add…
1
vote
1 answer

Ionic Cannot read properties of null (reading 'removeChild') at StackManager.transitionPage

I'm started getting the next error on app open while developing (have it after build/sign too) I think this is something with the Routes and I think I'm not doing something as it must be The app basically is something like crypto wallet with…
1
vote
1 answer

How to import a single function in create-react-app? (tree shaking is not working)

I'm using create-react-app (react-scripts 4.0.3)/Ionic React to build a mobile app. I'm having trouble with tree shaking, which according to this answer has been supported since v2.x of create-react-app. I'm using Webpack Bundle Analyzer to analyzer…
1
vote
1 answer

Unable to render map loop return in Ionic React

I have a ionSelect in my application with which I am trying to show selected test on event "onIonChnage" in the table as table row. the state gets updated but the map loop do not return/display the table row as expected. I have searched on the web…
1
vote
1 answer

Ionic Route replace Url without page animation

Im about to setup a product Page with ionic-react and @ionic-react-router. The products have different variants, soo I created a optional url parameter to enable smooth sharing. My route is defined like this: product: { component: ProductPage, …
Sysix
  • 1,572
  • 1
  • 16
  • 23
1
vote
1 answer

Bluetooth LE Connection in Ionic-React with Capacitor-community Bluetooth-LE plugin

I am developing an android app using Ionic-React that scan the BLE devices and connect to the device. I am using capacitor community Bluetooth LE plugin github for the purpose, I am able to scan and connect to Bluetooth Low Energy device but, the…
1
vote
1 answer

Write proper css/styling for an image and a text next to it

I'm working on an Ionic React Project and I would like to add an image (the square below) and a text next to the image ('Home'), in the same line & height, in the header of my app. I have trying different css styles but nothing works. import React…
Ani
  • 788
  • 3
  • 7
  • 21
1
vote
0 answers

How to insert image in a React Ionic Project running on top of Capacitor?

I'm working on a React Ionic Project, running on Android and iOS and I'm using the latest versions of React, Ionic and Capacitor packages. Ionic CLI : 6.13.1 Ionic Framework : @ionic/react 5.6.0 Capacitor: Capacitor CLI : 3.0.0 …
Ani
  • 788
  • 3
  • 7
  • 21
1
vote
1 answer

should be shown when there's no network connection, but it's not

I'm working on an Ionic React Project running on top of Capacitor and I need to show a Toast message , everytime there's no internet connection. To get network and connectivity information, I'm using Network Capacitor Plugin:…
Ani
  • 788
  • 3
  • 7
  • 21