The ReactJS version of the Ionic cross platform mobile application development framework.
Questions tagged [ionic-react]
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…

tomigeme
- 15
- 3
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:…

Phill Healey
- 3,084
- 2
- 33
- 67
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…

Byurhan Beyzat
- 61
- 6
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…

Byurhan Beyzat
- 61
- 6
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…

Patrick Kenny
- 4,515
- 7
- 47
- 76
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…

junaid khalid
- 11
- 1
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