The ReactJS version of the Ionic cross platform mobile application development framework.
Questions tagged [ionic-react]
240 questions
1
vote
0 answers
Change button color and text color onclick using ionic react
I'm using Ionic React in my project to create a mood selection tab. When a user selects/clicks a mood (button), the emoji, button color, and button text color will change. If the user then clicks another button, the previous button will revert back…
Kātā
- 13
- 7
1
vote
1 answer
Capacitor Filesystem API cannot find the relative path?
(Disclaimer: I am a newbie with React and Ionic) I am looking to implement capacitor's filesystem API into a React Component in order to read a JSON file that contains a simple string. My JSON file is in the same folder as my FileSystem.tsx…
Tristan Lux
- 25
- 5
1
vote
0 answers
Ionic modal animation issue when showing and hiding keyboard
I have an IonModal that slides up from the bottom of the display and has input fields. When fields are selected to be edited, keyboard shows but the modal does not animate.
Modal shows with animation, but when keyboard shows, modal does not animate…
oyalhi
- 3,834
- 4
- 40
- 45
1
vote
1 answer
IonNav is not working with react 18 or ionic 6
here im using IonNav.
import { IonNav } from "@ionic/react";
im getting blank screen with IonNav
return(
…
Please help
Sumit Sharma
- 160
- 9
1
vote
1 answer
Ionic React: Trying to set value of dual-knob IonRange
I'm trying update the set values of a dual knob IonRange from a global state. Use case is that the IonRange is the primary input for this value, but it may be changed programatically based on certain conditions and the IonRange should reflect…
traxx2012
- 394
- 2
- 16
1
vote
0 answers
Ionic Cap Websocket connection refused during Handshake in Android Webview
I'm making a hybrid app working with Ionic React, using solana web3.js module.
Everything works fine when I launch web server, and access on computer and mobile (chrome, firefox).
To build on android, I pass a custom function to fetch when i start…
YfNk
- 94
- 5
1
vote
1 answer
ionic - IonBackButton failed to construct 'URL'
I'm having a problem performing navigation for some pages using React + Ionic.
One of the pages I want to access has a: "IonBackButton" (no text).
But when I access this page, I get the following error:
When I delete the line where the…
Lucas Raphael
- 71
- 8
1
vote
0 answers
IonInput: IonOnChange event firing twice
Current behavior:
IonOnChange event for IonInput fires twice when backspacing 1 character.
Version: "@ionic/react": "5.6.11",
Expected behavior:
When value is 1 character and backspace is pressed, input value should be empty.
Steps to reproduce:
If…
jarivak
- 828
- 13
- 28
1
vote
1 answer
How can I pass data across pages and append an input to an array? (Ionic + React)
I am trying to code a mobile application which involves a quiz/questionnaire aspect to it where a user goes through it by inputting their choice and routing to the next page and inputting their next choice (this happens about 5 times with 5…
ahsirk83
- 23
- 4
1
vote
1 answer
Ionic-React App Automatically Changing to Dark Mode
I've an ionic-react native mobile app. Started showing weird behaviour.
When I'm building the apk and installing it to Android Device, it works fine for the first time. The 2nd time, it's opening with a dark theme.
If I clear this particular app's…
Ashish Tripathi
- 580
- 4
- 18
1
vote
0 answers
How to customize the default footer tab of ionic 5 react
I have created the footer tab like this.
The following image shows my default footer tab:
Below is my code
.cp_footer ion-tab-button {
background: #15074d;
color: #fff;
}
.cp_footer ion-tab-button img {
width: 18px;
margin-top: 5px;
}
.cp_footer…
Mac D
- 31
- 3
1
vote
3 answers
Conditional Rendering not waiting for Fetch to Complete
In the App i fetch Data from Firebase/Firestore, parse it to a Interface and add the object to the State Array. After that i want to render it. But react wont render the array. I Have commented the Code that you can see what i thought it should…
snux_cs
- 63
- 7
1
vote
0 answers
How to use data-desc for ionic fab button when we use react as development library in react?
data-desc="Sales"
Above attribute is when we use angular as development framework in react. What if I want use react as development library, and want to give data description for the ionic icon inside ionic fab button? how to acheive this?
Manoj
- 17
- 1
1
vote
1 answer
Ion menu side navbar is getting closed if I click on any ionlist's ionitem
here is my code
Menu.tsx
const Menu = () => {
const showCat = () => {
let res = Array(5)
.fill(0)
.map((_, i) => (
Cat{i}
));
return…
Manoj
- 17
- 1
1
vote
0 answers
Ionic6 React URL Query Params not getting removed
Im using Ionic6 React for my app. I have a overview page which queries data from the database and displays them in the ui. I added a button which redirects me to a 'add new entry' page. If the user saves the new entry im checking the inputs and…
Nico
- 323
- 4
- 14