I am having difficulty trying to implement an ionic refresher to my app so once you pull down on refresh the page will add more to the current list on the page. I have added snippets of my original notifications page along with the Ionic Docs refresher component. If anyone knows how to implement this correctly it would be much appreciate as their is no examples for the solution when it comes to Ionic React and Typescript.
Here is the Ionic Refresher component from react which I am having issues trying to implement.
import React from 'react';import { IonContent, IonRefresher, IonRefresherContent } from '@ionic/react';import { RefresherEventDetail } from '@ionic/core';import { chevronDownCircleOutline } from 'ionicons/icons';function doRefresh(event: CustomEvent<RefresherEventDetail>) { console.log('Begin async operation'); setTimeout(() => { console.log('Async operation has ended'); event.detail.complete(); }, 2000);}export const RefresherExample: React.FC = () => (<IonContent> {/*-- Default Refresher --*/}<IonContent><IonRefresher slot="fixed" onIonRefresh={doRefresh}><IonRefresherContent></IonRefresherContent></IonRefresher></IonContent> {/*-- Custom Refresher Properties --*/}<IonContent><IonRefresher slot="fixed" onIonRefresh={doRefresh} pullFactor={0.5} pullMin={100} pullMax={200}><IonRefresherContent></IonRefresherContent></IonRefresher></IonContent> {/*-- Custom Refresher Content --*/}<IonContent><IonRefresher slot="fixed" onIonRefresh={doRefresh}><IonRefresherContent pullingIcon={chevronDownCircleOutline} pullingText="Pull to refresh" refreshingSpinner="circles" refreshingText="Refreshing..."></IonRefresherContent></IonRefresher></IonContent></IonContent>);**
Below is one of my Notifications page where I intend to add the "IonRefresher".
import React, { useContext } from "react";import { IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonList, IonItem, IonLabel, IonIcon,} from "@ionic/react"; return (<IonPage><IonHeader><IonToolbar><IonTitle>Notifications</IonTitle></IonToolbar></IonHeader><IonContent><IonList><IonItem><IonLabel><h2>Thank you for applying to...</h2><p>We hope to get in touch with you soon about...</p></IonLabel><IonIcon slot="end" icon={sendOutline} /></IonItem><IonItem><IonLabel><h2>You have started following...</h2></IonLabel><IonIcon slot="end" icon={logoTwitter} /></IonItem></IonList></IonContent></IonPage> );};export default Notifications;