The ReactJS version of the Ionic cross platform mobile application development framework.
Questions tagged [ionic-react]
240 questions
0
votes
1 answer
How to pass shadowroot ref of parent to child component in react
I am trying to insert a codemirror 6 component inside Ionic react framework's IonContent, but it completely messes with the codemirror styles because of the shadowdom used by IonContent.
Codemirror allows us to pass a root property where I can pass…
The Prenx
- 483
- 4
- 15
0
votes
1 answer
Ionic 6 React: Change IonItem lines color
I want to change the border bottom of this IonItem,
i tried adding a class called border-light
And css
.border-light {
…
AbdulAzeez Olanrewaju
- 976
- 1
- 13
- 32
0
votes
1 answer
Can't resolve image while using it via css background image? Not being able to use anything from assets in Ionic?
I'm trying to load an image in one of my components and for this, I created one sample app using the following command:
ionic start yp-patient-app sidemenu --type=react --capacitor
After completion, I moved to one of the component and tried to use…
Ashish Bairwa
- 757
- 1
- 6
- 19
0
votes
2 answers
Pass HTML into custom Component
I've created a custom component to simply layout content inside IonCardContent. This works great for my needs so far:
interface ContainerProps {
position?: string;
content?: string,
colour?: string;
custClass?: string;
}
const…
Phill Healey
- 3,084
- 2
- 33
- 67
0
votes
0 answers
How to store locally an image from URL?
I am making an Ionic react native app. I need to store many images that are accessibles on a public URL (example : www.example.com/image.jpg).
I actually store a json tab with nativeStorage module. Now I would like to find a solution for some…
Timothy Cuenat
- 16
- 5
0
votes
2 answers
Add custom CSS class via variable to returned jsx
I've created a custom component which essentially returns html markup in order to display content based on the values passed to the component. Here's a simplified version for brevity:
interface ContainerProps {
position?: string;
content?:…
Phill Healey
- 3,084
- 2
- 33
- 67
0
votes
1 answer
Element is not assignable to type 'FC'
I've learning React/Ionic/Typescript by creating a project for myself and have stumbled on a situation that I'd like to understand better. I've created the following custom component:
import React from 'react';
import…
Phill Healey
- 3,084
- 2
- 33
- 67
0
votes
2 answers
Add flashlight to ionic react project
Trying to add flashlight to ionic react project for a barcode scanner app, could not find any documentation whatsoever on implementing it in ionic react. Any links to sites with how to solve this would be great. The only documentation I can find is…
Zayne komichi
- 408
- 4
- 11
0
votes
2 answers
Adding Additional Conditions To IF ELSE
I'm building my first Ionic React app and created a simple custom component that returns content based on two optional input values.
When I had a simple if/else if/else conditional, the component rendered fine, but adding an extra 'else if' prevents…
Phill Healey
- 3,084
- 2
- 33
- 67
0
votes
2 answers
How to check Network connection with Ionic React?
I would like to check my Internet connection in my Ionic React application.
All what I find on Internet is for Ionic angular.
How can I do that ?
Timothy Cuenat
- 16
- 5
0
votes
1 answer
How to move Cancel button to the right in IonSearchbar in Ionic React
I tried to make the search bar in Ionic React but the Cancel button is on the left instead of right. Here is my code:
{searchActive?
nonameforthis
- 17
- 4
0
votes
1 answer
What is the replacement for *ngFor = "let row of data;" in Ionic React
I am fetching an array of values from a API call and I am saving it an array. Now I am creating a data table using Ionic React Grid like below and I want to pass the array values into the columns I know in Angular it is possible to achieve it using…
Vignesh Ramesh
- 5
- 1
0
votes
1 answer
How to handle changes in @ionic-react toggle item?
I'm using the @ionic-react library and now I have to add a simple IonToggle true/false value but I'm stuck, I can't handle changes and the funny thing is if I print on screen the new value I see "on" every time. How can I handle events in…
Young Al Capone
- 369
- 1
- 6
- 25
0
votes
1 answer
Trying to target one single mapped list item and change its Icon in react
I am trying to change an outlined heart icon to a filled heart icon onClick. I have it working but all the hearts on each card change.
I know I have to try and use the track.id or some sort of id but I just cannot figure out how to do it ?
Any help…
Ndango
- 59
- 8
0
votes
0 answers
Not able to close ion-menu when clicked out side the menu, I am following ionic framework docs and they are not using any additional codes for closing
Link to ion-menu ionic docs.
I am using ionic-react and elements. menu items list is mapped inside an ionContent inside an IonMenu.
when menu items are clicked I am using menuController.toggle() to close the menu. Can someone help me to close the…
Arunraj A V
- 31
- 6