The ReactJS version of the Ionic cross platform mobile application development framework.
Questions tagged [ionic-react]
240 questions
1
vote
1 answer
ionic react getting screen width dynamically
i am using ionic react and struggling on how to use calcWidth to get the width dynamically. Currently i am using something like below
width={310}
which gives 310 px in my react component i am using. the documentation suggest to use calcWidth but…

Moblize IT
- 1,140
- 2
- 18
- 44
1
vote
2 answers
How to enable horizontal scroll on IonGrid using Ionic 5-React
How to enable horizontal scroll on IonGrid with IonCard. below is the code i am trying to enable the horizontal scroll so that all fields will be shown in the same row on any device or browser
…

ane
- 101
- 3
- 10
1
vote
0 answers
React Hook Forms/Ionic React: Fulfilling input value automatically based on changing input value
There is requirement on the project who ask to fulfill an input value based on a changing input value; for instance: cash and pos are the two fields and there is a global price, having 70 as the price, if the user inputs 50 for cash, pos must be…

SalahAdDin
- 2,023
- 25
- 51
1
vote
1 answer
Argument of type is not assignable to parameter of type partial<>
I am trying validate my Ionic react form, but I getting the following error while calling the validationSchema in the useForm method. The error I am getting while trying to call the validationSchema in useForm is Argument of type '{…

Gaurav Thantry
- 103
- 1
- 13
1
vote
1 answer
How can I change an image dynamically in Ionic React?
I'm pretty new to React and TypeScript, and I ran into this problem:
In my UI I'm using several decorative graphics as follows:
import Kitten from './img/Kitten.png';
Now, I have a dark-mode toggle. When it…

traxx2012
- 394
- 2
- 16
1
vote
2 answers
Firestore reads too much data (Ionic React) (ReactJS)
So I have this app using Ionic React and Cloud Firestore as the Database. Mostly I use these codes to retrieve data:
const [teacher, setTeacher] = useState('');
const history = useHistory();
const [users, setUsers] = useState([{}]);
async function…

Celine Angelina
- 13
- 2
1
vote
1 answer
Open url in webview React native push notification
I want to develop an app where I can send remote push notifications to react native app. The push notification will contain a url link and when a user clicks on that link, the app should open up that link in the app (webview)
Is this possible with…

Neliswa Mnotfo
- 11
- 3
1
vote
2 answers
Why is my socket.io event listener works properly on a UI component but doesn't work on the other in React?
I have a weird bug that I'm trying to solve (or maybe I made it weird because I'm new to React). I'm using React and TypeScript to build an app that will allows me to subscribe to certain topics in order to receive values and show me in the UI in…

basilisk
- 1,156
- 1
- 14
- 34
1
vote
2 answers
Argument of type 'number[]' is not assignable to parameter of type 'SetStateAction'
I started out typescript with Ionic-react so i am facing typescript issue in setting my state
Here is my code
import { RouteComponentProps } from "react-router-dom";
type ICoord = {
data: number[];
};
type Props = RouteComponentProps &…

Ratnabh kumar rai
- 1,426
- 4
- 21
- 48
1
vote
0 answers
Ionic React : Switching between tabs is very slow since I added Ionic
I just added Ionic to my existing React app and, then, impleted the @ionic/react-router.
But after to modify my navigation tabs, I notice a BIG difference of delay when I switch between two tabs :
0.5 seconds with ReactRouter ✅
2 seconds with…

Damien Romito
- 9,801
- 13
- 66
- 84
1
vote
0 answers
Ionic React: How to integrate custom fonts and icon set
I’m new with Ionic React and I’m looking for the correct way to integrate custom fonts and a custom icon set into my project, so that it’s working on all platforms as intended.
Custom Icon set
My goal is to make my custom icons work with IonIcon so…

dbock
- 11
- 2
1
vote
2 answers
How to combine side menu with tab navigation in Ion React
I have a tab navigation page in an ionic react app and I want to add a side menu to this page, I know I have to use the IonMenu component but I am struggling to merge the two. here is my code indicating how I implemented my tab navigation:
import…

themba alex khumalo
- 51
- 1
- 8
1
vote
3 answers
Ionic React for mobile apps - Horizontal scrolling with elements that get out of screen
I'm using Ionic React to build a mobile app. I want to create a horizontal scrollable component that exceeds screen width to display categories. I can't seem to find the right Ionic components to use for that.
Any help?

Fanis Mahmalat
- 777
- 6
- 13
1
vote
1 answer
Ionic Health Plugin unable to connect to google fit
I am using Ionic React to build an application that communicates to the fitness data of the user using the ionic Cordova health plugin, but does not seems to work.
import { Health } from "@ionic-native/health/ngx";
const Tab1: React.FC = () => {
…

OshoParth
- 1,492
- 2
- 20
- 44
1
vote
2 answers
ReactJS: How to pass functions with a link to another component?
I'm struggling for days now with a setup I'd thought would be easy and reusable:
I'm building an App with Ionic 5 + React, which has kind of a news feed, where multiple kind of content comes together. But not exactly the way like in Facebook, it has…

Robert
- 431
- 7
- 19