The ReactJS version of the Ionic cross platform mobile application development framework.
Questions tagged [ionic-react]
240 questions
1
vote
1 answer
Show only when clicking on , considering that we have many elements
From an API request, I get an array of data like below (I get 100 elements, but here I'm showing only 2):
data: Array(2)
0: {cardId: 270, name: "Basic card" , type: "type1"}
1: {cardId: 345, name: "Special card" , type: "type2"}
I show them in my…
Ani
- 788
- 3
- 7
- 21
1
vote
1 answer
testing react function with state update on input text using jest, rtl, and ionic
I have a react component that uses Ionic React framework. The component has IonInput to insert the text and a form submission.
I am trying to write a test that covers the state update inside the function that handles the inputtext, but could not…
Ahmed J.
- 484
- 6
- 11
1
vote
1 answer
State is empty in the first render, causing an error. How to solve this?
I'm trying to show a barCode for my cardNumber like below:
import "./Home.css";
import React, { useState, useEffect, useRef } from "react";
import axios from "axios";
import { useBarcode } from "react-barcodes";
const Cards: React.FC = () => {
…
Ani
- 788
- 3
- 7
- 21
1
vote
0 answers
How to upload image from path React JS? (without using )
In my Ionic React JS app, I've the path of the image. I want to upload this image on the server from the path.
I do not want to use input type=file as this image is clicked from the camera and I've the path, not the file object.
Any help is highly…
Ashish Tripathi
- 580
- 4
- 18
1
vote
0 answers
getting error when i tap my index.html file of ionic react project, after the project build (by Ionic build command)
I am using Ionic React Project. I need to run my built project by just tapping the index.html file after project build. I built my project by ionic build command and then i tried to run my project by tapping index.html file, getting the given…
vishnu vinod
- 35
- 5
1
vote
1 answer
Opening another app with React Ionic on IOS
I have a problem with opening another app with React Ionic on IOS using Capacitor. canOpenUrl always returns true, even when the app (bankid) is not installed. When I run openUrl nothing happens.
//First i import capacitor
import {Capacitor} from…
Guillermo Uggla
- 11
- 1
1
vote
2 answers
React Ionic Tabs nested Routes Animación no works
I have tried from different ways to create nested routes with Tabs, the idea would be the following:
WelcomePage->LoginPage->HomePage(Tab)->RecipePage
The problem is in the entrance animation to homepage and also the departure, in the case of…
Jamt0
- 131
- 9
1
vote
1 answer
React Hooks(use State) Error in Ionic react
i am using ionic-react and everything is going smooth but when i tried to use useState from react hooks, i ran into this problem:
What i have tried:
Updating all packages to latest in Project folder using 'npm update'
linking with react and react…
Daniyal Shaikh
- 419
- 3
- 12
1
vote
1 answer
How to reduce render time while rendering huge list of items in Ionic React
I am using IonicReact to build a mobile app. I just wanna render a list of items from a local JSON file (JSON file contains an array of more than 1000 items). I map through the array items and print them by wrapping them in .It takes few…
Mehdi Saqlen
- 129
- 1
- 3
- 13
1
vote
1 answer
problem with IonTabButton not capturing onClick events
I am using the ionic 5 css library with react.
I liked the styling of IonTabButtons as opposed to IonButtons because IonTabButton allows for text underneath Icon. In the screenshot I show all the icons displayed as tab-buttons with the exception of…
Kevin Crum
- 195
- 2
- 16
1
vote
2 answers
StatusBar does not have web implementation
I'm trying to render a component using react-testing-library in an Ionic React based project. There appears to be an issue with StatusBar. The error says StatusBar does not have web implementation.
My code looks something like this:
let…
Sabbir Ahmed
- 1,468
- 2
- 16
- 21
1
vote
1 answer
Ionic 5 / React: Use ion-icon to embed custom SVG
I have a React app in Ionic 5 and I want to add some custom SVGs to it.
This SO question is about Angular, but my question is about React.
My app folder structure looks like this:
src
assets
listen.svg
SvgListen.tsx
Here is…
Patrick Kenny
- 4,515
- 7
- 47
- 76
1
vote
1 answer
Set default value of ion-select in React / Ionic 5
I created a React app with Ionic 5 and I want to set the default value of a select element that is shown in a form.
This SO question is all about Angular, but I need to do this in React.
Here's my select code:
Patrick Kenny
- 4,515
- 7
- 47
- 76
1
vote
3 answers
Is it possible to add TailwindCSS into Ionic React?
I am looking into ways of how I can integrate Tailwind CSS into ionic react application, I have tried this but fell into a dead end, I am aware of the the Next.JS and Tailwind CSS starter created by one of the ionic experts but also inspecting that…
iforgotmyusername
- 11
- 3
1
vote
1 answer
ionic react type is not assignable
i am using ionic-react with below code and its giving error
Type '{ state: IState; dispatch: React.Dispatch; }' is not assignable to type 'IState'.
Object literal may only specify known properties, and 'state' does not exist in type 'IState'.
The…
Moblize IT
- 1,140
- 2
- 18
- 44