Questions tagged [ionic-react]

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

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 '{…
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…
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…
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…
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?
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